这边先发誓这篇真的是刮刮乐系列的最後一篇文,
其实我也不想这麽拖台钱,但是如果不这样凑文章内容,
我真的撑不到三十天><
在[Day2] 人资秒跪! 全台唯一线上刮刮乐履历上线罗! 留言区有几位朋友想看刮刮乐的手机版教学,
其实大同小异,只要改4个地方就可以了!
要更改的程序码部分(完整版请看第二天文章)
c1.ontouchstart = function(ev){ // 原本是onmousedown
c1.ontouchmove = function(e){ // 原本是onmousemove
console.log(e);
var w = 50;
var h = 50;
var x = e.pageX-c1.offsetLeft - w/2;
var y = e.pageY-c1.offsetTop - h/2;
ctx1.clearRect(x,y,w,h);
}
}
c1.ontouchend = function(ev){ // 原本是onmouseup
c1.ontouchmove = null; // 原本是onmousemove
}
完成结果
为了做这个东西,我还特别去彩券行买了两张刮刮乐来扫描做图档 (还没中奖气死),
结果发现台湾彩券APP就有图档了哀...
大家过年的时候可以把底图改成没中奖的版本,把连结贴到家族群组上,
说刮到的钱就是红包钱喔! (结果都刮不中笑死)
浅谈JavaScript触控事件
为甚麽电脑跟手机版本的刮刮乐会有差异呢?
因为在电脑,我们是靠滑鼠来控制动作,跟在手机平板用触控的方式不一样,
因次两者的触控事件也会不同喔~
- touchstart : 手指在碰到萤幕时会触发
- touchmove : 手指在萤幕上滑动时触发
- touchend : 手指从萤幕上拿起来的时候会触发
补充
如果大家有兴趣又有时间的话可以存多一点刮完的照片,
然後用random让每次出现的刮刮乐底图都不一样,
不然到时候亲戚们发现全部刮刮乐都长一样就真的完蛋了(当然每一张都还是不会中奖)
>>: [Day4] Flutter - 水平布局容器 ( Row )
如果某天我们在写大型专案,需要用上大量的组件,这是时候就可以用上非同步的组件,在需要时载入需要的组件...
前言 前面学习了很多pandas的功能 在标签的处理上还有资料的分析上也有进行介绍跟实际资料的演练 ...
Hello 大家, 不知不觉来到连假的最後一天了, 要开始收心罗~ 是不是有一些朋友又请了三天特休来...
本文同步更新於blog 情境:让我们利用备忘录模式,实作一个仿真Git 首先定义Commit &...
依文件的描述撰写 API,实作时如果发现有实作的问题,再反馈讨论修正。 今日要点: 》制作 API...