LimeJS : Tainted canvases may not be exported

有人通報我的 HTML5「投籃高手」下載在本機以後不能玩，試了一下，哇！如果選了對的答案，真的就卡住不能繼續玩；而答錯反而沒事。觀察了一下，應該就卡在答對時的回饋動畫，會出現以下的錯誤訊息：

frame.js:132 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

出現錯誤的指令則是使用了「lime.fill.Frame」來截取籃網圖片檔案當回饋動畫的影格。利用錯誤訊息當關鍵字，找到的資料大多說是圖形檔案在本機存取時 crossOrigin 的問題。建議都是圖片載入前設定「crossOrigin」的屬性為「Anonymous」。所以再追了一下 LimeJS 載入圖片的原始碼是在 lime/src/fill/image.js 中。不過，如果將圖片設定了：

.crossOrigin = 'Anonymous';

問題好像更大了，每個載入圖片的地方都出現類似下面的錯誤訊息：

Access to image at 'file:///C:/ ......' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

簡單的說，在 Chrome 裡，設定 crossOringin 根本無法用在本機的檔案。不過，上面的方法雖然有錯誤訊息，程式倒是可以正常運作。

可是咱們對有錯誤訊息這件事就是在意，所以又把前面改過的東西通通改回來。最後是將製作籃網變形動畫的兩個 PNG 圖片手動以 base64 編碼後，設定給兩個變數，利用傳變數的方式給「lime.fill.Frame」建立影格。

結果查了一下 blog 中的舊文，原來這個問題在 2016 就遇過了，也是用預先把圖檔編碼的方式解決的；下一回還是先找找舊文的好，以免繞一大圈又繞回原點。

相關文章

• 雄 : LimeJS : frame.js Failed to execute 'toDataURL'

Android : RedMi Note 2 定時開關機

之前把舊的紅米 Note 2 拿來當電腦的 webcam，為了省電，設定了依時間自動開關機，最近比較少用了，卻找半天，找不到在哪裡設定。晚上又試了一次，總算找到了，趕快截圖記錄一下。

進入紅米 Note 2 的設定後，打開「電量和性能」

...... 閱讀更多 ......

Google Sheet : 取得中文字的 Unicode

教育部筆順網原本是用中文字的 BIG5 碼來取得筆順資料的(利用 big5=XXXX 的參數)，在處理新增的字時，看到有些字利用以前的方法取 BIG5 碼時，發現有些字的字碼並不完整；才發現原來筆順網現在也可以用 Unicode 來取得筆順資料(利用 ucs=XXXX的參數)。

以前因為找不到方法在 Google Sheet 中取得中文字的 BIG5 碼，所以是利用 MS Office 2007 的 Excel 轉的，這一次換 Excel 2007 沒有支援轉 Unicode 的公式，這樣也好，就乾脆全部都直接用 Google Sheet  來處理了。

例如要將 B2 格子內的中文字轉為 Unicode 並把十進制轉為十六進制的表示法，就利用底下的公式：

=DEC2HEX(UNICODE(B2))

UNICODE : 取得字的 Unicode。

DEC2HEX : 將十進制的數字轉為十六進制。

相關文章

• 雄 : Excel : 取得某個中文字的 BIG5 碼

VNC : 行動載具變手寫板

手機和平板有觸控螢幕，所以如果用行動戴具來遙控電腦，它們就變成了無線手寫板了。那如何遙控電腦呢？現在的遙控方案五花八門，運作的方式不外乎是在電腦上安裝軟體，並由此軟體來提供本機的網路服務供載具連線；或是連到外部主機所提供的遠端服務，由遠端來進行電腦和載具的配對連線。本篇所採用的 VNC 方案是前者，網路連線不用透過外部的主機，電腦上安裝 VNC 服務的程式(VNC server)，而戴具上安裝 VNC 客戶端(VNC viewer)。

