發表文章

目前顯示的是 12月, 2020的文章

繪文字刮刮樂 Emoji Scratch

圖片
使用html5+javascript+emoji,做了一個給小孩玩的刮刮樂小遊戲,讓他們學習簡單的英文單字。如果在chrome上使用,還可以利用tts英文發音唸出單字,讓小孩也能練習英文聽力及發音。 玩   /  Android  /  Github 底下是開發這個遊戲的一些技術重點紀錄。 1,刮刮樂的部分是使用html5的canvas製作。原理是使用兩個canvas,一個作底圖圖層(c0),一個做為可被刮除的前景遮罩圖層(c1),c1預設不可見為一記憶體圖層。把c0的原始圖型內容事先存起來作為後續更新使用,並在c0上安裝onmousedown,onmouseup及onmousemove,滑鼠滑動時以在c1上畫粗直線的方式模擬出刮除效果,然後再以新的c1前景遮罩結合事先儲存的c0底圖重新合併更新畫面,這樣就能作出刮刮樂的效果。 c1上的刮除效果是利用將2d context的globalCompositeOperation設為'destination-out'模式,並且strokeStyle設為'rgba(0,0,0,1)',以這樣子的設定在c1上畫線時,得到的是一個擦除的效果,這樣就作到刮刮樂刮除的效果。 c0.onmousemove = function(e) {   if (mouse_down) {     ctx1.strokeStyle = 'rgba(0,0,0,1)';     ctx1.globalCompositeOperation = 'destination-out';     ctx1.lineWidth = 18;     ctx1.lineCap = 'round';     ctx1.beginPath();     ctx1.moveTo(last_x, last_y);     ctx1.lineTo(x, y);     ctx1.stroke();     last_x = x;     last_y = y;     updateCanvas();   } } 更新畫面的方法是以getImageData從c1抓取整張前景遮罩,對每一個pixel檢查如果alpha值是0表示這個點己刮除,則這個點取c0的同一位置的顏色值,否則表示這個點還未刮除需要取c