Detailed explanation of the way to implement scratch-off games on the mobile terminal using js+HTML5-JS Tutorial-php.cn

Detailed explanation of the way to implement scratch-off games on the mobile terminal using js+HTML5

黄舟

Release： 2017-03-24 14:31:32

Original

2603 people have browsed it

This article mainly introduces the implementation method and implementation code of Scratch Lottery on the mobile terminal. Has very good reference value. Let’s take a look at it with the editor

Programmers have a habit of thinking, that is, when they see something that moves (something with a bit of technology, forget about cats or dogs), they always have to think about it first. , how is this thing controlled by code? For example, elevators, neon lights on the roadside, remote controls, children's toys, etc. have all been "obscene" by programmers.

Sometimes I feel that programmers can see the world more clearly.......

I believe everyone has played scratch games, let’s introduce one A mobile way to implement scratch-off games! Use canvas

1. Use HTML 5 canvas globalCompositeOperation attribute to implement scratch-off

Ideas:

(1) First, you need to position a box to determine where you want to place the scratch-off area.

(2) There is a box in the positioning box for the content, which is where the prizes are placed.

(3) Cover the upper box with a canvas

(4) When the hand touches and moves, part of the canvas can be erased to reveal the prize area

(5) When enough (3/4) has been erased, you can choose to make the canvas disappear automatically and slowly fade out (this effect is optional)

Mainly the fourth step, How to erase?

GlobalCompositeOperation is selected here, which is the synthesis operation in Canvas. Simply put, Composite (combination) is the combined display effect between the graphics you draw later and the graphics you draw first in drawing. For example, in Chinese painting, you first draw a stroke of red, then a stroke of green, and they intersect. The part is a mixed color, and in oil painting, the green will cover the red of the intersecting part. The processing in program drawing is Composite, the corresponding function in Canvas API It is globalCompositeOperation.

There is a property value in globalCompositeOperation that is "destination-out", which means it will be transparent when the paintings overlap. Just when we use it here, we can doodle on the canvas. The overlapping areas will become transparent and reveal what is under the canvas, which is the effect we want.

html code is as follows:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <title></title>
 <link rel="stylesheet" type="text/css" href="css/guaguale.css" rel="external nofollow" />
 </head>
 <body>
 <!-- 大的背景盒子-->
 <p id="main">
  <!-- 定位的盒子-->
  <p class="canvasBox">
  <!-- 放内容的盒子-->
  <span id="prize">
   恭喜发财，红包拿来
  </span>
  <!-- 蒙版画布-->
  <canvas id="canvas"></canvas>
  </p>
 </p>
 </body>
 <script type="text/javascript">
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext(&#39;2d&#39;);
 /* 画布偏移量，下面用到的时候再介绍*/
 var arr = getOffset(canvas);
 var oLeft = arr[0];
 var oTop = arr[1];
 /* 初始化画布*/
 ctx.beginPath();
 ctx.fillStyle = &#39;#ccc&#39;;
 ctx.fillRect(0,0,canvas.width,canvas.height);
 ctx.closePath();
 /* 增加触摸监听*/
 document.addEventListener("touchstart",function(){
  /* 初始化画笔*/
  ctx.beginPath();
  /* 画笔粗细*/
  ctx.lineWidth = 30;
  /* 设置组合效果*/
  ctx.globalCompositeOperation = &#39;destination-out&#39;;
  /* 移动画笔原点*/
  ctx.moveTo(event.touches[0].pageX-oLeft,event.touches[0].pageY-oTop);
 },false)
 document.addEventListener("touchmove",function(){
  /* 根据手指移动画线，使之变透明*/
  ctx.lineTo(event.touches[0].pageX-oLeft,event.touches[0].pageY-oTop);
  /* 填充*/
  ctx.stroke();
 })
 /* 之所以会用到下面的那个函数getOffset（obj）
  * 是因为event.touches[0].pageX、pageY获取的是相对于可视窗口的距离
  * 而lineTo画笔的定位是根据画布位置定位的
  * 所以就要先获取到画布(canvas)相对于可视窗口的距离，然后计算得出触摸点相对于画布的距离 
  * */
 /* 获取该元素到可视窗口的距离*/
 function getOffset(obj){
  var valLeft = 0,valTop = 0;
  function get(obj){
  valLeft += obj.offsetLeft;
  valTop += obj.offsetTop;
  /* 不到最外层就一直调用，直到offsetParent为body*/
  if (obj.offsetParent.tagName!=&#39;BODY&#39;) {
   get(obj.offsetParent);
  }
  return [valLeft,valTop];
  }
  return get(obj);
 }
 </script>
</html>

Copy after login

css code is as follows:

*{
 margin: 0;
 padding: 0;
}
#main{
 width: 100%;
 padding: 20px 0;
 background-color: red;
}

.canvasBox{
 width: 78%;
 height: 160px;
 border-radius: 10px;
 background-color: #FFF;
 margin-left: 11%;
 line-height: 160px;
 text-align: center;
 position: relative;
}
#canvas{
 width: 96%;
 height: 96%;
 position: absolute;
 left: 2%;
 top: 2%;
 background-color: transparent;
}

Copy after login

The fifth step is to use canvas pixels Get (note here, pixel-level operations must be opened in a server environment)

getImageData(int x, int y, int width, int height): This method gets the (x, y) point on the canvas Starting with the data of the picture area whose width is width and height is height, this method returns a Canv

asPixelArray object, which has attributes such as width, height, and data. The data attribute is an array, and every 4 elements of the array correspond to one pixel.

(You can also do this to reverse the image and change the rgba value)

The object returned by getImageData(int x, int y, int width, int height), data What is stored inside is the pixel information

Detailed explanation of the way to implement scratch-off games on the mobile terminal using js+HTML5

We then print the data. The data attribute is an array, and every 4 elements correspond to one pixel (saved in the form of rgba information of each pixel).

Detailed explanation of the way to implement scratch-off games on the mobile terminal using js+HTML5

So we can judge whether the pixel is transparent based on the opcity value of the pixel, is it equal to 0?

Number of transparent pixels/total number of pixels = erasure ratio

js code:

document.addEventListener("touchend",function(){
  /* 获取imageData对象*/
  var imageDate = ctx.getImageData(0,0,canvas.width,canvas.height);
  /* */
  var allPX = imageDate.width * imageDate.height;
  
  var iNum = 0;//记录刮开的像素点个数
  
  for(var i=0;i<allPX;i++){
  if(imageDate.data[i*4+3] == 0){
   iNum++;
  }
  }
  if(iNum >= allPX*3/4){
  // disappear里面写了缓慢清除的css3动画效果
  canvas.setAttribute(&#39;class&#39;,&#39;disappear&#39;); 
  }
 },false)

Copy after login

" .disappear " css style, css3 disappearance animation

.disappear{
 -webkit-animation: disa 2s 1;
 animation: disa 2s 1;
 -webkit-animation-fill-mode: forwards;
 -moz-animation-fill-mode: forwards;
 -o-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
}
@keyframes disa{
 0%{opacity:1;}
 100%{opacity: 0;}
}

Copy after login

The above is the detailed content of Detailed explanation of the way to implement scratch-off games on the mobile terminal using js+HTML5. For more information, please follow other related articles on the PHP Chinese website!