關於 VNC 的使用，印象中有整理過筆記，查了一下，2012 年4月有一篇，不過，哈哈哈！居然還是草稿，整理一半就丟著了，裡面有些東西己經進化到都不一樣了。只好重頭來過！

前面提到，我們打算以行動載具來遙控電腦，所以我們要在電腦上安裝可提供 VNC 服務的軟體(VNC server)，在行動載具上安裝 VNC 客戶端(VNC viewer)。

VNC 的軟體有不少，但本篇採用的軟體，選用的條件是必須符合免費而且功能較完整的：

電腦端：

• TightVNC
  https://www.tightvnc.com/

行動載具：

• Android :  VNC Viewer for Android (by androidVNC team + antlersoft)
  https://play.google.com/store/apps/details?id=android.androidVNC
  
  
• iOS : Mocha VNC Lite (by MochaSoft)
  https://apps.apple.com/gb/app/mocha-vnc-lite/id284984448

VNC Viewer For Android

其中 VNC Viewer for Android 是一個開源的軟體，專案的網址如下：

• https://github.com/antlersoft/android-vnc-viewer

詳細的功能說明可以參考它的 wiki ：

• https://github.com/antlersoft/android-vnc-viewer/wiki/Documentation

而 Mocha VNC Lite 因為是免費版，所以有五分鐘的限制，計時終了會自動斷線，必須重新連線才能繼續使用，如果覺得不錯，其實可以花 台幣180 元左右升級成付費版，就不用一直重新連線。它其實 iOS 跟 Android 兩種系統都有。不過，如果載具是 Android，比較建議用開源又免費的 VNC Viewer for Android 就好。

在載具上的操作，本篇是介紹 VNC Viewer for Android ，它可以在舊載具的 Android 4.x 版上順利的安裝與運行。

VNC Viewer for Android 提供很多種模式供使用者運用，底下簡單摘要幾項重點。

讓功能選單出現

VNC Viewer for Android 連線成功以後，功能選單應該會現在畫面下方，如果是隱藏狀態，可以長按載具的「選單」鈕。

顏色模式

VNC Viewer for Android 預設使用的顏色模式是色階較小的，如果畫面傳輸的情形良好，可以提高色階，哈！我是直接拉到最高了！設定的方法如下：

• 叫出功能選單。
• 按功能選單上的「更多」。
• 點選「顏色模式」。
• 點選想套用的模式，最高是「24-bit color(4 bpp)」。

按功能表上的「更多」

點選「顏色模式」

點選「24-bit color(4 bpp)」

選定後，功能表會自動關閉。

輸入模式

VNC Viewer for Android 中，關於滑鼠的操作(輸入)，可針對不同需求進行切換。

如果是想縮放、捲動電腦畫面可視的範圍，或是想執行滑鼠右鍵的功能時，建議在「輸入模式」選單中，點選最上面兩項中的「支持縮放的觸摸屏」或「觸摸屏」。

按選單上的「輸入模式」中的最上面兩項中的一項

設定為前兩項的其中一個以後：

• 放大或縮小畫面：以兩指開合的手勢來控制。
• 顯示放大、縮小、輸入文字的工具：以單指點一下畫面即可以叫出工具來使用。
• 滑鼠按一下右鍵：以單指原地快點兩下，可以模擬按一下滑鼠右鍵的功能。
• 滑鼠按一下左鍵：以單指快點一下，可以模擬按一下滑鼠左鍵的功能

點一下畫面後，下方有縮放及文字輸入的工具的圖示

如果是想塗塗、寫寫或是拖曳的動作，「輸入模式」就必須切換為「指標指針控制模式」或是「觸摸屏鼠標;D-Pad..」其中一個模式。

需要拖曳、塗鴨時的輸入模式

模擬滑鼠的滾輪

電腦的滑鼠滾輪可以用來捲動捲軸，在 VNC Viewer for Android 中，我們可以使用音量調鈕來代替，按音量調大聲、調小聲的實體按鈕，就可以遙控電腦的捲軸。

