菜鳥作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") 爲何無效果，請各位高手給我指點指點，先謝謝

源碼猛擊 這裏[修復]