[Day4] 过年没钱发红包? 那就做一个手机版刮刮乐吧!

这边先发誓这篇真的是刮刮乐系列的最後一篇文,
其实我也不想这麽拖台钱,但是如果不这样凑文章内容,
我真的撑不到三十天><

[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让每次出现的刮刮乐底图都不一样,
不然到时候亲戚们发现全部刮刮乐都长一样就真的完蛋了(当然每一张都还是不会中奖)


<<:  Golang 变数与型态

>>:  [Day4] Flutter - 水平布局容器 ( Row )

[Day 29] 非同步组件ㄅㄨㄅㄨ

如果某天我们在写大型专案,需要用上大量的组件,这是时候就可以用上非同步的组件,在需要时载入需要的组件...

{DAY 24} Pandas 学习笔记part.10

前言 前面学习了很多pandas的功能 在标签的处理上还有资料的分析上也有进行介绍跟实际资料的演练 ...

Day06 捷径的工具箱-App

Hello 大家, 不知不觉来到连假的最後一天了, 要开始收心罗~ 是不是有一些朋友又请了三天特休来...

Day42. 范例:仿真Git (备忘录模式)

本文同步更新於blog 情境:让我们利用备忘录模式,实作一个仿真Git 首先定义Commit &...

【Day 8】Google Apps Script - 依文件实作 Demo 用的 API

依文件的描述撰写 API,实作时如果发现有实作的问题,再反馈讨论修正。 今日要点: 》制作 API...