特教教材資料庫中的「創意ㄅㄆㄇ整合版」

昨天偶然看到一則貼文中，有人想以圖找學注音的軟體；對那個畫面有一點印象，曾經玩過，也下載過，趕緊到自己的下載區找找，證驗一下自己的記憶。年初在研究有關注音教學的相關工具時，特別建立了一個注音專用的資料夾，果然提升了搜尋的效率，一下子就找到該截圖是楊妮曼老師所分享的「拼音對對碰」。不過民國九十幾年時的 Flash 程式，在網路中找到的連結，應該大多失效了。用楊老師的另一個作品名稱「創意ㄅㄆㄇ」，可能會好找一些。後來才發現，其實楊老師的「創意ㄅㄆㄇ」+「拼音對對碰」，在教育部「優質特教發展網絡系統暨教學支援平台」的特教教材資料庫中有一個「創意ㄅㄆㄇ整合版」，網址如下：

• https://sencir.spc.ntnu.edu.tw/GoWeb/include/index.php?Page=6-5&news03=672

打開後會有說明及檔案下載的連結。檔案是 RAR 的壓縮檔，解壓縮以後，裡面的「bpm.exe」可以在 Windows 中打開來玩。

▋ 行動載具可玩的版本

哭哭～在 MacOS / Linux 還有模擬器可以執行 Windows 的 .exe，這樣子不就不能在行動載具上玩了？！

沒關係，試了一下，由 bpm.exe 中解離出 .swf 就可以利用 Ruffle 在網頁瀏覽器中載入，按底下的紅色按鈕，就可以立即啟動楊妮曼老師所分享的「創意ㄅㄆㄇ整合版」，電腦或是平板都能玩：

註：Ruffle 載入的和在本機直接玩相比，字型會有所不同，瀏覽器版中使用的是芫荽字型，注音符號的調號會稍小、位置稍偏移。

▋ 版權聲明

• 「創意ㄅㄆㄇ整合版」下載自教育部「優質特教發展網絡系統暨教學支援平台」，為楊妮曼老師的作品。

▋ 相關連結

• 雄:Flash : SWF 遊戲啟動器

閱讀全文

擷取 Google 雲端硬碟圖片縮圖網址

製作網頁遊戲時，可以使用放在 Google 雲端硬碟中的圖片嗎？一般來說，在瀏覽器中會因為 CORS 的跨域讀取限制，無法直接應用 Google 雲端硬碟的圖片在網頁遊戲裡，但如果是雲端硬碟圖片的縮圖，則不會受限制。所以如何取得圖片縮圖的網址就是關鍵。

▋ 擷取 Google 雲端硬碟圖片縮圖

這個小工具可以解析出已共用為「知道連結的任何人」 Google 雲端硬碟「資料夾」中，所有圖片的縮圖網址，大小為 640x480，雖然解析度不高，但應用於一般的遊戲中的插圖，算還不錯。

▋ 使用方法

程式會在已公開共用的雲端硬碟資料夾頁面中，找出所有圖片的清單，解析出檔名及其縮圖的網址，能輸出「主檔名」和「圖片網址」兩個欄位，欄位分隔符號使用跳格的符號，所以複製輸出結果後，可以直接貼到試算表中使用。操作程序如下：

• ✅ 在 Google 雲端硬碟建立資料夾。
• ✅ 設定共用為「知道連結的任何人」「檢視」。
• ✅ 將要使用的圖片上載到雲端硬碟資料夾中。
• ✅ 確認圖片的檔名(如果要輸出檔名為題目欄位)。
• ✅ 複製共用的連結。
• ✅ 在本文的工具中貼上連結，按 [開始解析] 鈕。

如果順利，最後可以按 [複製到剪貼簿] 鈕，將資料複製後應用。

▋ 開始使用

目標：解析雲端硬碟「資料夾」中圖片的縮圖網址

共用資料夾網址 (必須設為「知道連結的任何人」可以檢視)：

主檔名   圖片網址   MP3音檔網址   MP4影片網址

OK

 

複製到剪貼簿的資料可以直接貼到試算表中，會自動分欄、分行，貼在試算表的儲存格中。

這個解析出縮圖網址的工具已經內建在 HTML5 FUN 的烘焙機中，另外，也可以在 Google 試算表中的自訂公式來進行解析應用，可以參考三月的舊文「雄:以雲端硬碟資料夾的圖片製作注音高手」

▋ 相關連結

• 雄:以雲端硬碟資料夾的圖片製作注音高手
• 雄:Tools:解析出雲端硬碟資料夾中所有圖片或音檔的網址

閱讀全文

利用 iframe 解決因為 CORS 而抓不到YT字幕的問題

前兩天發現 HTML5 FUN Audio Player 怎麼樣都抓不到 YouTube 字幕；查了一下，看來多變的 YouTube 又出招了，讓原本由影片頁面原始碼中擷取到的字幕網址失效了，只能抓到空白的內容。研究了大半天，找到了另一個方法 (有興趣可以參考 jdepoix 的 youtube-transcript-api )，主要就是先由影片的頁面原始碼中找到「INNERTUBE_API_KEY」，然後再利用 YouTube 的 API ，以 POST 的方式取得影片資訊，如果成功，就能拿到影片字幕軌資料的網址。

以 JavaScript 使用新方法來擷取影片資訊的第一關會是在 POST 時的 CORS 問題，如果透過 CORS proxy 當然是可行的方法，一般來說，利用 Google Apps Script 也能寫出 CORS proxy，不過 YouTube 的 API 有在擋 bot，Google Apps Script 直接就被封殺了，網路上其它 CORS proxy 服務也沒好到哪裡去，多玩個幾次，就只能得到這樣的訊息了：

