爱程序网

自己实现一个刮刮乐

来源: 阅读:

  今天有看到一个园友发了一篇自己实现的刮刮了,感觉挺好玩的就下下来看看,结果运行不了,想想也不是太难就决定自己实现一个,还是花了点时间的,源码下载链接在最下面(这个绝对有用,除非你的浏览器不支持canvas)。废话不多说,讲解一下几个重要的点吧:

一、首先是刮刮卡的效果,很自然想到两层,于是我采用了两层重叠的canvas

        <canvas id="back" width="400px" height="200px" border="2px"></canvas>
        <canvas id="front" width="400px" height="200px" border="2px"></canvas>

  back这个用来显示底下的文字信息,上面的显示涂层。这样我们的处理就只与front有关了。我们就只要在back上画字,    front上面华一层银色的涂层:

1 Canvas.fillRect(back,0,0,400,200,"gold")
2             Canvas.drawText(back,"谢谢惠顾",60,120,"black");
3             Canvas.fillRect(front,0,0,400,200,"silver");

二、事件的监听处理,为了方便我就没有采用手机端,所以用的都是mouse事件,刮刮乐就是要将上面的一层去掉,这个我们很  自然的就会想到clearRect,所以事件处理的思路也很简单就是处理出表要刮掉的那些地方,最简单就是捕捉每个鼠标到的  点然后clear一块,但是这样如果块太大的话会导致效果很难看,快太小中间会有断点,这是处理断点就成了一个问题,我  采用的方法就是记录上次的点连着都清一次,这样的效果还是挺好的。代码如下:

 1 function mouseDown(e){
 2                 e.preventDefault();
 3                 isDown=true;
 4             }
 5             function mouseUp(e){
 6                 e.preventDefault();
 7                 isDown=false;
 8                 isFirst=true;
 9             }
10             function mouseMove(e) {
11                 e.preventDefault();
12                 if(e.clientX>480+400||e.clientX<480+0||e.clientY<0+260||e.clientY>200+260){
13                     isDown=false;
14                 }
15                 if(isDown){
16                     if(isFirst){
17                         front.clearRect(e.clientX-480,e.clientY-260,10,10);
18                         prex=e.clientX-480;
19                         prey=e.clientY-260;
20                         isFirst=false;
21                     }
22                     else{
23                         if(e.clientX-480>prex){
24                             var k=(e.clientY-260-prey)/(e.clientX-480-prex);
25                             var i=0;
26                             for(i=prex;i<e.clientX-480;i+=5){
27                                 front.clearRect(i,i*k+prey-k*prex,10,10);
28                             }
29                         }
30                         else{
31                             var k=(e.clientY-260-prey)/(e.clientX-480-prex);
32                             var i=0;
33                             for(i=prex;i>e.clientX-480;i-=5){
34                                 front.clearRect(i,i*k+prey-k*prex,10,10);
35                             }
36                         }
37                         prex=e.clientX-480;
38                         prey=e.clientY-260;
39                     }
40                 }

   虽然说这个实现起来很简单,但是效果还过得去。不过我想进一步实现一点东西就遇到了点问题,首先是这个东西怎么调还是会看到一点锯齿的,再一个是怎样识别你已经刮完了(考虑过识别已经划过的点,但是感觉这个不太好),所以希望有解决方法的园友赐教。

源码下载  

在线演示

关于爱程序网 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助