示範影片

底下的影片中，可以看到 VNC Viewer For Android 「輸入模式」如何切換：

在 Android 上和 iOS 上，哪一個塗塗寫寫流暢？哈！只能說 iOS 大勝！不過，或許是我自己的 Android 手機和平板太舊、太差的關係，使用經驗才會輸 iPad 上的。

關於 VNC Viewer For Android 的其它功能，可以參考 wiki 中的詳細說明

• https://github.com/antlersoft/android-vnc-viewer/wiki/Documentation

DIY : 小鬧鐘維修

整理東西，然後發現之前一包被拆解的小鬧鐘，放太久，已經忘了它當初是哪裡壞了。大概是後來沒時間研究，索性先用夾鍊袋「封存」了。昨晚將它解封後，設定了幾個要處理的目標：

• 清理因電池露液而氧化的部位。
• 線圈重新焊接固定。
• 「殘障的」C2914 電晶體焊接「義肢」。

幸好電路板是靠電池負極的部份被電池液污染及銹蝕，傷得比較嚴重的就是 C2914，這顆電晶體的三支腳位氧化嚴重，稍一用力，三支針腳都斷了，沒有替換的材料，只好以小電磨把封裝的塑膠慢慢磨掉，讓針腳露出多一點，然後再焊上電線，並點上三秒膠固定。後來再加了一小段熱縮套，將三條電線束在一起，增加一點強度，畢竟「團結就是力量」。

線圈重新焊上，上電以後，確定電磁鐵有動作以後，準備將齒輪一一放到定位，又費了好大一番工夫。以前重組拆解後的東西以後，通常會多出螺絲，這一回，完全沒有這樣，哈！因為這個小鬧鐘沒有任何一顆螺絲；不過，卻多出了一個找不到家的齒輪！

重組後，一個齒輪找不到家

試運轉以後，確定四根指針都可以動作，只是可以設定鬧鈴動作的時間，不能調整時間；重新再檢視設定桿的的結構，幫迷路的齒輪找到家了！

底下是組合的記錄：

最底下的三個齒輪因為要套疊的關係，識別度很高，很難放錯

時、分、鬧鈴啟動的三個齒輪

接著要先放上黑色的鬧鈴開關連桿，及先前找不到家的那個齒輪，它是用來調整時間，轉動分針的齒輪：

鬧鈴開關連桿及時間調整齒輪

再來是分針齒輪

分針齒輸

秒針齒輪底座

秒針齒輪底座

左上的小齒輪下方有磁鐵，線圈與鐵片構成的電磁鐵會讓它轉動；藍色的齒輪會帶動中央的秒針齒輪，然後再帶動右下的大齒輪，將動力傳導到下方的分、時的齒輪組。

秒針的齒輪組

把上蓋蓋上，完工！

修好的鬧鐘

這個小鬧鐘目前還有一個小地方沒處理，燈的開關電路板有三個針腳解焊後，沒有再焊回去，燈也不知去向。不過也還好，反正燈也很少在用，有空再補上好了。

Android : RedMi Note USB Debugging Security Setting

手上有三支小米家的舊手機，之前在玩 scrcpy 時，最舊的紅米除了鏡像畫面到電腦上以外，可以在電腦以快速按鍵送模擬的按鍵指令來操控手機；但是在紅米 Note 2 上卻只能進行畫面的鏡像。當時以為是 scrcpy 不支援紅米 Note，昨天在玩以 adb shell input keyevent 來操控紅米Note 2中的 IP Webcam，怎麼試都沒反應；把另一支紅米Note 4 開機，準備透過 abd 來安裝 IP Webcam 的 apk 檔案，需要開啟「開發人員選項」中的「USB安裝」功能時，才發現，原來在較新的 MIUI 中，除了「USB 偵錯」的選項以外，其它的相關功能預設是被鎖定的，而且想解鎖，得插入 SIM 卡，登入小米帳號，然後按一堆「同意」，才能將 USB adb 的相關功能打開。