status: 'LOGIN_REQUIRED',
reason: 'Sign in to confirm you’re not a bot'

想要的資料當然就撈不到了。

後來發現，原來在瀏覽器中用 fetch ，不透過 CORS proxy 來 POST  ，就能使用 YouTube API 了，倒是有個小地方要注意，不然就會一直出現：

Access to fetch at 'https://.......' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

裡面最重要的關鍵字是「preflight」，當 Content-Type 是 application/json 時，瀏覽器在未傳送資料給遠端前，會先自我審查是否違反 CORS，難怪我一直看不到 YouTube API 的回應。要怎麼改呢？

只要在 fetch 參數中的 headers 指定 Content-Type 為 text/plain ，它就會使用 simple header ，然後可以避免 preflight，加入：

headers: {
  'Content-Type': 'text/plain', 
}

不透過 CORS proxy 來呼叫 YouTube API 的好處是，比較不會動不動就被 YouTube 判定為 bot 而抓不到資料，是不是很棒？！

不過，當我很開心地將改良過的程式應用到 Blogger 中的 Audio Player 時，居然還是出現違反 CORS 的訊息，為什麼？

底下兩張截圖來探討原因，關鍵已經用箭頭標示出來了：

[圖1] origin 為 blog 的網域

[圖2] origin 為 null

如 [圖1] 所示，當程式在 Blogger 中執行時，origin 被設定為 Blogger 所在的網域，瀏覽器送給 YouTube API ，因為兩者在不同的網域，這樣一來，就會因為 CORS 的問題，無法抓到資料了。同樣的程式碼，由本機載入並執行時，會像 [圖2] 一樣，origin 被設定為 null，YouTube API 接受了，會回傳資料 (這不知道是故意的，還是 API 的 bug，哈！但是我喜歡它現在的狀況)。

本來在研究 YouTube embed 時的 iframe 結構，看看能不能從中挖出字幕，一份資料中提到如果使用 base64 編碼後的 data URI 當 iframe 的 src ，會導致 origin 被設定為 null，就會讓它變成與頁面不同源，而無法存取頁面中的資料 (這一點其實是可以利用 postMessage 來交換資料) ......。

綜合前面看起來像問題的點，因為一個關鍵字「null」，讓我兜出了一個可行的方案。

如果產生一個只用來透過 YouTube API 抓影片資訊的 iframe，而且程式碼用 base64 編碼以後，設定為 iframe 的 src，利用 postMessage 傳影片的 id 與 api key 給 iframe, iframe 收到後，執行抓資料的程序，再使用 postMessage 回傳影片資料給 Audio Player。

哈！就這樣子，Audio Player 又能順利抓到 YouTube 的字幕了！

▋ 相關連結

• 雄:HTML5 FUN : PLAYER 增強聽讀能力的小工具

閱讀全文

HTML5 : 位值小教具

位值小教具將數字的每一位數拆解以後，放在類似長形便利貼的箭頭底框中，初始狀態會疊在一起，使用者可以拖曳分解，或是按底下工具列中的按鈕來展開／收合。如果不是拖曳而是按一下，數字會變成中文、中文會變成數字。工具的功能請參考 [圖1] 中的註解。

[圖1] 位值小教具樣式與工具說明

▋ 啟動小教具

想立即玩玩看，就按一下紅色按鈕啟動：

▋ Q & A

• Q : 可以指定預設出現指定的數字嗎？
• A : 位值小教具可以在網址後面以 n 的參數來指定要帶入什麼數字，例如想要帶入 5815 這個數字，就在網址後面加上 ?n=5815，像這樣子：
  https://gsyan888.blogspot.com/p/place-value.html?n=5815
  以這個格式的網址開啟後會出現指定的數字。
• Q : 如何讓學生掃瞄 QR Code 後，出現的是指定數字？
• A : 可以試試底下的小工具
  👉 按這裡輸入數字製作QR Code 及網址 👈

▋ 相關連結

• 雄: HTML5 : 大數的讀與寫小工具
• 雄 : HTML5 FUN 精選集

▋ 更新記錄

• 2025.08.15 v1.0 發布

已複製到剪貼簿！

製作 QR Code

輸入數字

掃描或按 QR Code

閱讀全文

HTML5 : 大數的讀與寫小工具

國小中年級數學會改到眼花的作業，認識大數的單元一定是前三名，盯著一排排的數字，看半天，真的會老眼昏花！今天在 HTML5 FUN 上架了一個大數讀寫的小工具，它有五種玩法，五個範圍，可以當教具，也可以讓學生拿來複習大數的讀與寫。這一則文就來簡單地介紹一下。想立即玩玩看，就按一下紅色按鈕啟動：

▋ 功能簡介

大數的讀與寫小工具分為五種模式：

1. 看數字猜中文：這個模式先顯示每一位的阿拉伯數字的卡片，中文卡片有三種狀態，按一下卡片就可以在後兩種間切換：
• 問號
• 中文數字
• 幾個單位
2. 看中文猜數字：這個模式先顯示中文數字，阿拉伯數字的卡片按了以後才會顯；中文卡片按了則可以顯示幾個單位。
3. 輸入中文：題目在阿拉伯數字卡片上，以手寫輸入在空白的中文卡片上，一張張寫出對應的中文字。如果按下方的筆形按鈕，則是以手寫或是鍵盤輸入數字完整的「讀法」才能過關。
4. 輸入數字：題目在中文數字卡片上，以手寫直接在空白的阿拉伯數字卡片上，一張張寫出對應的數字，如果按下方的筆形按鈕，則是以手寫或是鍵盤輸入完整的數字。
5. 輸入讀法：題目在阿拉伯數字上片上，以手寫的方式在方格中，一格一個字寫出完整的讀法。
   [小技巧] 方格只要由左往右，由上往下使用，可以分行寫，例如一億以上的大數，可以分為三行來寫，第一行寫到億，第二行寫到萬，剩下的寫到第三行，這樣更有結構，好看又好更改。

