菜鸟做HTML5小游戏 - 刮刮乐

继上篇翻翻乐之后，又来刮刮乐。还是先上效果图：

 

开始demo的世界：

1.css去绘制界面效果。（源码提供）

2.原理：要实现刮刮卡内容的出现，我用div做了背景层去显示刮出的内容结果【重点】。中间Canvas区域去实现刮刮的效果。

3.构建界面效果,背景层zj为挂出效果。Canvas去做动画

1 <div class="zj"> 2 <canvas id="CanvasLe" width="280" height="140" style="margin-top:10px;"></canvas> 3 </div> 4 5 <style>.zj{background:url("zj.png") no-repeat ;}</style>

4.开始动画

先绘制 ‘灰色’ ，然后在鼠标的移动事件Canavas.onmousemove去计算 滑动的坐标值，然后clearRect方法去清除该坐标的色素。

1 window.onload = function(){ 2 init(); 3 } 4 var imageWidth = "280"; 5 var imageheight = "140"; 6 function init(){ 7 //定义绘画宽 高 8 9 //定义Canvas对象 10 var Canavas = document.getElementById("CanvasLe"); 11 var Context2D = Canavas.getContext("2d"); 12 13 var bool =true; 14 Context2D.fillStyle='#cccccc'; //设置覆盖层的颜色 15 Context2D.fillRect(0,0,imageWidth,imageheight); //设置覆盖的区域 16 //增加Canvas鼠标滑动事件 17 Canavas.onmousemove = function(e) { 18 var canvasOffset = $(Canavas).offset(); 19 var canvasX = Math.floor(e.pageX - canvasOffset.left); 20 var canvasY = Math.floor(e.pageY - canvasOffset.top); 21 canvasY += parseInt(imageheight); 22 lottery(canvasX,canvasY,Context2D); 23 } 24 } 25 //刮刮函数 26 function lottery(x,y,c){ 27 c.clearRect(x,y-imageheight,20,20); 28 }

好了，效果很明显可以根据滑动坐标清除色素块。

要是在移动手机设备上运行以上还不行，还需要加入触屏滑动事件touchmove。接下来就给去监听这个事件

1 Canavas.addEventListener('touchmove', function(event) { 2 // 如果这个元素的位置内只有一个手指的话 3 if (event.targetTouches.length == 1) { 4 event.preventDefault();// 阻止浏览器默认事件，重要 5 var touch = event.targetTouches[0]; 6 // 把元素放在手指所在的位置 7 var canvasOffset = $(Canavas).offset(); 8 var canvasX = Math.floor(touch.pageX - canvasOffset.left); 9 var canvasY = Math.floor(touch.pageY - canvasOffset.top); 10 lottery(touch.pageX,touch.pageY,Context2D); 11 } 12 }, false);

ok，大功告成。实现了刮刮卡的效果。

各位园友们可以进一步扩展，共同学习是进步的阶梯。

 

 

补充:谢谢各位园友的指出，赶紧修复源码。

测试都通过，遇到一个问题在 IE11中 background:url("s_bd.jpg") 为什么无效果，请各位高手给我指点指点，先谢谢

源码猛击 这里[修复]

 

转载于:https://www.cnblogs.com/oceanworld/p/3459732.html

总结

以上是生活随笔为你收集整理的菜鸟做HTML5小游戏 - 刮刮乐的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。