HTML5 : WHEEL 幸運轉輪更新

本來只是想將 HTML5 WHEEL 幸運轉輪加個按鈕而已，結果一發不可收拾，連玩了幾天，多了一些新的功能：

1. 新增轉動轉盤的按鈕。
2. 盤面選項可以使用圖片。
3. 圖片支援 .SVG 及 Data URI 格式。
4. 圖片可以設定使用圓框。
5. 盤面的文字及圖片可以設定對齊方式。
6. 盤面及對話框的字形自動調整大小。
7. 文字支援國字旁加上直式注音的格式。(2022.11.11 新增；語法請參考「雄:HTML5:語文高手題庫&國字加注音產生器」)。
8. 可利用網址加上 ?filename=xxxxx 的方式指定要使用的設定檔檔名。
9. 設定檔中新增 wheel_colors 的參數，供自訂轉盤上要使用的顏色代碼。
10. 設定檔中新增兩個可自訂欄位及素材分隔符號的參數。
11. 畫面左下角有隱藏式工具箱，內有三個功能按鈕，可供重置轉盤、輸入題目及設計、查看使用說明。
12. 拖曳圖片檔案至題目輸入區，自動轉為 Data URI base64編碼的圖片資料。
13. 聲音支援使用 Vocaroo 網址，及使用 HTML5 FUN 的文字轉語音自訂格式 .tts，使用 TTS 將指定文字以指定語言來合成語音，語法可以參考設定檔中的註解，或是烘焙機中的說明。(2023.08.02 新增)
14. 素材支援 .mp4 影片檔，或是 Youtube 影片。(2023.08.02 新增)
15. 支援 HTML5 FUN 烘焙機 來自製幸運轉輪。(2023.08.02 新增)

2021.05.27 .v4 的 HTML5 WHEEL

同時使用三種素材的題目

HTML5 WHEEL 幸運轉輪可以在 HTML5 FUN 中玩，或是下載檔案回來自訂題庫：

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

也可以使用 HTML5 FUN 烘焙機來打造自己的幸運轉輪(2023.08 新增)：

• 雄 : 打造自己的遊戲 : HTML5 FUN 烘焙機大彙整

臨時想要更改題目，可以打開左下角的工具箱

按左下角的箭頭打開工具箱

在工具箱中按「輸入」即可即時改題目內容

按「輸入」載入現有題目

在題目編輯器上除了可以修改題目，也能設定選項

HTML5 WHEEL 題目編輯器

在編輯器中，一行一個題目，空白行會自動省略。可以是純文字，或是圖片的檔名。

如果圖片的大小不大(畫面顯示，建議 640x480 左右即可)，圖片也可以由資料夾中，將選取好的圖片檔案，以拖曳的方式，拉到輸入區中。它會將圖片檔案的資料編碼過後，附加在原有題目的後面；甚至可以一次拖曳多個圖片。

底下的影片示範如何以拖～拉～放～～的方式新增圖片的題目：

如果圖片是直接由瀏覽器中拖曳過來的，而它的網址結尾是 .jpg、.png、.gif、.svg，則該網址會被附加到題庫的最後面。

如果都修改好了，按「套用」的按鈕即可開始玩。

要特別注意的是，即時修改的題目並不會儲存起來。如果有重覆使用的需求，目前還是需要將將設定寫入設定檔 wheel_set.js 檔案中。詳細的說明請參考之前這篇舊文：

• 雄 : HTML5 : wheel 幸運轉輪

圖片圓框設定與否的比較如下:

沒有圓框的圖片

有圓框的圖片

前面的例子，小狗的照片長寬比不是 1:1，如果是正方形的照片，設了圓框，照片會被切成圓形的。

相關文章

• 雄 : 打造自己的遊戲 : HTML5 FUN 烘焙機大彙整

• 雄 : HTML5 FUN 精選集

• 雄 : HTML5 : wheel 幸運轉輪

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

• 雄 : 設定 Youtube 影片播放的起迄時間