每一種模式都可以選擇數字的位數包括：

• 一百以內
• 一千以內
• 一萬以內
• 一億以內
• 一億以上

模式1、模式2 在位值表右上角有 [翻開全部] 的按鈕，可以一次將卡片翻面，按過以後會變成 [全部重罝] ，按下後恢復為蓋牌的狀態。

如果想出新的題目，可以按位值表右上角的 [下一題] 鈕，或是上方的功能鈕。

在畫面下方的 [讀作] 鈕除了可以看文字，也會以 TTS 合成語音的方式讀出數字。

▋ Q & A

• Q : 模式1和模式2中，卡片上方的鎖頭按鈕是做什麼的？
• A : 按下鎖頭按鈕，該位置的數字就會被鎖住，按 [下一題] 按鈕後，只會針對未上鎖的位置重出題目，方便教學應用。
• Q : 模式1和模式2中，卡片下方的加、減號是做什麼的？
• A : 加、減號按鈕可以用來調整該位置的數字，方便教學應用。

▋ 相關連結

• 雄 : HTML5 位值小教具
• 雄 : HTML5 FUN 精選集

▋ 更新記錄

• 2025.08.11 v1.1 模式3,4 的下方手寫區加上方格，改為寫一個字就辨識，以提高辨識率，並可以按一下格子右上角的垃圾桶圖示，或是在格子內長按約一秒，來清除該格子的字；模式1,2的第一格改為可以接受手動調為 0；模式4修改為出題後會出現阿拉伯數字，中文的部份只有問號，然後會自動以合成語音讀出數，並出現讀法，使用者要在格子內寫出數字；手寫的字因座標非整數而模糊，座標改以四捨五入取整數。
• 2025.08.07 修正 TailwindCSS 缺漏的色碼；手寫辨識如果是在卡片上或是方格中者，只取辨識完的第一個字，以免因為不小心誤畫的字被辨識到，造成使用者除錯時的困擾，所以如果在卡片中寫「五萬」只會取「五」，模式3,4下方的手寫區才會取多個字的辨識結果。
• 2025.08.06 發布。
• 2025.07.30 v1.0

閱讀全文

Doodle Petals : DD Petals 花瓣字

▋ 花瓣與手寫交織的遊戲

最近 HTML5 FUN 發展了一系列的 Doodle 小工具與遊戲，其實是由尚未公開的 DD Board 起的頭。DD Board 有一個花瓣字的元件，玩著玩著，就不小心和 Google 的手寫辨識擦出火花，讓 DD PETALS 變成單獨的遊戲先在這裡分享了。

▋ DD PETALS 的玩法

DD PETALS 畫面中會有一朵花，花的上方會有提示，而中央會有題目；目前的遊戲有三種模式，看國字造詞、看部件填部件，或是看數字填算式。

• 手寫填答：作答時，將答案寫在花瓣上，經過一會會兒，如果答對，會出現一顆星星。
• 大橡皮擦：想擦掉某一片花瓣上的字，就在該花瓣上長按一秒後放開。
• 造詞模式：例如題目「雄」，就在花瓣上寫「英」、「心」、「偉」......等，讓它成詞。咦～那可以寫「國」變成「國雄」嗎？ ^_^
• 部件模式：例如題目「口」，就在上方花瓣上寫「木」變「杏」，右側花瓣寫「丁」變「叮」......等。
• 數學模式：例如題目「6」，就在花瓣上寫「2x3」、「24÷4」、「5+1」、「8-2」......等，讓計算結果是題目的大小。

▋ 啟動遊戲

目前提供三個遊戲範例，請按底下的按鈕啟動。

▋ 自製遊戲

DD PETALS 的可以讀取 Google 試算表中的題庫，如果想自製遊戲，可以：

• 先開啟底下的 Google 試算表：
  【範例檔案】👉 按這裡開啟試算表檔案 👈(請自行建立副本)
  
  
• 建立副本。
• 設定試算表的「共用」為「知道連結的任何人」。
• 在自己的副本中，選取要製作的工作表(造詞或是數學)，並修改題目內容。
• 在瀏覽器的網址列複製工作表的網址。

✅ 將試算表網址轉為遊戲網址：

• 👉 按這裡進行試算表網址轉遊戲網址 👈

✅ 不想使用試算表，也可以即時輸入國字(不能指定花瓣數量)或數字來取得遊戲網址：

• 👉 按這裡立即輸入題目製作遊戲網址 👈

▋ FAQ

