跳到主要內容

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



標籤：

留言

張貼留言

這個網誌中的熱門文章

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

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

以lex/yacc實作算式計算機

前面我們透過 手工的方式 實作了一個簡易的算式計算機，現在我們要開始使用工具來作同樣的事，比較看看手工和使用工具有什麼不同的差別。首先要介紹的就是lex&yacc。 lex & yacc lex(Lexical Analyzar)及yacc(Yet Another Compiler Compiler)是用來輔助程式設計師製作語法剖析器的程式工具。lex的工作就是幫助我們將輸入的資料文字串流分解成一個個有意義的token，而yacc的工作就是幫我們分析這些token和我們定義的規則作匹配。下圖中所表示的是使用lex及yacc的一般工作流程。 首先看到yacc會讀入一個.y檔案，這裡.y檔案的內容就是我們使用類似(E)BNF語法定義的語法規則，yacc會分析這些語法規則後，幫我們產生可以用來解析這些規則的程式碼，而這個檔案一般名稱預設為y.tab.c，產生的程式碼裡面最重要的一個的函式叫作yyparse。 同yacc類似，lex也會讀入一個.l的檔案，這個檔案裡面定義的是如何從文字流裡解出token的規則，使用的方法是常規表示式(regular expression)。在圖的左側中間我們還可以看到有一個叫作y.tab.h的檔案從yacc產生出來並餵給lex作輸入，這個檔案是yacc根據在讀入的.y檔裡面所定義的token代號所產生出來的一個header，這樣yacc及lex產生出來的程式碼裡面就可以使用共通定義的代碼而不必各寫個的。lex分析過.l檔案後也會產生一個一般預設叫作lex.yy.c的原始碼檔案，裡頭最重要的一個函式叫作yylex。 最後，我們把yacc產生出來的y.tab.c還有lex產生出來的lex.yy.c，以及其它我們自己撰寫的原始碼檔案一起拿來編譯再作連結，最後產生出來的就是一個可以用來解析我們定義的語法的解析器工具。以上是整個lex及yacc的使用流程概觀。 常規表示式 在正式使用lex之前，我們首先來對常規表示法作一個基本的認識。常規表示法是一種用來表示字串樣式(pattern)的中繼語言，就好比前文所介紹的(E)BNF表示式一樣，都是用來描述其它語言的語言，只不過用途不太一樣罷了。 常規表示式使用一些中繼符號(meta-symbol)以及ASCII字元定義字串樣式，以下列出一些常規表示式所使用的符號。 . 表示除了換行字元...
25 則留言
Read more »

窮人的 AI：自動漫畫分鏡切割

  ( 試試看 ) 在手機上看漫畫時，有一個體驗上的問題： 漫畫原本是「整頁設計」 手機最適合的是「一格一格往下滑」 與其強迫使用者縮放、拖曳、放大，更直覺的做法是： 直接把一頁漫畫自動切成多個分鏡，轉成瀑布流閱讀。 這篇文章分享一個不靠深度學習、完全在前端完成的實作方式： 使用 OpenCV.js 做分鏡偵測 輸出 rect list 再用 全畫面 Canvas 把每個分鏡當成一個「閱讀單位」 整個系統可以拆成三層： 漫畫圖片 ↓ 影像處理（找出 rects） ↓ 排序後的 rect list ↓ 全畫面 Canvas 逐格呈現（瀑布流） Step 1：灰階化 漫畫的資訊 90% 都在線條上，顏色反而是干擾。 cv.cvtColor(src, grayImage, cv.COLOR_RGBA2GRAY); 灰階化的好處： 降低維度 對邊緣偵測更穩定 對黑白漫畫特別有效 Step 2：邊緣偵測，抓出「分鏡的邊」 接下來用最經典、也最夠用的 Canny Edge Detection： cv.Canny(grayImage, edges, 50, 150); 在漫畫中，分鏡外框通常就是最明顯的邊界。 Step 3：形態學操作，把破碎邊框「補起來」 真實漫畫的線條並不完美，常常有斷線、陰影、留白。 所以要做一個很重要的步驟：膨脹（Dilation） const kernel = cv.Mat.ones( 5 , 5 , cv.CV_8U); cv.dilate(edges, dilatedEdges, kernel); 直覺理解就是： 把細線「抹粗一點」， 讓本來斷掉的邊界連成封閉區域。 這一步直接決定後面能不能成功抓到「一整格分鏡」。 Step 4：找輪廓，轉成矩形框（rect） 有了封閉區域之後，就可以找輪廓： cv.findContours( dilatedEdges, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE ); 每一個 contour，代表一個「可能的分鏡區塊」。 接著轉成矩形： const rect = cv.boundingRect(contour); rects.push([rect.x, rect.y, rect.widt...
張貼留言
Read more »