刮奖效果

本人前端新手,刚入了一个小公司,公司web游戏的需求比较大,所以最近在搜各种微信营销活动的案例,以备不时之需。前几天看到一个微信刮刮奖的东西,感觉蛮有意思的,照着网上搜的教程自己做了下,发现几个坑,这里做下记录,希望大家多多指教。
游戏主要是一个canvas控件,先填充验色或图片,然后设置上下文(getContext('2d'))的globalCompositeOperation属性为'destination-out',然后绑定mousemove/touchmove事件来画圆就行了。问题出在绑定touchmove上:

guagua.stage    .on(mobile?"touchstart":"mousedown",function () {        guagua.stage.drawn=true;        console.log("start")    })    .on(mobile?"touchmove":"mousemove",mobile?function (e) {        e.preventDefault();        if(guagua.stage.drawn){            pointX=e.originalEvent.touches[0].clientX-guagua.stageX;            pointY=e.originalEvent.touches[0].clientY-guagua.stageY;            guagua.drawPoint(pointX,pointY);        }    }:function (e) {        e.preventDefault();        if(guagua.stage.drawn){            pointX=e.clientX-guagua.stageX;            pointY=e.clientY-guagua.stageY;            guagua.drawPoint(pointX,pointY);        }    })    .on(mobile?"touchend":"mouseup",function () {        console.log("end");        guagua.stage.drawn=false;        if(guagua.howMuchLeft()>50){            guagua.stage.hide();        }    });

网上的例子是14年的,里面移动端事件的x坐标是e.touches[0].clientX我试了一下,结果报错:touches未定义,打断点下发现touches事件列表是包含在originalEvent属性里的,然后加上去以后确实可以了,但是mozila的文档也是有touches的https://developer.mozilla.org/en-US/docs/Web/Events/touchmove,我用的是chrome版本号是51.0.2704.84 m,不知道是不是浏览器的问题。

关键字:JavaScript, html5, mobile

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部