• 為什麼答案核對感覺有一點頓？
• A : DD Petals 為了避免字還沒寫完就進行辨識，等約一秒鐘，確定未寫字後，才會進行手寫辨識；如果是造詞的題目，還多了一個查詢線上字典的程序，因此可能會稍候一下下才能確認對錯。不過，寫完一個答案，可以繼續在別的花瓣上寫下一個答案，如果錯了，再回頭去清除並修改即可。
• 為什麼明明寫的答案對了，卻沒有出現星星？
• A : 因為字跡需要先手寫辨識才能檢核答案，如果確定答案沒錯，建議清除再重寫看看；字的順序也很重要，辨識時是從左到右、由上到下。此外，如果是造詞的題型，也有可能是線上字典未收錄該語詞，建議換個語詞試試看。
• 寫錯了，怎麼擦掉所寫的字？
• A : 想擦掉哪一個花瓣上的字跡，就對準該花瓣按著不住，約一秒鐘後再放開，應該就能清除該花瓣上的字跡了。
• 咦～好像可以兩個人一起寫字吔！
• A : 是的， Doodle Petals 支援多點觸控，所以如果電腦或載具有支援多點觸控，是可以多個人同時寫字的，兩個人一起在電子白板或是平板上拼速度，應該也滿有意思的。
• 造詞的答案是怎麼來的？
• A : 造詞的題型，會先比對試算表中的參考答案欄位，如果沒有找到，會再跟「萌典」查詢，所以如果兩處都沒有收錄者，就會判定為回答錯誤。
• 可以自訂答案嗎？
• A: 在題庫的試算表中，D 欄起可以自行輸入要優先查核的自訂答案，數量不居。
• 國語的題目有支援看題目的部件，寫出部件組成字的模式嗎？
• A : 目前受限於 Google 的手寫辨識不是每個部件都可以辨識得出來，所以目前不支援部件組字的題目。未來有計畫加入已有的獨體部件字來當題目。(2025.07.29起支援部件模式[兩個部件組字])。
• 數學的題目有支援分數的題型嗎？
• A : 因為手寫辨識似乎沒有支援分數的辨識，目前只能使用整數或是小數，但是答案可以接受未使用括號的四則混合計算。
• 匯出圖片的功能可以匯出所有題目的嗎？
• A : 目前只能匯出畫面上的那一題為 PNG 圖片，匯出所有做過的題目為圖片的功能，未來應該會加入。
• 回答不出來時，可以跳題嗎？
• A : 只有使用網址 words 參數和 parts 參數命題的造詞、部件題型才有提供未填完花瓣，按「下一題」跳關的功能，使用試算表及數學題型請自行篩選會卡關的題目。
• Doodle Petals 是用什麼開發的？
• A : Doodle Petals 除了我自己一個個字敲出的程式碼，另外使用一些外部的函式庫或 API :
• Goole 手寫辨識服務, 可參考 Chen-Yu Ho 的「handwriting.js」。
• 「萌典」查字典的 API, 可參考 g0v 的「moedict-webkit」。
• 彩帶飛舞的特效, 可參考「Canvas Confetti」。
• 數學算式字串進行計算, 可參考 Tommy Pang 的這一則文。

▋ 相關連結

• 雄 : HTML5 FUN 精選集

▋ 更新記錄

• 2025.07.30 v.1.3 部件模式支援八片花瓣，如果是用參數 parts 的的方命題，會自動計算要使用八片花瓣或是四片花瓣，沒有答案的花瓣會自動上鎖。
• 2025.07.29 v1.2 利用全字庫 CNS IDS 來查表，新增部件模式，除了使用試算表，也可以在網址中使用參數 parts 來指定部件的題庫。
• 2025.07.27 v1.1 造詞的題型會自動擷取中研院大腦與語言實驗室分享的「生字表字詞資料庫」當候選的答案，提高使用者的答對率；可透過網址中的參數 words 來指定造詞的題庫(類似筆順練習)，參數 numbers 則可以指定數學的題庫；透過 words 來命題時，「下一題」的按鈕只要通過一個答案，就開放跳到下一題，以免卡關，但是用試算表命題者，不能跳題，請自行過濾答案太少的字。
• 2025.07.20 v1.0

已複製到剪貼簿！

取得遊戲網址

請在下方貼上 DD PETALS Google 試算表的網址(記得先設定共用)。

請在下方輸入題庫 (國字一行多字, 數學一題一行)

選擇遊戲模式： 造詞 部件 數學

掃描 QRcode

閱讀全文

拼湊了「粄」的筆順

上週程式玩到煩了，決定來做一下苦活兒，調劑一下。大概是距離新學期開學還有一段時日，之前能抓到國小課本生字清單的來源，都還沒有更新，只好到三大出版社的線上資源去找了。

翰版已在線上的大補帖光碟中提供各冊生字清單在一個檔案中，而且格式跟我需要的一模一樣，算是最佛心的了。康版雖有大補帖為名的生字清單，只有一年級的，其它年級的，得由格式很不同的 MS Word 檔中去挖(不懂，為什麼要用直式表格)；研究出康版的格式有兩種規則，最後寫了個可以全選、複製、貼上的轉換小工具，哈！下回就可以直接用了！南版的則只能由一冊冊生字清單的 PDF 中挖掘，它國字的部份是圖片，只能複製到注音的「國字」，哇！很不好玩，很多都是利用同音的國字來標注音的，所以複製到的國字，當然就降低可用度，還要手動輸入，並核對、校正的地方很多，不過幸好有早發現字根本錯字一堆，不然上線就丟臉丟大了；一陣敲敲打打，也是修正完畢。花了大半天，把 114學年度上學期的生字筆順都建置完畢。（註：苦活兒做完沒幾天，三個版本的線上資源也都完整上線了，哈！白忙一場？還是有不少收獲的）

有善心人士看到上週新上線的生字清單中有誤，我查了一下線上電子教科書，確認生字清單有誤，改清單不太花時間，倒是有一個我十幾年前教中年級就遇到過的「缺字」比較麻煩。是的，教育部的筆順網並不是每個國字都有建置筆順資料，哪些字有筆順資料，可以到教育部筆順網的 FAQ 頁面中查到：

