2012年11月10日 星期六

HTML5 : lotto 樂透摸彩機

去年暑假時寫過一個 Flash 版的樂透摸彩機,這兩天用 LimeJS 重新寫一個 HTML5 版的,可以使用 lotto_set.js 來自訂內容,並離線使用,在 iPad 中,如果「加入主畫面螢幕」,就可以成為一個 HTML5 的 App。
這個 HTML5 版本的樂透機功能和 Flash 版的類似,底下幾部份利用 LimeJS 方便的程式庫稍微加強了一下:

  • 抽完的球,通通集中顯示在下方的長方形中,該處是一個水平捲軸,彩球如果超過六顆時,它會自動捲動,看不到的部份可以自行捲動捲軸來查看。另外,在左上角加了一個放大的彩球,顯示目前抽出的彩球内容。
  • 字型大小的部份會自動計算,會依總字寬或字高,自動調整顯示的比例,讓它不會超出彩球的大小。因此刪除了原來在 Flash 版中的 font_size 參數。


使用方法

  • 下載 「 html5_lotto.zip」 後,將它解壓縮。
  • 以「文字編輯軟體」開啟設定檔「lotto_set.js」,並依需求,修改裡面的參數,改好了就儲存檔案。
  • 以「文字編輯軟體」開啟設定檔「cache.manifest」,修改裡面「# Updated on: 2012-11-09......」這行的時間戳記,這樣,iPad 才知道內容有異動而重新下載、更新檔案。
  • 前述步驟都完成後,將 html5_lotto 資料夾的檔案上載到類似 Dropbox 的空間,中並用 iPad 中的瀏覽器 Safari 來連線瀏覽。
  • 進入到「樂透機」的頁面以後,我們可以按一下網址右側的按鈕,出現帶有「加入主畫面螢幕」的選單後,按一下「加入主畫面螢幕」。
  • 出現「加入主畫面螢幕」的畫面後按「新增」。
  • 離開 Safari 後,啟動主畫面中的樂透機,讓它將需要的檔案下載回來後,就可以斷線,測試離線的效果。

修改設定檔

HTML5 版的樂透機,設定檔的檔名是「lotto_set.js」,它是一個純文字檔,因此,我們可以用類似記事本的文字編輯器來開啟。檔案裡面可以讓我們設定以下的參數:

  • show_by_list:這個參數用來控制題目出現的順序是以題庫原來的順序,還是使用亂數來決定題目出現的順序。「yes」表示用原來的順序,「no」表示用亂數來決定題序。
  • font_name:設定彩球上文字的字體。
  • question:題庫。


檔案下載



相關文件



更新記錄

  • 2012-11-10 加入可自訂參數及以捲軸顯示結果的功能。
  • 2012-11-09 初版。


2 則留言:

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

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

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

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

      刪除

 
© 2009. Design by Pocket