繼上篇翻翻樂之后，又來刮刮樂。還是先上效果圖：

?

開始demo的世界：

1.css去繪制界面效果。（源碼提供）

2.原理：要實(shí)現(xiàn)刮刮卡內(nèi)容的出現(xiàn)，我用div做了背景層去顯示刮出的內(nèi)容結(jié)果【重點(diǎn)】。中間Canvas區(qū)域去實(shí)現(xiàn)刮刮的效果。

3.構(gòu)建界面效果,背景層zj為掛出效果。Canvas去做動(dòng)畫

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.開始動(dòng)畫

先繪制 ‘灰色’ ，然后在鼠標(biāo)的移動(dòng)事件Canavas.onmousemove去計(jì)算 滑動(dòng)的坐標(biāo)值，然后clearRect方法去清除該坐標(biāo)的色素。

1 window.onload = function(){ 2 init(); 3 } 4 var imageWidth = "280"; 5 var imageheight = "140"; 6 function init(){ 7 //定義繪畫寬 高 8 9 //定義Canvas對(duì)象 10 var Canavas = document.getElementById("CanvasLe"); 11 var Context2D = Canavas.getContext("2d"); 12 13 var bool =true; 14 Context2D.fillStyle='#cccccc'; //設(shè)置覆蓋層的顏色 15 Context2D.fillRect(0,0,imageWidth,imageheight); //設(shè)置覆蓋的區(qū)域 16 //增加Canvas鼠標(biāo)滑動(dòng)事件 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 //刮刮函數(shù) 26 function lottery(x,y,c){ 27 c.clearRect(x,y-imageheight,20,20); 28 }

好了，效果很明顯可以根據(jù)滑動(dòng)坐標(biāo)清除色素塊。

要是在移動(dòng)手機(jī)設(shè)備上運(yùn)行以上還不行，還需要加入觸屏滑動(dòng)事件touchmove。接下來就給去監(jiān)聽這個(gè)事件

1 Canavas.addEventListener('touchmove', function(event) { 2 // 如果這個(gè)元素的位置內(nèi)只有一個(gè)手指的話 3 if (event.targetTouches.length == 1) { 4 event.preventDefault();// 阻止瀏覽器默認(rèn)事件，重要 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，大功告成。實(shí)現(xiàn)了刮刮卡的效果。

各位園友們可以進(jìn)一步擴(kuò)展，共同學(xué)習(xí)是進(jìn)步的階梯。

?

?

補(bǔ)充:謝謝各位園友的指出，趕緊修復(fù)源碼。

測(cè)試都通過，遇到一個(gè)問題在 IE11中 background:url("s_bd.jpg") 為什么無效果，請(qǐng)各位高手給我指點(diǎn)指點(diǎn)，先謝謝

源碼猛擊 這里[修復(fù)]

?

轉(zhuǎn)載于:https://www.cnblogs.com/oceanworld/p/3459732.html

總結(jié)

以上是生活随笔為你收集整理的菜鸟做HTML5小游戏 - 刮刮乐的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。