• 常見問題集 - 教育部《國字標準字體筆順學習網》2025

引自常見問題集「有關內容 Ｑ1」，目前 (2025.07.16) 是：

共收錄個6,063國字筆順動畫，另附有37個注音符號的筆順動畫。

翰版中有個生字「粄」，並不在這 6063 個國字內，教育部筆順網查詢結果的網址:

• https://stroke-order.learningweb.moe.edu.tw/searchW.jsp?ID2=1&WORD=%E7%B2%84

我以前教中年級國語也遇過這個字，正因為這樣，在 HTML5 FUN 中才會有一個「筆順編輯器」，可以讀取現有的國字筆順，自己來重組缺的字。以前因為筆順的資料都是直接讀取教育部筆順網的資料，但是自從筆順網 2025年1月改版以後，已經無法簡單地直接讀取筆順資料，所以改用他法自立救濟了。也正因為如此，我順手東拼西湊，將「粄」加入非官方的資料庫，讓它可以在 HTML5 FUN 的筆順練習中出現了。

• HTML5 FUN 筆順練習：粄粉版精板

[圖1] 粄的筆順組合

參考一下 [圖1] ，應該看得出來「粄」這個字是如何開始暫時被支援的吧！它已經可以在 HTML5 FUN 的筆順練習中使用，但是只支援筆順練習，語音的部分只能等教育部什麼時間建置好了。

不過，年初時有發現許久沒用的 HTML5 FUN 筆順編輯器有臭蟲，無法由網路下載字的筆順資料而卡住，只是一來，用得人很多，二來，想用新一點的技術來改寫，也就放著沒動它了。如果想用，小技巧就是，先使用筆順練習將要拿來拼湊新字的國字先下載過筆順資料，再開啟筆順編輯器，臭蟲就不會跑出來搗蛋。

▋　相關連結

• 雄 : HTML5 : 筆順編輯工具
• 雄 : HTML5 FUN 精選集

閱讀全文

Doodle Car : DD Car : 嘟嘟車

 Doodle Car (簡稱 DD Car 或嘟嘟車) 是 HTML5 FUN 2025年7月新增的遊戲，不但可以挑戰題庫範例，還有遊戲地圖編輯器，可以設計遊戲給別人玩。由於過關的方法不見得只有一種，如果能夠再加上討論，交流心得，應該會更有趣。

Doodle Car 嘟嘟車

DD Car嘟嘟車地圖編輯器

玩法很簡單，每一關都會有一部嘟嘟車和終點，只要在畫面中手繪線條(馬路)，並按「開始」或是「增加」鈕，讓嘟嘟車能碰到終點，就算過關。按啟動鈕來動動腦，挑戰一下吧！

▋ 小秘訣

• 嘟嘟車有重量，下方沒有東西支撐時，是會往下墜落的。
• 目前車子沒有是沒有動力的，必須靠斜坡，或是碰撞才能動；而畫面中的磚牆是障礙物，球會滾動，箭頭則可以讓嘟嘟車加速或是跳躍。

▋ Q&A

• Q: 可以自己設計遊戲關卡嗎？
• A: DD Car 有遊戲地圖編輯器，可以使用拖曳圖示的方法來設計自己的遊戲，還能直接分享遊戲連結。
• Q: 遊戲關卡設定可以儲存嗎？
• A: DD Car 可以由遊戲網址中讀取遊戲，也可以由 Google 試算表中讀取遊戲資料，所以保留遊戲地圖編輯器製作的網址、資料，或是將關卡資料儲存在 Google 試算表均可。
• Q: 如何在 Google 試算表中儲存遊戲設定？
• A: 先開啟底下的 Google 試算表，並建立自己的副本，然後利用 DD Car 的地圖編輯器設計好各關的地圖，按 [複製] 鈕後，再貼到自己的試算表。
• 【範例檔案】👉 按這裡開啟試算表檔案 👈(請自行建立副本)
• Q: 如何將 Google 試算表的網址變成嘟嘟車的遊戲網址？
• A: 先將 Google 試算表「共用」給「知道連結的任何人」，然後複製試算表的網址(不見得要使用第一個工作表，想用哪一個，就切到那個工作表，再複製網址；所以一個試算表文件中可以使用多個工作表來儲存，變成不同的遊戲)。
• 👉 按這裡進行試算表網址轉遊戲網址 👈
• Q: 最多可以設計幾關？
• A: 程式並沒有限制，端看用什麼方式存取資料；如果關數很多，會比較建議使用 Google 試算表來儲存資料。
• Q: 遊戲地圖編輯器打開的遊戲網址，為什麼無法製作 QR code？
• A: 如果設計的遊戲地圖有很多關，而且關卡都很複雜，會讓編輯器製作的網址變很長，而一般的 QR code 產生器可能會有網址長度的限制，就會無法生成 QR code。怎麼辦呢？建議在遊戲編輯器的工具區中，找到「複製」鈕，將設定資料複製到剪貼簿後，再貼到 Google 試算表中；以試算表來當遊戲的資料庫。
• Q: DD Car 是用什麼開發的？
• A: DD Car 主要是使用 Phaser 的遊戲框架，再加上 Planck.js 的物理模擬。遊戲地圖編輯器則未使用任何框架。

▋　相關連結

• 雄 : HTML5 FUN 精選集

▋　更新記錄

• 2025.07.01 Map Editor v1.0
• 2025.06.25 Doodle Car v1.0

已複製到剪貼簿！

取得遊戲網址

請在下方貼上 dd car Google 試算表的網址(記得先設定共用)。

掃描 QRcode