USB安裝、USB調試得要登入小米帳號才能啟用

如果沒有登入小米帳號，「USB安裝」及「USB調試(安全設定)」啟用的按鈕按下後，它只會跳出警訊後，又自動禁用。

...... 閱讀更多 ......

DIY : 3.5mm TS、TRRS 轉 TRS

最近利用舊光碟機拆下來的控制板上的電位器改裝成簡單的混音器，電位器可單獨控制電腦音源輸出分接後的音量，然後和麥克風混音以後，再接到電腦的麥克風輸入端；這樣可以解決 Google Meet 在分享畫面時，麥克風以外的聲音播不出來的問題。

結果愈玩愈大，除了把兩條音源的延長線都分接了 2.54 杜邦端子，還拆了舊音效卡的 3.5mm 立體聲(TRS)插座，做了可拆式的轉換座；可以將現在手機用的 TSSR 耳麥分離為耳機跟麥克風；可以將單聲道(TS)的麥克風轉為雙聲道的 TRS。

一般 3.5mm 的耳機或麥克風端子大概分為三種：

• TS : 無「環」，單音，只有兩個接點。
• TRS : 有一個「環」，立體聲，共有三個接點。
• TRRS : 有兩個「環」，共有四個接點。

根據 Wiki 上查到資料：

• https://zh.wikipedia.org/wiki/TRS端子

上面的字母意思為：

• T : Tip 尖端
• R : Ring 環
• S : Sleeve 套

以立體聲的耳機端子 TRS 來說，照說那環指的是三節裡，中央那節；不過看現在賣場中的「環」指的好像是黑色那圈(英文好像有人用 stripe)，所以 TSR 端子有兩個黑色的環，商品名稱變成二環三節的端子了，中文跟英文似乎解釋不同。

現在手機的耳麥是使用四個接點(節)的 TRRS，麥克風的接點是在遠離尖端的最後一點，所以如果將它插在電腦立體聲的 TRS 插座上，照說麥克風那節是會露在外面的。而我從舊音效卡拆下來的 TRS 插座外緣是塑膠的，所以只再貼上銅片，線拉一下，就可以變成 TRRS 的耳麥插座。

TRS 插座貼銅片改成 TRRS 插座

...... 閱讀更多 ......

HTML5 : BINGO 語音輸入外掛

查了一下，可以自訂題庫的 HTML5 BINGO 遊戲上次更新是 2018年2月。最近在研究怎麼樣駭進自己的遊戲，幫它們加上外掛，而 HTML5 BINGO 是想玩一下，讓玩家透過麥克風，用說的方式(語音)來輸入答案。

現在語音辨識的技術已經不錯了，查了一下，Chrome 瀏覽器有內建 Web Speech API，利用這個 API，在瀏覽器取得麥克風的使用權限後，可以將收到的聲音進行語音辨識：

• https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API

於是我寫了一小段程式幫 HTML5 BINGO 做以下的事：

• 加一個 [MIC] 的按鈕，啟用或停止語音辨識。
• 以語音辨識的結果去比對 BINGO 格子中的選項，找到第一個符合的，就幫忙觸發按滑鼠的事件，模擬按下該格子的動作。
• 不過，如果語音辨識的結果是「芝麻開門」或是「芝麻關門」，外掛會去按在 HTML5 BINGO 畫面中右側的「問題」按鈕，可以進入或退出查詢提示的模式。

哈！是的，就只有這樣而已，剩下的都是 HTML5 BINGO 自己程序了。

HTML5  BINGO 外掛加了 MIC 控制鈕

如果有加入語音辨識外掛，在 HTML5 BINGO 的左下角會看到「藍色」的 [MIC] 按鈕，按下去以後，如果瀏覽器有支援語音辨識的 API ，就會出現要求使用麥克風權限的訊息。想要使用語音辨識的功能，當然是要選「允許」。

