很讚的遊戲編輯器

使用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

最近一兩周利用空檔時間將過去作過的幾個小遊戲，改版成簡單的對應的web版。原來的程式底層都是使用C/C++實作，透過 Emscripten 將原來的程式build成javascript，然後再結合web應用完成簡單的移植。因為原來的程式一開始在實作時就幾乎是可以跨平台的，所以移植很順利很快。我目前使用的Emscripten是1.35.0版本，因為只是用作移植測試目的，自從安裝後就沒有再更新過。 完成移植的遊戲分別是： 成語四則運算 單人撲克101 Paint by Numbers 2005 精彩數獨詳解 移植的基本原則很簡單： 首先確定原來的C/C++程式可以在Emscripten的command line環境下編譯。 再來定義一些API可以讓html綱頁裡的javascript呼，這個部份更多細節可以參考 官方網站的文件 說明。 C/C++讓javascript呼叫的API定義好後，也編譯成功了。就可以先用printf的方式作簡單的測試，測試方式也很簡單。如下圖的例子，是一個簡單的將兩個數字相加並回傳和數的cAPI cAdd。在mainl裡用一個printf作簡單的測試，然後在cmdline環境下編譯成功後，透過nodejs來執行觀察結果是否正確。 API初步沒有問題了，然後就可以真正撰寫些code來呼叫這些API，主要方式是在javascript裡透過Module.ccall來呼叫我們的API。Module.ccall的第一個參數是API的名稱，第二個參數是API的回傳值類型，第三個參數是API的參數列表類型，第四個參數是參數列表。在我們的例子裡，API名稱叫作cAdd，回傳值是一個數字類型，參數列表是兩個數字類型，輸入1和2。結果用一個alert顯示出來，正確答案是3。 透過以上幾個簡單的原則，很容易就可以把一些原本用C/C++寫成的程式，改版成網頁版。