跳到主要內容

繪文字刮刮樂 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.
}



標籤

標籤：

留言

張貼留言

這個網誌中的熱門文章

猜數字遊戲 (電腦猜人)

前幾天午睡時突然被告知要參加公司內部的程式設計比賽，題目是用C寫一支文字模式的4位數字猜數字遊戲，由使用者來猜電腦的數字。在上星期時其實就已經有公佈了，但我沒有注意到所以是臨時加入，還好這是個簡單的題目，不用花多少時間就可以寫出來。 規則： - 這是一對一比賽，雙方各選擇一4位數字，不讓對方知道。 - 4位數字由數字0至9組成，每位數不得重複。 - 雙方輪流猜對方的數字，直到一方猜中為止。 - A方猜B方的數字後，B方根據A方的猜測回答幾A幾B。 - 一個A表示猜中一個數字且位置正確，一個B表示猜中一個數字但位置不正確。 - 當一方猜中4A0B時即表示猜中對方全部4個數字且位置正確，贏得比賽。 - 例：B的謎底是4208，底下箭頭左測是A的猜測，箭頭右測是B的回答。 　　　1234 ==> 1A1B 　　　5678 ==> 1A0B 　　　2406 ==> 1A2B 　　　... 　　　4208 ==> 4A0B ; 寫個程式讓玩家來猜電腦的數字不難，不過我從來沒有寫過讓電腦來猜玩家數字的版本，所以花了點時間想想怎麼寫。 研究後歸納出二個點。 1, 使用窮舉法將所有可能數字組合列出。 2, 每次猜測後根據結果排除不可能是答案的組合，重複這個動作直到猜中答案為止。 第1點只是實作問題，第2點概念也很簡單，但要過濾不是答案的組合根據的是什麼？乍看之下沒什麼頭緒，不過想通之後就非常簡單了。 它的基本原理如下：假如謎底是4561，如果猜1524則會得到1A2B。從相反的角度來看，如果謎底是1524，則猜4561時也會得到1A2B的回答。 利用這個方法，每一次猜測一個數字X後，再以這個數字當作答案，來和所有剩下來的候選答案作比對，如果得到的結果(幾A幾B)和數字X是一樣的話，就把這個數字保留下來繼續作為候選答案，否則就過把這個數字過濾掉。下一把，繼續從候選答案裡選一個出來猜，重複上面的動作，直到猜中為止。 ; C++ STL的algorithm裡有個叫作next_permutation的函數，可以用來生成排列。 #include <iostream> #include <algorithm> using namespace std; int main () {   int myints[] = {1,2,3};  ...
11 則留言
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 »

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 »