要求使用麥克風的權限

按了「允許」使用麥克風以後，[MIC] 的按鈕會變成「粉紅色」的。

已啟用語音辨識

識音辨識啟用以後，麥克風收到的聲音會被當語音辨識，所以建議是在選完遊戲的題目，開始計時後再按 [MIC] 啟用。

接著就像沒有外掛時玩 BINGO 遊戲，最大的差別只是除了用按選項答題以外，多了一個「說答案」的選擇。

成功辨識的 [腳踏實地] 

HTML5 BINGO 進行當中，如果題庫有提供「提示」，只要按下「問號」的圖示，即可進入「提示模示」，計時器會暫停，而按下選項的格子會出現該選項的提示，以成語的範例題庫來說，按下語詞的按鈕，會出現該詞的解釋。

喊「芝麻開門」進入提示模式

怎麼樣利用語音來按「問號鈕」進入「提示模式」呢？

想要暫停遊戲看「提示」，就大喊一聲「芝麻開門」，外掛就會幫你按「問號」的圖示。再喊一聲「芝麻關門」，它就可以幫你重新回到遊戲的答題模式。

底下錄了一小段如果用語音辨在 HTML5 BINGO 遊戲中答題的影片供參考：

相關文章

• 雄 : HTML5 : BINGO

...... 閱讀更多 ......

Google Meet : 雙主播的版面

 有人在使用 Google Meet 時有在一個畫面，同時看兩個遠端使用者鏡頭的需求，就如同雙主播的畫面一樣。目前 Googe Meet 沒有這種排法的版面設定。好吧～就利用程序來解決需求：

1. 開兩個瀏覽器視窗。
2. 調整兩個瀏覽器視窗至左右各一半並列。
3. 分別在兩個瀏覽器視窗中登入 Google Meet 同一間會議室。
4. 分別在Meet中按「圖釘」，將要顯示的使用者「固定在主畫面」。(由「聯絡人」來選定要固定的對象)
5. 分別在Meet中的「更多選項」裡的「變更版面配置」設置「聚光燈」。
6. 分別在Meet中，將「你」的鏡頭畫面，按雙向箭頭那個圖示「最小化」。
7. 選取「立即分享螢幕畫面」中的整個畫面。

關於開兩個視窗以並列方式呈現，我原本是安裝這個「Multi Layout Manager」 Chrome 的擴充功能：

• https://chrome.google.com/webstore/detail/multi-layout-manager/ijpiffheldgmdkbaohoilabdnmeinand

先手動將視窗排列好以後，再用上面的擴充功能儲存版面，它會將視窗的配置及網址一並儲存，下次可以完全重新呈現。

不過，後來又找到這個「Split Screen for Google Chrome」擴充功能，可以幫忙依需求設定好版面大小，似乎用起來比較方便：

• https://chrome.google.com/webstore/detail/split-screen-for-google-c/dnollkdkikklpdganoecjcmmlddbennb/?hl=zh-TW

是說，這種不算複雜的版面設定，Google Meet 中就應該可以內建的，只能期待它進化得快一點了。

Chrome : Prevate IP 麥克風解鎖

 在測試以 Web Speech API 來進行語音辨識，本機執行都沒問題，模擬網路存取，由家裡的 Private IP 192.168.2.0/24 連線，麥克風明明設為使用時詢問的，居然連問都沒問就直接被禁用，

麥克風被禁用

在 Chrome 的設定中查詢，麥克風的選項是灰的，連變更權限的機會都沒有。

麥克風選項被鎖定

查了一下，在 Chrome 中有個 flag 叫 Insecure origins treated as secure 可以自訂安全名單，在 Chrome 的網址列中先輸入這個：

chrome://flags/#unsafely-treat-insecure-origin-as-secure

然後在輸入區中輸 web server 的網址，並按一下 [Disabled] 的按鈕，讓它變成 [Enabled]

Chrome flags 設定

