HTML5 : 足球高手與籃球高手

這一篇介紹文自 2012/11/25 就打了草稿，放到現在。就趁 HTML5 足球高手也改好版了，一鼓作氣，將它完成。

HTML5 籃球高手與 HTML5 足球高手都是源自於 2009~2011 年的 Flash 版，除了 HTML5 版可以跨平臺在支援 HTML5 的瀏覽器中使用外，它們的題庫和 HTML5 FUN 中的 PK、PK2 所使用的題庫是相容的，能夠支援文字題或是圖片題，當然我稱之為「語文高手」題型的國語同音字、多音字及形近字的題型也有支援。此外，現在出題更方便了，可以使用 HTML5 FUN 的「遊戲式題庫烘焙機」，直接在瀏覽器中出題，並可以將遊戲嵌入網站中。

HTML5 足球高手守門員的姿勢

HTML5 足球高手

HTML5 籃球高手

功能簡介

• 可跨平臺，只要有支援 HTML5 的瀏覽器，即可使用。
• 單機版可以自訂選單及題庫。
• 行動載具支援離線使用。
• 支援國語「形近字」、「多音字」和「同音字」的「語文高手題庫」，可以使用「雄:HTML5:語文高手題庫&國字加注音產生器」來出題。
• 以用圖片、純文字、國字加直式注音、分式等當題目或是選項。
• 可使用「HTML5 FUN 遊戲式題庫烘焙機」來打造自己旳遊戲。

玩一玩

HTML5 籃球高手與 HTML5 足球高手都可以在 HTML5 FUN 網站中找到，只要按一下它們的圖示，即可以試玩它們已建立好的範例題庫，HTML5 FUN 網站的網址如下：

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

籃球高手的圖示：

足球高手的圖示：

檔案內容

除了在 HTML5 FUN 網站中玩，我們也可以由 HTML5 FUN 網站中下載籃球高手或是足球高手打包的壓縮檔，將 html5_basketball.zip (html5_football.zip) 解壓縮以後。資料夾中會有一些檔案及資料，其功能簡述如下：

• html5_basketball.html (html5_football.html)：主網頁檔，要使用這個學具，就以網頁瀏覽器(例如: Chrome、Safari、Edge、Firefox...) 來開啟這個檔案。
• basketball.js (football.js) ：HTML5 主程式檔，由主網頁檔來載入使用的，必備但不要去更動它的內容。
• basketball_set.js (football_set.js)：基本設定檔，一般情形是不需要變更內容，如果想要自訂選單檔的檔名，可以在這個檔案中設定。
• basketball_menu_set.js (football_menu_set.js)：預設的選單設定檔。主程式會依這個檔案的內容來產生選單，並依設定載入指定的題庫檔案。
• cache.manifest：快取設定檔，這個檔案用來告訴瀏覽器要將哪些檔案儲存起來，供離線時使用。如果有新增題庫檔案時，這個檔案的內容記得要更新。
• assets 資料夾：這個目錄中放了程式會使用到的圖片檔和音效檔。
• data 資料夾：這個目錄中放了 .js 的題庫範例檔案。

打造自己的遊戲

HTML5 籃球高手與 HTML5 足球高手都支援「HTML5 FUN 遊戲式題庫烘焙機」，想使用自己的題庫來玩籃球高手或是足球高手，無論是將遊戲放在網路，或是放儲存在本機中，可以用 HTML5 FUN 的烘焙機。

目前 HTML5 FUN 的烘焙機中，提供四種題庫範例：

• 出題光碟格式：這是仿照出版社出題光碟 CSV 格式的題庫，也可以自行使用試算表來製作，資料欄位依序為：題幹、解答(選項的號碼)、選項1、選項2、選項3、選項4。
  將試算表中帶有題庫資料的各欄選取，並複製好後，貼到HTML5 FUN 烘焙機中的「圖形式」編輯區中，即可轉為遊戲的題庫。
• 兩欄式題庫：選擇這個題庫樣版以後，我們只要準備好每一題的題目及答案，然後在烘焙機的文字編輯區中，按照這樣的格式，一行一題，輸入題庫
  
  題目1##答案
  題目2##答案
  題目3##答案
  題目4##答案
  
  烘焙機出題時會自動幫忙製作遊戲所需要的題幹跟選項。
  
  
• 三欄式題庫：選擇這個題庫樣版，每一題我們需要準備題目、正確選項和多個錯誤選項，每一行依類似這樣的格式輸入：
  
  題目##正確1##錯誤1~~錯誤2~~錯誤3
  題目##正確1##錯誤1~~錯誤2~~錯誤3
  題目##正確1##錯誤1~~錯誤2~~錯誤3
  
  
• 語文高手題庫：這個樣版是針對國語的同音字、多音字或形近字而設計的，格式較複雜，建議使用「雄:HTML5:語文高手題庫&國字加注音產生器」來製作。

關於各種題庫，只要在 HTML5 FUN 烘焙機中，選定了題庫樣版以後，題庫編輯器均有詳細的說明，坐而言，不如起而行，按底下的圖示，開啟「HTML5 FUN 遊戲式題庫烘焙機」來打造自己的遊戲吧！

籃球高手烘培機

足球高手烘焙機

相關連結

• 雄 : HTML5 FUN 精選集
• 雄 : 打造自己的遊戲 : HTML5 FUN 烘焙機大彙整
• 雄:HTML5:語文高手題庫&國字加注音產生器

籃球高手更新記錄

• 2023.05.07 修改題庫解析的程序。
• 2022.01.12 支援 HTML5 烘焙機。
• 2021.11.27 支援直拿版面。
• 2012.12.12 發布。

足球高手更新記錄

• 2023.05.31 預載守門員的圖片，以免第一次動作會有延遲或是跳格的情形。
• 2023.05.26 發布 .v1。