2012年11月10日 星期六

HTML5 : lotto 樂透摸彩機 (2022.11.13 更新)

2012年11月10日 星期六

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

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

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

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

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

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

  • 內建題載編輯器,可以即時修改題庫(2022.01.27 以後的版本新增)。
2022.01.27 的 HTML5 樂透機截圖


使用方法

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

如果想一打開來就是使用自訂的題庫,就可以按照以下的步驟,下載並修改為自己的題庫:

  • 以「文字編輯軟體」開啟設定檔「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:這個參數用來控制題目出現的順序是以題庫原來的順序,還是使用亂數來決定題目出現的順序。「yes」表示用原來的順序,「no」表示用亂數來決定題序。

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

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

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

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

  • 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 樂透機的題庫支援顯示文字、圖片和聲音,而且彩球和抽取結果對話框中的內容也可以不同,因此可以分為「單欄式題庫」和「兩欄式題庫」。

「單欄式題庫」

如果彩球和結果對話框中要顯示的內容是完全一樣的,使用和 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 版的題庫編輯器

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


檔案下載

相關文件

更新記錄

  • 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 初版。


7 則留言:

  1. 您好,感謝老師分享這個好用的軟體。我下載後卻無法用播放軟體執行,畫面出現" 無法載入設定檔:lotto_set.txt(lotto_set.xml),請問老師該如何排除這個狀況,感謝解惑。

    回覆刪除
    回覆
    1. 您好:
      您指的應該不是這篇 HTML 版的問題,而是 Flash 版的常見問題。

      使用 Flash Player 可以解決您的困擾,請您參考 Flash 版中的留言,很多人遇到和您相同的問題:

      http://gsyan888.blogspot.com/2011/08/flash-lotto.html

      刪除
  2. 老師好,請問安卓系統的手機或平板要如何開啟呢?謝謝老師

    回覆刪除
  3. 非常非常感謝國雄老師的分享與詳盡解說.

    回覆刪除
  4. 請教顏老師: 如果我輸入英文,抽取結果顯示非常小,我改變文字的預設大小並不能解決問題,請問老師可以幫忙嗎?

    回覆刪除
    回覆
    1. 素靜您好:
      您可以將設定檔寄給我看看
      gsyan888

      @gmail.com

      刪除

 
雄::gsyan © 2009. Design by Pocket