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 雙變卡產生器

閱讀全文

GitHub 檔案取得沒有 CORS 限制的網址

前一陣子赫然發現 GitHub Pages 中的檔案似乎都沒有 CORS 的問題，可以在瀏覽器中，以 fetch 隨意抓取各種檔案；不過，如果是 GitHub 專案儲存庫檔案，直接複製瀏覽時的檔案網址，就行不通了！

例如在 2020年分享過的「雄:3DP : Lenticular Card 雙變卡產生器」LenticularCard 專案中的範例模型檔的網址是：

• https://github.com/gsyan888/LenticularCard/blob/master/demo/lenticular-card-dog-cat-5x50-0_8.stl

如果要利用 Three.js 直接載入這個網址的 STL 模型，肯定會出現類似這樣的錯誤訊息：

Access to fetch at 'https://github.com/......' from origin 'null' has been blocked by CORS policy: 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.

▋ 解決 CORS 的問題

GitHub 專案儲存庫檔案的網址會有 CORS 問題，怎麼辦呢？

將網址處理一下：

• 最前的「https://github.com」置換為「https://raw.githubusercontent.com」。
• 中間的 「blob/master」  置換為 「master」。

利用 Regular Expression 就可以輕鬆搞定：

replace('github.com', 'raw.githubusercontent.com').replace(/(blob)\/(master|main)/, '$2')

所以前面的模型檔的網址改用：

• https://raw.githubusercontent.com/gsyan888/LenticularCard/master/demo/lenticular-card-dog-cat-5x50-0_8.stl

這樣子就可以在網頁瀏覽器中順利地利用 JavaScript 載入模型檔案了。來測試一下:

STL模型網址：

▋ 轉換小工具

不免俗的，利用 JavaScript 寫個轉換式：

GitHub 檔案的網址：

無 CORS 問題的網址

?  

▋ API

看到有人利用呼叫 API 的方法取得檔案的相關資訊及內容，也滿有意思的，先記錄下來。

假設 GitHub 檔案的網址是 url，轉換為 API 的網址：

apiUrl = url.replace('github.com/','api.github.com/repos/').replace(/(blob)\/(master|main)/, 'contents');

這個網址可以取得 JSON 格式的檔案資訊，再利用其中的「git_url」，可以取得檔案的詳細內容(JSON 格式)，最後的「content」，以前面的 STL 模型檔來說，應該是用 base64 編碼過的資料，宣告一下編碼格式，在前面加上「data:application/sla;base64,」，就能直接給瀏覽器使用了。

也就是利用 API ，呼叫兩次也能取得檔案的資料。

▋ 相關連結

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

閱讀全文

Blogger : 解除預覽封印

向來喜歡 Blogger 的簡單界面，又能直接寫語法，不知道哪一天它如果被 Google 收掉，會不會很不習慣其它平台的。不過，在寫程式時，Blogger 的預覽讓我有一點點困擾，它預覽時，只能看，不能「玩」，很明顯地，在我們的文件上方，有被動手腳，讓滑鼠或是觸控的事件被搶先一步，攔截走了。

昨天在發布 HTML5 FUN 最新遊戲做成的「唐詩迷宮」時，不能在預覽時，直接測試，實在覺得不快，於是追縱測試了一下，找到解除 Blogger 預覽封印的方法了！

關鍵在 class name 為「blogger-clickTrap」的元件上，只要讓它消失了，封印就自然解開，讓我的程式可以跟發布後的頁面一樣，可以自由測試。使用的 JavaScript 語法如下：

//解除預覽封印
if(/預覽/.test(document.title)) {
  setTimeout(function() {
    var clickTrap = document.querySelector('.blogger-clickTrap');
    if(clickTrap) {
      clickTrap.style.display='none';
     console.log('\n\nrelease preview click trap ...\n\n');
    }
  }, 1000);
}

哈！能自由呼吸、能跑、能跳 ...... 真是一件愉快的事。咦！這樣子，以後一些私房的小工具，不發布也能使用了。

閱讀全文

HTML5 : MAZE : 唐詩迷宮

「唐詩迷宮」是使用 HTML5 FUN 2025 年新增的「文字迷宮」製作的遊戲，可以套用不同的題庫。

請先選擇要挑戰的題庫，並設定難易度。再按紅色按鈕啟動遊戲。

遊戲設定

題庫：

五言絕句 七言絕句

五言律詩 七言律詩

ㄅㄆㄇㄈ

難易度: 普通模式

 

▋ Q & A

• Q : 如何自製文字迷宮的遊戲？
• A : 利用 HTML5 FUN 的遊戲啟動器 + Google 試算表即可自製文字迷宮的遊戲。製作的說明及示範影片，可以參考這則文
  🚀 雄 : 填試算表製作 HTML5 FUN 遊戲
  
  
• Q : 文字迷宮自製遊戲時，使用哪一個 Google 試算表範本？
• A : Google 試算表【範例檔案】
  👉 按這裡開啟試算表檔案 👈(請自行建立副本)
  使用的是【文字迷宮】的工作表。
  
  
