HTML5 : lotto 樂透摸彩機

2011年暑假時寫過一個 Flash 版的樂透摸彩機，2012年11月用 LimeJS 重新寫一個 HTML5 版的，讓它可以跨平臺使用，甚至離線使用。

這個 HTML5 版本的樂透機功能和 Flash 版的類似，不過，趁改版，稍微加強了一下：

• 抽完的球，通通集中顯示在下方的長方形水平捲軸中，彩球如果超過能顯示的範圍時，它會自動捲動，看不到的部份可以自行捲動捲軸來查看。

• 彩球中，文字字型大小的部份會自動計算，會依總字寬或字高，自動調整顯示的比例，讓它不會超出彩球的大小。因此刪除了原來在 Flash 版中的 font_size 參數。

• 抽完球時，會跳出抽取結果的對話框。

• 彩球的內容支援文字、圖片；抽取結果則可以是文字、圖片、聲音混搭。

• 內建題載編輯器，可以即時修改題庫(2022.01.27 以後的版本新增)。

• 支援 HTML5 FUN 烘焙機 (2023.08.03 以後的版本)。

2022.01.27 的 HTML5 樂透機截圖

使用方法

HTML5 樂透機可以直接在 HTML5 FUN 網站使用。

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

樂透機可以修改預設的題庫內容及遊戲參數，讓它更符合自己的需求，有需要修改參數可以使用最新版的 HTML5 FUN 烘焙機，按底下的圖示或連結即可開啟：

• 雄 : 打造自己的遊戲 : HTML5 FUN 烘焙機大彙整(最新版烘焙機)

另一種方式是使用早期的方式，以工具來修改下載回來的檔案。有興趣試試，可以按照以下的步驟，下載並修改為自己的題庫：

• 下載 「 html5_lotto.zip」 後，將它解壓縮。

• 以「文字編輯軟體」開啟設定檔「lotto_set.js」，並依需求，修改裡面的參數，改好了就儲存檔案。

• 以「文字編輯軟體」開啟設定檔「cache.appcache」，修改裡面「# Updated on: 20xx-xx-xx......」這行的時間戳記，讓瀏覽器知道內容有異動而重新下載、更新檔案。

• 前述步驟都完成後，以網頁瀏覽器來開啟 html5_lotto 資料夾中的 html5_lotto.html 的檔案。

修改設定檔

HTML5 版的樂透機，設定檔的檔名是「lotto_set.js」，它是一個純文字檔，因此，我們可以用類似記事本的文字編輯器來開啟(個人在 Windows 下是使用 Notepad++，在 Mac OS X 中則是使用 TextWrangler )。

lotto_set.js 檔案裡面可以讓我們設定以下的參數：

• show_by_list：這個參數用來控制題目出現的順序是以題庫原來的順序，還是使用亂數來決定題目出現的順序。「true」表示用原來的順序，「false」表示用亂數來決定題序。

• font_name：設定彩球上文字的字體。

• soundEffectEnable：設定是否播放音效。

• questions：題庫。設定檔中「questions」這個參數最重要，它決定了彩球上要顯示的內容，及結果對話框中要顯示的內容。和 Flash 版不同的是，在 HTML5 版可以分為「單欄式題庫」和「兩欄式題庫」；而且也支援文字、圖片、聲音和影片(2023年8月後支擾)，四種格式的內容。因此，後面再詳細說明。

如果想設定抽取結果的對話框，有底下參數可以自訂：

• result_dialog_caption ：對話框上方的標題字。

• result_dialog_caption_font_size ：對話框上方標題字的字型大小。

• result_dialog_caption_font_color：對話框上方標題字的顏色

• result_dialog_icon：對話框上方標題字旁的小圖示

• result_dialog_font_color：抽取結果文字的顏色

• result_dialog_font_size：抽取結果文字的預設大小

• result_dialog_text_align：抽取結果文字水平對齊方向，設定值可以是 left、center 和 right

• result_dialog_enable_fit_text : 抽取結果文字是否自動調整字型大小，預設會啟用；啟用時，result_dialog_font_size 會無效。

題庫設定參數「questions」

HTML5 樂透機的題庫支援顯示文字、圖片、聲音和影片(2023年8月後支擾)，而且彩球和抽取結果對話框中的內容也可以不同，因此可以分為「單欄式題庫」和「兩欄式題庫」。

「單欄式題庫」

如果彩球和結果對話框中要顯示的內容是完全一樣的，使用和 Flash 版一樣的題庫設定即可，也就是一行放一道題目的設定，例如：

1
2
3

上面的設定,如果抽到標示為「1」的彩球，結果對話框中，只會顯示同樣的內容「1」；抽到標示為「2」的彩球，結果對話框中，只會顯示「2」；抽到標示為「3」的彩球，結果對話框中，只會顯示「3」。

