前兩天突然想到以前大型機台的「青蛙過河」，這真是經典中的經典，簡單又好玩。想到了，當然要做出來囉！不過並沒有打算設計得那麼複雜，就單純地過河就好。花了一整天，將河道弄好，加上青蛙的操控，最上再整合題庫的部份，兩天完成了九成，昨天為了處理音效的部份，又用掉了一整天，不過有新發現，滿值得。
 |
| [圖1] HTML5 青蛙過河的遊戲說明 |
目前 HTML5 青蛙過河按完遊說明的 [開始挑戰] 鈕後，畫面上方的草地上會出現題目，青蛙由畫面下方草地出發，跳到正確的答案上才安全，不然會落水、扣分，並由出發點重來；如果青蛙被河水帶到兩側看不到了，也會落水扣分。
如何控制青蛙？如果是用電腦，可以使用鍵盤方向鍵的上、下、左、右來控制青蛙跳的方向；鍵盤的空白鍵也可以讓青蛙往前跳；在草地上的四個箭頭跟鍵盤的方向鍵一樣是用來控制青蛙的方向；也可以按住青蛙，利用「手勢」的方式來操控：
- 往前跳：按住青蛙往上滑後放開。
- 往後跳：按住青蛙往下滑後放開。
- 往右移動：按住青蛙往右滑後放開。
- 往左移動：按住青蛙往左滑後放開。
 |
| [圖2] 青蛙移動的方式 |
青蛙連過三關，跳到上方的草地以後，就能得分。
 |
| [圖3] 跳到第一關的荷葉上 |
 |
| [圖4] 跳到第二關的荷葉上 |
 |
| [圖5] 跳到第三關的荷葉上 |
 |
| [圖6] 上岸得分 |
如果想試玩或是下載青蛙過河的範例題庫，可以在 HTML5 FUN 網站中找到：
玩一玩
HTML5 青蛙過河可以在 HTML5 FUN 網站中找到，只要按一下它的圖示，即可以試玩已建立好的範例題庫，HTML5 FUN 網站的網址如下：
檔案內容
除了在 HTML5 FUN 網站中玩，我們也可以由 HTML5 FUN 網站中下載青蛙過河打包的壓縮檔，將 html5_frog.zip 解壓縮以後。資料夾中會有一些檔案及資料，其功能簡述如下：
- html5_frog.html ：主網頁檔，要使用這個學具，就以網頁瀏覽器(例如: Chrome、Safari、Edge、Firefox...) 來開啟這個檔案。
- frog.js ：HTML5 主程式檔，由主網頁檔來載入使用的，必備但不要去更動它的內容。
- frog_set.js ：基本設定檔，一般情形是不需要變更內容，如果想要自訂選單檔的檔名，可以在這個檔案中設定。
- frog_menu_set.js ：預設的選單設定檔。主程式會依這個檔案的內容來產生選單，並依設定載入指定的題庫檔案。
- cache.manifest：快取設定檔，這個檔案用來告訴瀏覽器要將哪些檔案儲存起來，供離線時使用。如果有新增題庫檔案時，這個檔案的內容記得要更新。
- assets 資料夾：這個目錄中放了程式會使用到的圖片檔和音效檔。
- data 資料夾：這個目錄中放了 .js 的題庫範例檔案。
打造自己的遊戲
HTML5 青蛙過河支援「HTML5 FUN 遊戲式題庫烘焙機」，想使用自己的題庫來玩青蛙過河，無論是將遊戲放在網路，或是放儲存在本機中，可以用 HTML5 FUN 的烘焙機。
HTML5 青蛙過河和籃球高手、足球高手一樣，都是使用 PK、PK2 的題庫系統，只是遊戲界面不同，玩法有差異而已。目前 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 遊戲式題庫烘焙機」來打造自己的遊戲吧！
 |
| 青蛙過河烘培機 |
相關影片
相關連結
更新記錄
- 2024.04.17 QR Code API 改用 QuickChart。
- 2023.07.05 題幹支援聲音的題型，可使用 .mp3 或 .tts；文字型的題目，可以在設定檔中將「question_text_speaking_enabled」設為 true，就會自動以 TTS 合成語音念出題目文字；如果在設定檔中將「answer_text_speaking_enabled」設為 true，選到正確答案時，就會自動以 TTS 合成語音念出答案的文字；新增 tts_language、tts_speed、tts_language_of_answer參數來設定 TTS 的語言及速度。
- 2023.06.14 網址中可以使用 datafilename 的參數來指定題庫檔的路徑，可以使用 icon 的參數來指定取代預設青蛙圖示的圖片路徑；畫面左下角新增一個分享的圖示，按下去以後，會自動複製使用中的題庫網址到剪貼簿中，並出現 QRcode；新增自訂參數 theNumberOfQuestions 可以設定要出題幾結束遊戲，frogIconPath 可指定青蛙圖示的路徑，自訂角色圖案(與在網址中使用 icon 類似的功能，但網址中的優先使用)；題庫支援多選題的格式，三欄式的題庫，正確答案如果有多個，會以亂數取用。
- 2023.06.13 青蛙加入往後跳的功能。
- 2023.06.11 加入用鍵盤控制青蛙的功能，將虛擬方向鍵改固定在下方草地上。
- 2023.06.09 在說明對話框中加入移動手勢的圖例；參考江明勳老師的建議，讓青蛙跳上正確的荷葉時，同一層的選項圖文都隱藏，並讓青蛙可以左右跳，增加過關的機率。
- 2023.06.07 修改音效播放的程序，在 iOS 上更順暢，不會因為播放音效而卡卡的。
- 2023.06.06 發布。
發表文章
沒有留言:
張貼留言