跳到主要內容

繪文字刮刮樂 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的同一位置的顏色值，否則表示這個點還未刮除需要取c1的前景遮罩顏色。所有pixel都處理完成後，再把整個新的合併事先儲存的c0的背景底圖內容的imagedata透過putImageData畫到c0上更新。

function updateCanvas() {
  var imgData = ctx1.getImageData(0, 0, width, height);
  var imgDataNew = ctx1.getImageData(0, 0, width, height);
  for (var i = 0; i < width*height*4; i+=4) {
    var a = imgData.data[i+3];
    if (0 == a) {
      imgDataNew.data[i] = imgDataSrc.data[i];
      imgDataNew.data[i+1] = imgDataSrc.data[i+1];
      imgDataNew.data[i+2] = imgDataSrc.data[i+2];
      imgDataNew.data[i+3] = imgDataSrc.data[i+3];
    }
  }
  ctx.putImageData(imgDataNew, 0, 0);
}

2，如果是使用chrome browser來執行這個遊戲，則能夠利用chrome的文字轉語音(TTS)功能唸出英文單字。這裡是透過window.speechSynthesis及SpeechSynthesisUtterance來完成這個功能，如下程式片段所示。

function trySpeak(s) {
if (window.speechSynthesis) {
  var msg = new SpeechSynthesisUtterance(s);
  if (msg) {
    msg.lang = "en-US";
    window.speechSynthesis.speak(msg);
  }
}

3，為了讓括括樂canvas太大在計算時計算量跟著太大，所以把大小限制為300x300，但這樣一來畫面顯示的時候又會顯的太小。所以為了讓這個300x300px的canvas可以填滿畫面，需多作一點微調。

首先在html內的viewport屬性就把它剛好設為300px，讓畫面寬度剛好符合300px。另外記得把body預設的margin和padding都設為0，才不會不小心多出其它px，讓canvas的300px被切掉。

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {margin:0;padding:0;}
...
</style>
...
</head>

如果是在android裡用WebView來作顯示時，需要多作點參數設定，確保view可以填滿畫面。

WebView wv = findViewById(R.id.webView);
wv.getSettings().setLoadWithOverviewMode(true);
wv.getSettings().setUseWideViewPort(true);

最後如果是在一般browser裡顯示的話，為了讓畫面顯示比較符合原始設計，使用iframe把原始html包裹起來，大小設定可以包含括括樂canvas即可。

<iframe src="emojiscratch.html" title="EmojiScratch" width="310" height="500" frameborder="0">

4、遊戲內以表格事先編好有那些emoji的資料，但因為這個遊戲是以web的方式來呈現，而在不同裝置上的browser呈現的emoji可能都各不相同，甚至有些emoji是不支援無法顯示的。所以需要在遊戲前先把那些不支援無法顯示的emoji挑選出來，只是目前沒有什麼標準的方法或api可以作這樣的檢查，所以這裡用一個間接的方式來作檢查。使用的方式是試著把要檢查的emoji畫到一個作為檢查用的canvas，這個canvas的大小只要設為1個pixel大小。如果這個canvas上面有畫出東西(alpha值不為0)，那麼就表示這個emoji是可顯示的，否則就當作它無法顯示。當然用這種方式不能保證100%正確有效，但至少是個可行的辨法，可以避免在emoji不支援時顯示出一個X。

function supportsEmoji(ch) {
  const ctx = document.createElement("canvas").getContext("2d");
  ctx.canvas.width = ctx.canvas.height = 1;
  ctx.fillText(ch, -4, 4);
  return ctx.getImageData(0, 0, 1, 1).data[3] > 0; // Not a transparent pixel.
}



標籤：

留言

張貼留言

這個網誌中的熱門文章

KillSudoku 4顆星精彩數獨 (三) - XY-Chains

這是數獨解題技巧裡面的高級技巧，比X-Chains還再高一點點。會這個技巧的話，就可以解4或5顆星的題目了。 這個用來測試的題目，用 KillSudoku 來解可以解出，中間使用了2次Naked Subset，1次 W-Wings ，1次 X-Chains ，2次 XY-Chains 。所以算起來，這一題應該是有5顆星的題目。 附帶一提，目前找鍊的演算法並沒有去找一條最短的鍊，所以可以看到用 KillSudoku 解的時候，第36的步驟找到一條超長的鍊，這條鍊足足由13條連線構成，要是沒練過的話，絕對頭昏眼花，找不出這樣的鍊來的。 實際上在這個步驟裡，是可以找到另一條更短的鍊。不過目前以先能work，之後有空會再改進演算法的部份。
張貼留言
Read more »

KillSudoku 4顆星精彩數獨詳解 - 鍊技巧

這題數獨(sudoku)題目估計為4+顆星，有點難度。解題需要應用多種技巧，過程非常精彩有趣，是個好題。 底下使用 KillSudoku 作詳細圖解。 １，使用基本排除法則，可以簡單填入６個數字。到此為止，開始使用 候選數法 來解題。如下所示，為填入６個數字後的狀態圖。 ２，如下圖，使用進階排除法，在第９列和第４行可以先排除幾個候選數。 ３，如圖，在第２行有一個 Naked Subset (3,4)，可以對3,4候選數作排除。附帶提一下，反過來看在同一行裡面也可以說有另一個Hidden Subset(2,5,8)存在。Naked Subset和Hidden Subset常是一體二面同時存在，只不過對我們來說，Naked Subset是相對比較容易看的出來。 排除第２行的3,4後，又可以對第２列以外的3作排除，如下圖。 ４，接著，在第５行又發現了一個 Naked Subset (3,7,8)。 對第５行三個Subset以外的候選數3,7,8作排除後，又接著產生可以對第５行以外的3作排除。 ５，這一題解到此為止，開始進入高潮。大部份能解到3顆星題目的人，猜想應該就此卡住。以下開始需要應用更高級的鍊技巧，才能夠繼續進行。 應用X-Chains鍊技巧，可以找到一條由４條強連結組成的鍊，可以排除候選數2。這裡的鍊指的是由２條以上的強連結組成，而所謂的強連結是指在同一行、或同一列或同一個Box裡，由唯二的候選數構成的連結。如上圖中的第９行中，只有二個2，這二個2構成一條強連結。為什麼說這是一條強連結？因為在這條連結的AB二個端點中，肯定會有一個2存在，要麼是A點要麼是B點。鍊技巧就是將多條強連結串連起來作候選數排除的技巧，而X-Chains是高級的鍊技巧裡面的基本技巧。 接上圖，這樣一來就又可以應用基本排除方法，填入３個數字，如下圖所示。 ６，接下來就是本題最精彩的部份，以下需要連續找到３條鍊，才能繼續往下解。 ７，找出３條鍊後，剩下來的部份就沒什麼特別的了，只需要應用基本法就能把所有剩餘數字填完。
張貼留言
Read more »

單人撲克牌遊戲 - 蒙地卡羅

新增一個簡單的單人撲克牌遊戲： 蒙地卡羅 ，簡單介紹一下玩法。 下載 事先排列好5x5張牌。 每次移動一張可以配對的牌，並消除這對牌。在上下、左右及斜向相隣的二張牌，只要擁有同樣數字(不計花色)，即可配對。 消除二張配對的牌後，剩餘的牌以往左往上的方式補滿空隙，接著在發新牌補滿後面的空格。 重覆步驟2~3，直到沒有牌可以配對及發完所有牌為止。 結果有二種。一個是勝利，成功的消除掉所有牌。另一個是Gameover沒有牌可以再作配對。
張貼留言
Read more »