「兩欄式題庫」

如果彩球和結果對話框中要顯示的內容不同，可以用「欄位分隔符號」(預設是「##」，可以用「seperator_col」來自訂分隔符號)，將彩球上要顯示的內容，與結果對話框中要顯示的內容區分開；除此之外，一樣是一行放一道題目的設定，例如：

1##頭獎
2##貳獎
3##參獎

特別注意「##」的使用，上面的設定,如果抽到標示為「1」的彩球，結果對話框中會顯示「頭獎」兩個字；抽到標示為「2」的彩球，結果對話框中會顯示「貳獎」兩個字；抽到標示為「3」的彩球，結果對話框中會顯示「參獎」兩個字。

顯示圖片或播放聲音

前面提過，題庫的內容可以是文字、圖片或聲音，甚至混合搭配。

想使用圖片或聲音時，當然要先將檔案放到樂透機所在的目錄下，然後再將路徑填入題庫設定中即可。例如我將「cat.png」和「dog.png」這兩張圖片的檔案通通放到樂透機所在目錄的「samples」目錄中，兩張圖片的相對路徑應該是「samples/cat.png」和「samples/dog.png」。

所以單欄式的題庫設定內容可以是：

samples/cat.png
samples/dog.png

兩欄式的題庫，應用了「##」；如果想按到「貓」出現「cat.png」的圖片；按到「狗」出現「dog.png」的圖片，設定內容可以是：

貓##samples/cat.png
狗##samples/dog.png

如果想「文字」和「圖片」混搭，讓它們同時出現呢？

不同類型混搭時，只要用「資料欄位分隔符號」的「~~」(可以用 seperator_data 來自訂分隔符號) 當分隔，將不同類型的資料放在同一道題目中。例如單欄式的題庫設定內容可以是：

貓~~samples/cat.png
狗~~samples/dog.png

上面的設定中，有使用了「~~」，讓彩球上既有圖片，也有文字。

【後記】

2022.01.27 起的版本有題庫即時編輯及滙出的功能，這樣編製題庫可以比較輕鬆一些。

2022.01 版的題庫編輯器

詳情可以參考底下這一則文：

• 雄 : HTML5 : Lotto 題庫編輯器

檔案下載

•  html5_lotto.zip 

相關文件

• 雄 : 打造自己的遊戲 : HTML5 FUN 烘焙機大彙整(最新版烘焙機)

• 雄 : HTML5 : Lotto 樂透摸彩機@Blogger

• 雄 : HTML5 : Lotto 題庫編輯器

• Flash : lotto 樂透摸彩機

更新記錄

• 2023.08.02 支援烘焙機；題庫內容可使用 .mp4 或 Youtube 影片網址，聲音部份可以合成語音，例如「小狗.zh-TW.tts」會說出「小狗」的中文，「dog.en-US.tts」會說出「dog」；增強內建的題庫編輯器，支援由試算表貼上的資料，可以利用空白欄當對話框的分隔符號。
• 2022.11.13 題庫編輯器新增插入圖片及聲音的按鈕，將編輯器的圖形化再增強，以右側插入鈕新增後，可以即時顯示小圖示。
• 2022.11.12 加入直拿版面；利用 CSS 自動調整圖片大小；文字的大小最佳化；語音支援 Vocaroo 網址自動轉換為 MP3 的網址。
• 2022.01.29 解決題庫匯出後，因為資料型態和遊戲進行時的不同，如果直接按右上角的結束鈕離開，題庫會亂掉(一個字變成一題) ；所有按鈕的滑鼠指標都設為 pointer (手指)。
• 2022.01.28 題庫解析增強對內容的檢查，以免空字串蓋過內容；對話框的按任何一鍵關閉除蟲；有關字型大小設定除蟲；設定檔將聲音的設定移除，改由 lotto_embeded_media_set.js 載入；加入 result_dialog_enable_fit_text 的參數可以自行決定對話框中的文字是否自動調整大小。快速數字題產生器中的除外號碼可以使用像 1-10 這種格式來設定一個範圍要除外。
• 2022.01.27 加入匯出題庫的功能。
• 2022.01.24 加入快速新增號碼題的功能。
• 2022.01.23 加入題庫編輯器，可以即時修改題庫。
• 2022.01.13 題庫可以使用多行的字串來建立；加入 embeded 的功能，可以直接讀取設定的變數，不用透過設定檔，在 blogger 中即可以存放題庫。
• 2018-09-15 抽完彩球會跳出對話框顯示結果；題庫支援文字、圖片及聲音。
• 2012-11-10 加入可自訂參數及以捲軸顯示結果的功能。
• 2012-11-09 初版。