設定好了，就可以按右下角的 [Relaunch] 來重新啟動 Chrome。

麥克風啟用

重新啟動 Chrome 以後，設定的主機就可以更改麥克風權限了。

這種事沒用到還不知道會有狀況，又累積了一點經驗。

HTML5 : remoteClick 網路遙控器

在教室上課時，學生可以親手去操作電子教具或學具，遠距教學時，因為碰不到，互動的樂趣少了很多。以 HTML5 戳戳樂來說，雖然遠距時可以用「聲控」的，請螢幕那頭的老師依號碼，幫忙按，少了親手按並即時回饋，樂趣大減。為了解決類似這種的半調子戳戳樂，remoteClick 網路遙控器來了！

remoteClick 網路遙控器的主要原理是這樣的(以戳戳樂為例)：學生按下 remoteClick 遙控器上的號碼以後，程式會將號碼送至 WebSocket server，server 再將資料發向老師端的「接收程式」，「接收程式」再依設定去「按」戳戳樂上格子。

簡單說，關鍵在這個「接收程式」，它「駭」進了我自己設計的戳戳樂，透過網路收到號碼以後，幫忙觸發了戳戳樂格子上按下滑鼠的動作。這樣的設計，好處是不需要更動到原有的戳戳樂程式，而且除了戳戳樂以外，也可以應用在其它的工具中。有空，其它的工具也會陸續加上「網路遙控」的外掛。

底下先示範以戳戳樂加上 remoteClick 網路遙控外掛以後，如何讓學生可以透過網路遙控老師家裡的戳戳樂。

remoteClick 的傳送過程

...... 閱讀更多 ......

LimeJS : 編過碼的程式中找物件

 在研究如何在不動原有程式的原則上加「外掛」，不過，原有的程式碼因為想輕量化，利用 LimeJS 的工具，將原始的 JavaScript 程式都簡化了，簡化到函數名稱很難分辨出來。

觀察了一下，全域的變數都會保留原有名稱，正因為如此，總算留有一線曙光。以戳戳樂來說，我所有的格子通通放到 boxLayer 中了，除了第一個是整體的大黑框，boxLayer 的其它 children 都是格子。不過因為函數名稱都變了，無法用原來的 getChildAt() 來取得物件。

倒是 boxLayer 中只有一個變數是帶有 .length 的，這下好辦了，只要在 boxLayer 中找到符合以下條件的，應該就是我要找的東西：

• 是 object
• 有 length 

試著用以下的程序：

var n = Object.keys(boxLayer);

var box=null;

for(var i=0; i<n.length; i++) {

if(boxLayer[n[i]] && typeof(boxLayer[n[i]])=='object' && typeof(boxLayer[n[i]]['length'])=='number') {

var box = boxLayer[n[i]];

break;

}

}

運氣還不錯，一次中的。

找到戳戳樂的格子，這樣子要做什麼？

因為當初在新增戳戳樂的格子時，是按順序新增的，以第一格來說，它𡰗是 box[1] (box[0] 是外框，哈! 當初也不知道為什麼要這樣加個雜質進來)，我如果要直接用指令來「按」或者說是「戳」這格時，只要這樣的指令：

box[1].dispatchEvent('mousedown');

它觸發了第一格的 mousedown 事件，也就是模擬了以滑鼠按下去的動作了，這樣一來，可以透過網路來按戳戳樂了，應該很有趣。

JavaScript : 物件以值排序後取原來的索引值

 之前在計算戳戳樂最佳的行列數時，曾經有將值排序以後，要知道它原來的 key，查了一下，大家都建議利用 Object.entries() 來排序。

像我在設計 HTML5 對對碰時，為了讓洗牌的程序好寫一點，是先以亂數決定所有牌的序號，然後依序取用，轉換成座標；也就是在牌堆中，以左上角為第一個位置為例，第一張牌的位置並不是在左上角，對我來說，不用想什麼複雜的演算法取位置，但是缺點是，倒過來時，要由位置找出是在牌堆中的第幾張牌時變得複雜了。目前的做法只好順便記錄位置編號，再來排序。