• Q : 如何像唐詩迷宮一樣，可以國字加上注音？
• A : 建議可以使用「雄 : HTML5:語文高手題庫&國字加注音語法產生器」
  
  
• Q : 只能出中文的題目嗎？
• A : 題目未限定語言，所以也能出其它語言的文字迷宮。題目的字串以空格來分隔，程式會用空格來切為每一格要填入的文字。
  
  
• Q : 可以加圖片嗎？
• A : 目前支援加一張圖片在畫面的右下角，可以在題庫的第四欄位指定圖片的網址。
  
  
• Q : 可以自訂語音嗎？
• A : 如果不想使用 TTS 播放題目文字的合成語音，可以在題庫的第五欄位中，填入語音的網址，例如可以使用 Vocaroo (https://vocaroo.com/)來自行錄音，文字迷宮的程式有支援 Vocaroo 錄音後，分享的音檔網址。
  
  
• Q : 難易度的普通模式和進階模式有何差異？
• A : 兩種模式的差異主要是在產生題目的迷宮時，用兩題的文字來混合，或是只使用一題的文字來出題；只使用一題的文字來出題時，因為字的重覆度會高，在作答時，可能需要費神來選擇，才能走到終點，所以為進階模式。
  
  
• Q : 為什麼同一題的走法不見得每次都一樣？
• A : 文字迷宮在製作時是以用隨機的方式選擇字要放到哪一格，因此走法不見得都一樣；另外，有時也可能因為相同的字就在旁邊，而形成有多個走法的情形。所以要多方思考，找出最佳路徑。

▋ 相關連結

• 雄 : 填試算表製作 HTML5 FUN 遊戲

• 雄 : HTML5 FUN:自製遊戲啟動器

• 雄 : HTML5:語文高手題庫&國字加注音語法產生器

• 雄:HTML5 FUN 精選集

• HTML5 FUN

▋ 更新記錄

• 2025.04.03 可在題庫的第四欄位指定要顯示在右下角的圖片；第五欄位如果有自訂語音的網址，就不使用 TTS 來念題目。
• 2025.04.02 檢查題目解析完是否佔太多格，限制不能超過 87 格 (總格數最大為 10x10)；非國字注音的題目(ex.英文題)會自動調整字的大小；試算表範本新增 tts_language 的參數，供自訂合成語音的語言。
• 2025.04.01 加入線上題庫的功能，支援以 Google 試算表＋HTML5 FUN 遊戲啟動器來自製文字迷宮的線上遊戲。
• 2025.03.27 v.1.0  初版。

 

 

閱讀全文

yt-dlp下載錯誤導致 Whisper 無法使用的處理

之前有人反應在使用我的三個 Google Colab 的小工具：

• 雄 : 使用 OpenAI Whisper 製作影音的字幕或逐字稿

• 雄 : 以 Faster Whisper 將影音辨識為字幕或逐字稿

• 雄：Toots : yt-dlp 下載 Youtube 或是其它網站的影音

會出現類似這樣的錯誤訊息而卡住：

ERROR: [youtube] BVSF-vSvL6Y: Sign in to confirm you’re not a bot. Use --cookies-from-browser or --cookies for the authentication. See  https://github.com/yt-dlp/yt-dlp/wiki/FAQ#how-do-i-pass-cookies-to-yt-dlp  for how to manually pass cookies. Also see  https://github.com/yt-dlp/yt-dlp/wiki/Extractors#exporting-youtube-cookies  for tips on effectively exporting YouTube cookies

[圖1] 有較完整的訊息內容：

[圖1] yt-dlp 下載失敗的截圖

訊息中最重要的關鍵字其實是這兩個：

• 「yt-dlp」
• 「Sign in to confirm you’re not a bot」

錯誤是發生在使用「yt-dlp」來下載 YouTube 影片的程序中，應該是 YouTube 的網站在進行「機器人」偵測，Google Colab 的程序無法跟 YouTube 網站「正確互動」，而被擋下來，導致無法下載影片。

除了前面的錯誤訊息，我在測試時，「買一送一」，遇到了第二種錯誤訊息：

ERROR: unable to download video data: HTTP Error 403: Forbidden

[圖2] 是我 yt-dlp 用那麼久以來，第一次遇到的 403 Forbidden 訊息： 

[圖2] yt-dlp 403 Forbidden 的錯誤訊息

YouTube 直接跟我說，無法存取了（很好！我喜歡直接的人！）。

解決的方法

在 Google Colab 中，遇到前面兩種狀況時，目前我的解決方法是執行「中斷連線，並刪除執行階段」，這樣可以達到類似「閞機」的效果，將虛擬機關掉，然後我們再將它重啟。

怎麼做呢？很簡單，看 [圖3]、[圖4] 中的紅色箭頭：

[圖3] 點選「中斷連線，並刪除執行階段」

[圖4] 按「是」來確認

當我們利用「中斷連線，並刪除執行階段」，將虛擬機進入「關閉」的狀態以後，只要再重頭將 OpenAI Whisper / Faster Whisper / yt-dlp 的操作程序再執行一次，應該就有機會可以成功了！為什麼說「有機會」呢？哈！我自己在測試時，遇過要兩次才沒被 YouTube 擋下來；幸好不用像「國父」一樣 XDDD

祝您好運，可以畢其功於一役！

相關連結

• 雄 : 使用 OpenAI Whisper 製作影音的字幕或逐字稿

• 雄 : 以 Faster Whisper 將影音辨識為字幕或逐字稿

• 雄：Toots : yt-dlp 下載 Youtube 或是其它網站的影音

閱讀全文

HTML5 : 考驗加減能力的 Zlizer 小遊戲

HTML5 FUN 的程式幾乎是是使用 LimeJS 來開發的，雖然該專案已經沒有在維護了，但是使用多年，HTML5 FUN 有了自己的模式，小臭蟲大概也除得差不多，所以二月時，將調整過後， LimeJS 目前可以運作的版本，放了一份在 GitHub 中。

LimeJS 的 lime/demos 目錄中，有一個範例遊戲，名為 Zlizer，它是一個利用數學加、減法來闖關的益智遊戲，滿好玩的。這兩天認真地研究了程式碼，解決了動不動就因錯誤而掛掉的問題，界面可自動依瀏覽器的設定顯示中文，另外還增強了一些功能。

▋  考驗加減能力的 Zlizer

Zlizer 的遊戲畫面中會出現很多帶有數字的泡泡，玩的時候必須使用滑鼠，或是在觸控螢幕畫線，可以將泡泡分解或合併，必須在泡泡落地，或是超過左右範圍之前，使泡泡數字能和右上角的目標數字一樣。答對會加與泡泡上數字等值的分數，超過範圍也會扣與數字等值的分數。

👉 在多個泡泡外畫線，可以將它們合部合併為一個。

[圖1] 將多個泡泡畫線圈起來，合併為一個

👉 在泡泡中間畫線，可以分解為多個泡泡。

[圖2] 在泡泡上畫線，分解泡泡

👐 如果是在支援多點觸控的平板，或是大屏，可以多人同時操作，合作破關哦！

▋ 啟動程式開始玩

按底下的圖示，或是紅色按鈕，即可開啟遊戲。

▋ 版權聲明

Zlizer 的原始碼來自於 LimeJS 的 Demos：

• 原始的版本: 
  GitHub / digitalfruit / limejs (https://github.com/digitalfruit/limejs)
• 修改過的版本: 
  GitHub / gsyan888 / limejs (https://github.com/gsyan888/limejs)

▋ 相關連結

• 雄:HTML5 FUN 精選集

• HTML5 FUN

▋ 更新記錄

• 2025.03.17 解決泡泡內的數字，或是部份的文字因為字型大小的關係，而自動變成兩行字的問題。
• 2025.03.15 加入音效；各模組補充 JSDoc 缺漏的部份，解決 compile 的時候會出現的一堆警告訊息 ( 一整個寫程式的潔癖 XDDD )。
• 2025.03.14 除蟲；可自動偵測是否為中文環境，language 為 zh 開頭者，就進行中文化；遊戲說明對話框右上角多一個叉叉按鈕，可以跳過說明。

閱讀全文

DIY:修復拉鏈止滑功能

今天在指南宮後山發生了一件很糗的事，指引兩個人往猴山岳的路，他們離開後，才發現自己長褲的拉鏈居然滑開了，真的是糗到不能再糗；幸好今天穿的上衣下擺夠長，應該有遮住，沒被看到吧？（一整個自我安慰！）

現在的拉鏈頭，大部分都有一個小簧片，可以防止它往下滑；要我們拉拉鏈頭，簧片被往上提，才會鬆開，才能滑動拉鏈。不過，久了，簧片老化了，「煞車」就卡不住了，三不五時就製造出糗的事件！

可是拉鏈明明就好好，買個拉鏈頭來換？當然可以，只是天生愛動動腦，動動手，總是想用別的方法來解決問題。既然是簧片彈力的問題，那就給它一點彈力吧！

[圖1] 補強中的拉鏈

如 [圖1] 在拉鏈止滑簧片的上方，穿過了一條細細的白色彈力繩，並打上牢牢的死結。材料哪裡來的呢？

之前有個口罩因為一邊的耳掛沒壓實固定好就混在其它好的口罩中，被我擱在一旁沒用過，這一回，就派它出場來救救拉鏈。

[圖2] 拆開的口罩耳掛

如 [圖2] 所示，口罩的耳掛其實主要由一大股線、一小股線，再加上細細的彈力繩繞在一起的。這細細的彈力繩拿來「頂開」拉鏈的止滑簧片，間隙剛剛好；打完結也不會太顯眼，一整個完美。不過，跟小孩子炫耀時，她問我一個問題：「這樣不會在洗衣機洗一洗，就洗到掉了嗎？」，哈！第一次這樣玩，要驗證過才知道答案。

閱讀全文