閱讀全文

HTML5:壓力感應塗鴉小工具

前一陣子原本是在研究多點觸控與實體卡片的應用，變成玩自行車內胎、吸管、鋁箔(銅箔)製作感壓筆，目標是希望能模擬出寫毛筆的手感。為了測試自製感壓筆的效果，就設計了一個可以隨著偵測到的「觸控半徑」大小，而自動改變畫筆粗細的塗鴉程式；最後發展成可以隨著運筆速度而改變畫筆粗細的「壓力感應塗鴉」。它可以使用觸控點大小，移動速度，自動調整畫筆粗細的繪圖小工具，即使沒有感壓功能的筆(哭～我舊舊的 iPad Air2 和 iPad 4 本就不支援新的感壓筆)，或是利用滑鼠，也能畫出粗細不同的線條。

壓力感應塗鴉 2025.06.21 截圖

一進畫面，記得在「壓力測試模式」先用不同的壓力或速度，讓程式蒐集畫筆的資訊；套用測試結果後，在畫面上方中央，有繪圖設定控制區可使用，改變一下「壓力係數」，會有不同的效果哦！建議以有觸控螢幕的裝置來玩，體驗會更好。

▋ Q&A

• Q: 使用「半徑」模式時，線條粗細的變化似乎沒有「速度」模式時好。
• A: 主要是能偵測到的觸控半徑，變化實在有限，甚至在 iOS 中，只有按下去那瞬間才能抓到半徑，移動時都是回報同一個數值，所以只能應用在 Android 系統中。另外，有沒有用「漸變半徑」的選項也有差別。
• Q: 在「速度」模式時，怎樣改變線條的粗細？
• A: 按下以後，移動速度慢，線條就會粗；反之，瞬間移動，畫出的線就會變很細。

▋ 相關連結

• 雄 : HTML5 FUN 精選集

 

閱讀全文

SVG ID 衝突導致顯示異常

一般來說， 在頁面中，ID 應該是唯一的才對，但是實務上，不見得會有影響；不過，最近在測試開發中的新版筆順練習程式時，終於踢到鐵板了！

筆順示範的動畫是先建立一個筆畫的「遮罩」，然後在遮罩下，不斷的用不同座標畫大大小小的圓，畫面上只會看到該筆畫慢慢地被「塗上」顏色，彷彿用筆在寫的樣子。所以「遮罩」是很重要的關鍵。在 SVG 中設定要使用哪一個遮罩是用類似這樣的語法：

mask="url(#demo-mask)"