HTML5 對對碰

cardsLayer['numbers'] 的值是每一張牌對應到的牌面編號(故意兩兩一組分開一點，比較好看)，例如：

[0, 5,    10, 4,    8, 11,    2, 7,    3, 6,    1, 9]

第一張牌在第 0 個位置，而和它配對的第二張牌在第 5 個位置，以此類推。

我需要按編號排序後，再取出它在牌堆中的索引值：

var index = Object['entries'](cardsLayer['numbers']).sort( function(a,b) {
  return (a[1]-b[1]);
});

這樣的結果會是：

0: ["0", 0]
1: ["10", 1]
2: ["6", 2]
3: ["8", 3]
4: ["3", 4]
5: ["1", 5]
6: ["9", 6]
7: ["7", 7]
8: ["4", 8]
9: ["11", 9]
10: ["2", 10]
11: ["5", 11]

來檢驗一下：

編號 0 的第一張牌(HORSE)在牌堆(cardsLayer)的索引值

0: ["0", 0]

應該是 index[0][0] ，也就是 0 ；而和它配對的是馬的圖片，使用者看到則是五個位置的牌

5: ["1", 5]

index[5][0] 是多少呢？答案是「1」，這也就是牌堆(cardsLayer)中索引值 1。

編號 1 的牌(DOG)，它的索引值

1: ["10", 1]

 index[1][0] 為 10 ，表示 DOG 在牌堆中的索引值是 10，和它配對的索引值是 11，找一下 index 中：

9: ["11", 9]

應該編號 9 的那張牌，是不是小狗的圖片呢？

HTML5 : 對對碰

我的 Flash 版對對碰 match 是 2009 年的作品，後續還有一個 2010年的 Flahs 版 match2；HTML5 版則是 2014年完成雛形，之後則沒什麼大變動。本次有了 HTML5 戳戳樂的基礎，將 HTML5 對對碰做了大幅的增強。它目前具有以下的功能：

• 工具箱有按鈕可更換蓋牌模式的切換。
• 工具箱有按鈕可控制左上角編號的顯示。
• 利用內建的題庫及設定編輯器，可立即修改遊戲內容，套用或匯出設定檔。
• 題庫支援文字或圖片。
• 題庫每題可以是兩欄式，提供一組兩項內容；或是單欄式，以一個內容來製作兩張一樣的牌。
• 格子自動計算最佳的大小及格數，題目不足時，以空格補缺。
• 利用選單設定檔可以製作多組題目的選單。
• 可以利用網址列的參數 menufilename 來指定要開啟的選單設定檔。
• 可以利用網址列的參數 filename 來指定要開啟的題庫設定檔。

HTML5 對對碰

可以在 HTML5 FUN 網站中試玩及下載打包好的檔案：

• https://gsyan888.github.io/html5_fun/

...... 閱讀更多 ......

HTML5 : Poke 戳戳樂 : 更換音效

HTML5 戳戳樂內建的音效是由南投縣的江明勳老師所錄製的，程式啟動以後，它會去讀取預設的設定檔 poke_set.js 中，有個名為 soundFilename 的參數內容，再和 mediaFolder 參數所指定的資料夾名稱，組合成音效檔的路徑。所以重點來了，照預設值：

• 將新的音效檔置入戳戳樂的 data 資料夾中。
• 修改設定檔中 soundFilename 參數的內容為新音效檔的檔名。
• 儲存設定檔。

經過以上程序，當戳戳樂重新整理或重新開啟時，應該就會套用新的音效了。

底下的影片說明如何以 sound_pop.mp3 來當音效：

相關文章

• 雄 : HTML5 : Poke 戳戳樂
• 雄 : HTML5 : Poke 戳戳樂 : 手動調整字體大小
• 雄 : Flash : Poke 戳戳樂