iT邦幫忙

2021 iThome 鐵人賽

DAY 4
6
Software Development

奇怪的知識增加了!原來程式還可以這樣用?!系列 第 4

[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讓每次出現的刮刮樂底圖都不一樣,
不然到時候親戚們發現全部刮刮樂都長一樣就真的完蛋了(當然每一張都還是不會中獎)


上一篇
[Day3] 完全免費! 一分鐘在GitHub建立個人網站!
下一篇
[Day5] 另一半疑似劈腿?! 教你用Python科技抓姦!
系列文
奇怪的知識增加了!原來程式還可以這樣用?!30
1
hankuo
iT邦新手 5 級 ‧ 2021-09-04 12:47:31

等不及要到過年給長輩們用了!

lulu_meat iT邦新手 3 級 ‧ 2021-09-04 12:51:59 檢舉

給長輩的話還是給現金比較好喔!
我們要孝順!

1
Air Adam
iT邦新手 5 級 ‧ 2021-09-04 22:34:17

很怕阿罵誤以為真中獎,拿中獎的圖樣去換現金。
不過,看著中獎的金額閃動著,心也跟著撲通撲通起來了。

lulu_meat iT邦新手 3 級 ‧ 2021-09-05 11:35:42 檢舉

哈哈? 不知道如果拿真的中獎的刮刮樂圖片做成這個可不可以兌獎?

1
dscwferp
iT邦高手 1 級 ‧ 2021-09-05 16:39:10

GOOD!
這中秋節就來這個給長輩高興一下!

lulu_meat iT邦新手 3 級 ‧ 2021-09-05 16:57:17 檢舉

謝謝您的支持!

1
Pulin
iT邦新手 5 級 ‧ 2021-09-06 15:11:53

乾真的佩服原PO的幽默感XDD
我也來做個讓長輩白高興一場(誤
好期待後續的文章/images/emoticon/emoticon01.gif

lulu_meat iT邦新手 3 級 ‧ 2021-09-06 15:21:26 檢舉

謝謝您的肯定! 明天會教監控軟體ㄉ毀屍滅跡,歡迎來看看喔~

Pulin iT邦新手 5 級 ‧ 2021-09-06 15:24:04 檢舉

聽起來很刺激(喂
肯定是準時收看的/images/emoticon/emoticon07.gif

我要留言

立即登入留言