也就是設定名稱為「mask」的屬性，而用「url(# ... )」來指定用 ID 為 ... 的 mask ；以前面的例子來說，它指定使用 ID 為「demo-mask」的遮罩。

整個網頁中只有一個 ID 是「demo-mask」的話，當然不會有任何問題；如果有多個 ID 都叫作「demo-mask」，「url(#demo-mask)」只會取用第一個；應用在第一個 SVG 也不會有問題，其它的 SVG 就無法正常顯示了。之所以會踢到鐵板，完全是因為自己愛亂玩，一次在頁面中放了好幾個國字的 SVG ，而它們的遮罩的 ID 通通叫作「demo-mask」，玩到第二個字以後，只有第一個置入頁面的會正常顯示；這部份倒是和設定 style 不同，style 是後載入的會覆蓋先載入者。

▋ 動態產生 uuid 

怎樣動態產生唯一的 ID 呢？

之前曾看過別人使用這樣的語法：

uuid = function b(a){return a?(a^Math.random()*16>>a/4).toString(16):([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,b)}

只要呼叫 uuid() 就能得到一個不會重覆的 uuid。

另外一個語法是：

window.URL.createObjectURL(new Blob([])).slice(-36)

哈！我是喜歡簡潔一點的後者。如果想讓 id 短一點，就將 36 改小一點。

▋ 測試

以下的字，照設計的流程是：

1. 多色的靜態筆畫。
2. 按完播放鈕，筆畫變紅色。
3. 黑色的書寫動畫。
4. 黑色靜態筆畫，至全字動畫播畢。
5. 多色的靜態筆畫。

可以觀察一下，當 mask 使用相同 ID，與使用不同 ID 有何差異，按底下的按鈕，開始測試：

[圖1] 是右邊的「試」 在 [測試1 (相同ID)] 中，第四筆畫時的截圖，本來應該是寫橫畫的，卻冒出了豎畫。我故意將「測」的輪廓疊上去，比較容易看出豎畫哪裡冒出來的；。那其實就是第一個字「測」的第四筆畫，「貝」的起筆豎畫製作的遮罩，「試」此時寫的是橫畫，所以只能看到短短的豎畫，這是因為遮罩 ID 衝突，所造成的誤用。而在 [測試2 (ID不同)] 中，兩個字都能正常的顯示遮罩內容。

[圖1] 右邊的字誤用了左邊的遮罩而不正常

所以在 SVG 中有使用到「url(# ... )」來指定對象者，ID 在命名時，務必要特別注意，不然就會像我，程式改來又改去，對的程序都會改成錯的了。

閱讀全文

HTML5 數學小白板分數元件

前幾天有老師問到 HTML5 FUN 數學小白板的分數元件能不能換顏色？原本分數條可以自訂顏色，而圖形式分數元件則沒有自訂顏色的功能。上一次修改程式已經是一年前的事了，查了一下程式，其實自訂顏色的參數是有預留的，只是顏色的設定，沒有加在功能選單上而已，這樣該稱讚自己有先見之明嗎？ XDDD

昨天在圖形式分數元件的設定選單中，新增了五個顏色的項目，只要按一下想使用的顏色按鈕，就能套用到這個元件上；順便調整了選單的順序，讓它和分數條的差不多。

[圖1] 數學小白板的分數元件

哈！看一下 [圖1] ，目前圖形式分數元件的設定選單多達 15 個按鈕，有夠壯觀的。

順便錄了有關分數元件的操作示範影片。

▋ 操作示範影片

• 🎬 https://www.youtube.com/watch?v=DxSpXxWpdCg

▋ 相關連結

• 雄 : HTML5 FUN : 數學小白板

• 雄 : HTML5 FUN 精選集

閱讀全文

SVG 轉 ODP 簡報小工具

HTML5 FUN 的筆順練習工具，除了提供 PNG 格式的部件圖片下載（一個部件一個檔案）；也有提供 SVG 格式的圖形檔（一個檔案中，放多個可以單獨操作的部件）。不過，不是每個工具或平台都能直接匯入 SVG 圖形檔，或是匯入了 SVG 圖形，卻被轉為非向量圖片，無法輕鬆地將筆順部件拆解。試了一下大家常用的工具：

• InkScape : 本身就是向量圖的編輯器，還能儲存或是匯出為各種格式，SVG 支援度最高，但可能需要花一點時間學習怎麼使用。
• Google 文件：不支援匯入 SVG 檔案，貼上的 SVG 圖形會轉為點陣圖，無法直接拆解部件。
• MS Office 線上版 : 可以貼上或是匯入 SVG 圖形，但是會轉為點陣圖，無法直接分解部件。
• Canva 網站：可以貼上或是匯入 SVG 圖形，但是會轉為點陣圖，無法直接分解部件。
• LibreOffice : SVG 支援度極高，貼上或是匯入的 SVG 圖片，而且還能拆解圖中的各部件。

▋ 好轉通吃的 ODP 簡報

LibreOffice 很好用，跟 MS Office 也很像，不但免費，能匯貼或是貼上 SVG 圖形，而且它儲存的簡報檔案 (.odp) 可以使用 Google 簡報、MS 簡報、Canva ...... 等來開啟，將 LibreOffice 簡報檔 (.odp) 上載到各平台的雲端硬碟中，開啟時，除了能轉成各平台的簡報格式外， .odp 簡報中的 SVG 圖形如果有「斷開」、解除群組，也能在各平台中保有圖形部件，直接獨立操作的特性。

什麼！還要再學怎麼使用 LibreOffice 哦！應該又一堆人卻步了！

[圖1] svg2odp 可以將筆順 SVG 轉為 ODP 簡報

最近花了一點時間研究怎麼將筆順練習匯出的 SVG 部件檔案，甚至其它 SVG 圖形檔，置入 LibreOffice 簡報(Impress) 的 .odp 的格式，並寫成一個小工具 (svg2odp)。透過簡單的步聚，即可輕鬆下載 .odp 的簡報檔案，然後可以將簡報檔案上載到 Google 雲端硬碟、微軟雲端硬碟，或是 Canva 中。

[圖2] 將 ODP 簡報上載到 Canva 可自行重組

▋ 使用方法

以 HTML5 FUN 筆順練習來說：

• ✅ 在筆順練習的「部件拆解」功能中，按一下左下角綠色的下載圖示  📥 (如圖3)。
• ✅ 按下「下載部件 SVG」或「下載筆畫 SVG」，即可儲存為 SVG 圖檔 (如圖3)。
• ✅ 利用「SVG 轉 ODP 簡報小工具」將 SVG 轉為 ODP 簡報檔。
• ✅ 將 ODP 簡報檔上傳到雲端硬碟或網站，並開啟檔案，即可得到國字部件， (如圖4)。

[圖3] 在筆順練習中下載 SVG 圖檔

[圖4] 將轉好的 ODP 簡報檔案上傳到 Canva

▋ SVG 轉 ODP 簡報小工具

拖曳 SVG 筆順部件檔案到這裡(支援多檔案)
或是按這裡來選取檔案

解除所有群組

▋ 操作示範影片

• 🎬 https://www.youtube.com/watch?v=9GrU_vWl4nM

▋Q & A

• Q: 勾選「解除所有群組」有什麼效果？
• A: SVG 轉 ODP 簡報小工具除了筆順練習的 SVG 檔，預設會保留各物件的群組設定，勾選「解除所有群組」後，所有的群組都會被解除；以筆順練習的 SVG 檔來說，通通會變成以筆畫為最小單位。群組都被解除的好處是可以自己再重組。
• Q: 一個簡報檔案中可以放幾個 SVG 圖形？
• A: 當有多個 SVG 圖形時，程式會計算適合的大小，所以數量就看個人需求。
• Q: 拖曳到轉換工具的圖形，怎樣刪除不用？
• A: 在每一張預覽圖片的右下角有一個叉叉，按一下即可移除。
• Q: 在轉換工具區塊右下角的綠色圓圈是做什麼的？
• A: 綠色圓圈可以貼上 SVG 圖形的語法，或是放在網路上的 SVG 圖形網址，程式會載入 SVG 圖片供轉換。
• 可以試試這幾個有提供 SVG 圖片網址或語法的圖庫網站：
• https://flowbite.com/
  選單找 Icons 或是 Illustration ，按一下圖片即可複製 SVG 語法。
• https://www.svgrepo.com/ 
  找到圖片 >> 按圖示 >> 按「Download SVG  Vector」。
• https://openclipart.org/
  找到圖片 >> 按圖片 >> 複製瀏覽器網址列中的圖片網址。
• Q: 在預覽圖片的左下角有一個鎖頭是什麼用的？
• A: 初版的工具無法處理較複雜的 SVG 圖形，就只能以不轉換繪圖指令的方式，將 SVG 圖片篏入 ODP 簡報檔中，因此以鎖頭的圖示來區別；現在的版本已經用 flatten.js 預先處理過了，所以大部份的圖片應該都不會再「加鎖」。
• Q: 那個燈泡的圖示是做什麼用的呢？
• A: 哈！務必試試看，多按幾次就知道囉！

▋ 參考資料

SVG 轉 ODP 簡報小工具中使用到的一些專案及相關的資料列在下面做個記錄，也感謝大家的分享，解決了我不少問題：

• OpenDocument
  https://www.datypic.com/sc/odf/
• svg2android
  https://github.com/inloop/svg2android
• JSZip
  https://stuk.github.io/jszip/
• Get absolute coordinates of element inside SVG using JS @ StakOverflow
• Coordinate Systems, Transformations and Units
  https://www.w3.org/TR/SVG11/coords.html
• Transformation Matrix – SVG Code Examples
  https://docs.aspose.com/svg/net/drawing-basics/transformation-matrix/
• SVG-to-PDFKit
  https://github.com/alafr/SVG-to-PDFKit

▋相關連結

• 雄 : HTML5 : 筆順練習第三版(2019版)

• 雄 : HTML5 FUN 精選集

 

閱讀全文

OpenSCAD: 遮柵式魔幻卡

底下的照片是 2024年3月時，用 OpenSCAD 製作模型後，再以 3D printer 印出的遮柵式魔幻卡，一個由柵欄構成的模型，柵欄中埋有兩個圖或文，某個視角可以看到第一個圖形，用另一個視角，則可以看到第二個圖形。

底下矩形的遮柵式魔幻卡可以看到英文大寫字母 B (圖1) ，與熊的圖案 (圖2) 變換：

[圖1] 英文大寫字母 B

[圖2] 熊的圖案

底下圓形的遮柵式魔幻卡可以看到中文的春 (圖3) , 與福 (圖4) 兩個字的變換：

[圖3] 春

[圖4] 福

如果仔細看，可以看到印得並不好，導致圖案並不清晰，主要是因為 PLA 的塑料沒做好防潮，水份吸太多，一整個出料不順。我剛開始還以為是模型沒設計好，怎麼印都看不出「魔幻」的效果，一整大失敗，後來才發現，根本只是因為塑料的問題。接著又因為2024年4月的花蓮大地震，把我好不容易才修好的 3D printer 龍門砸壞，不能繼續列印實體，程式就這麼擱了一年多，前幾天將 OpenSCAD 寫的程式整理好，可以給有興趣人玩玩看。

▋ 遮柵式魔幻卡產生器

這個遮柵式魔幻卡產生器是應用在 OpenSCAD 的程序，為了可以直接在網頁瀏覽器中使用，不用安裝任何東西，還能順便將圖片進行一些處理，我將它放在 Google Colab 中，直接在 Google Colab 中製作模型，省去了處理 OpenSCAD 及字型安裝的問題，但是也可以將 OpenSCAD 的產生器下載到電腦，然後離線使用。產生器的網址如下：

• 🚀 https://tinyurl.com/gsyan-grating-card

▋ 使用方法

魔幻卡的內容可以圖片或是文字。使用圖片就必須先將圖片上載到 Google Colab 的暫存空間，或是直接輸入圖片的網址，讓程式自動擷取。如果是在本機中的 OpenSCAD 中製作模型，圖片必須儲存為 PNG 的格式才能匯入；在 Google Colab 中製作的話，則會自動處理好格式的問題。

✅ 如果想製作文字式的內容：

• 在「內容1」的「content1」欄位，或「內容2」的「content2」欄位，輸入文字，例如：「春」、「福」。
• 設定「font_size1」或「font_size2」來調整字型大小。
• 選取「font_url_1」或「font_url_2」來更換字型。也可以自行上載字型檔，並輸入字型檔的路徑，或是使用網路中公開的字型檔網址。

✅ 如果想製作圖形的魔幻卡：

• 在「內容1」的「content1」欄位，或「內容2」的「content2」欄位，輸入圖片的路徑。圖片可以自行上載到 Colab 中，或是使用網路公開圖片的網址。
• 設定圖片的相關參數「auto_resize_1」、「auto_resize_2」、「image_invert1」、「image_invert2」......及「圖片預處理參數」中的選項。

設定好其它參數以後，只要按下設定區塊左側的執行鈕，即可開始進行安裝及製作模型。

▋ 操作示範影片

• 🎬 https://www.youtube.com/watch?v=SdAJobZxk9E

▋ QA

• Q: 同樣的照片，為什麼在 Google Colab 中製作的模型效果較好？
• A: 遮柵式魔幻卡中如果使用圖片，轉為純黑白(非灰階)，效果會比較好。在 Google Colab 中的程序中，會預先將圖片轉換，才給 OpenSCAD 使用，所以效果會較好。
• Q: 在本機的 OpenSCAD 中，為什麼指定了 JPG 的圖片檔了，卻失敗？
• A: OpenSCAD 的圖片必須使用 PNG 格式，才能匯入。
• Q: 使用圖片的內容，如果加快製作的時間？
• A: 可以將圖片的尺寸調小看看。
• Q: 製作好的模型為什麼字會被切掉？
• A: 請自行調整字型大小，將數字調小後再試試。

▋ 相關連結

• 雄:3DP : Lenticular Card 雙變卡產生器

閱讀全文