顯示具有 LimeJS 標籤的文章。 顯示所有文章
顯示具有 LimeJS 標籤的文章。 顯示所有文章

2025年3月15日 星期六

HTML5 : 考驗加減能力的 Zlizer 小遊戲

2025年3月15日 星期六

HTML5 FUN 的程式幾乎是是使用 LimeJS 來開發的，雖然該專案已經沒有在維護了，但是使用多年，HTML5 FUN 有了自己的模式，小臭蟲大概也除得差不多，所以二月時，將調整過後， LimeJS 目前可以運作的版本，放了一份在 GitHub 中。

LimeJS 的 lime/demos 目錄中，有一個範例遊戲，名為 Zlizer，它是一個利用數學加、減法來闖關的益智遊戲，滿好玩的。這兩天認真地研究了程式碼，解決了動不動就因錯誤而掛掉的問題，界面可自動依瀏覽器的設定顯示中文，另外還增強了一些功能。

▋  考驗加減能力的 Zlizer

Zlizer 的遊戲畫面中會出現很多帶有數字的泡泡，玩的時候必須使用滑鼠，或是在觸控螢幕畫線，可以將泡泡分解或合併，必須在泡泡落地，或是超過左右範圍之前，使泡泡數字能和右上角的目標數字一樣。答對會加與泡泡上數字等值的分數，超過範圍也會扣與數字等值的分數。

👉 在多個泡泡外畫線，可以將它們合部合併為一個。

[圖1] 將多個泡泡畫線圈起來，合併為一個

👉 在泡泡中間畫線，可以分解為多個泡泡。

[圖2] 在泡泡上畫線，分解泡泡

👐 如果是在支援多點觸控的平板，或是大屏，可以多人同時操作，合作破關哦！

▋ 啟動程式開始玩

按底下的圖示，或是紅色按鈕，即可開啟遊戲。


▋ 版權聲明

Zlizer 的原始碼來自於 LimeJS 的 Demos：


▋ 相關連結

▋ 更新記錄

  • 2025.03.17 解決泡泡內的數字，或是部份的文字因為字型大小的關係，而自動變成兩行字的問題。
  • 2025.03.15 加入音效；各模組補充 JSDoc 缺漏的部份，解決 compile 的時候會出現的一堆警告訊息 ( 一整個寫程式的潔癖 XDDD )。
  • 2025.03.14 除蟲；可自動偵測是否為中文環境，language 為 zh 開頭者，就進行中文化；遊戲說明對話框右上角多一個叉叉按鈕，可以跳過說明。
閱讀全文
By at 沒有留言:
標籤: , , ,

2024年12月22日 星期日

Python: codecs read UnicodeDecodeError

2024年12月22日 星期日

 HTML5 FUN 的遊戲與工具大多是使用 LimeJS 開發的，LimeJS 其實已經停更快十年，連它依存的 Google Closure Library 也在 2024年8月封存。LimeJS 使用的 Closure Library 、Closure Compiler ...... 其實都是很舊的版本；像 compiler 最後是停在  20130411 的版本，這個舊版本，很多 JavaScript 新的語法它都不認得，當然，應該也存在不少臭蟲。

這幾天在測試，到底 LimeJS 在動得最少的狀況，Closure Library 和 Closure Compiler 可以使用到哪個較新一點的版本？都測試完以後，想讓 LimeJS 至少可以「活過來」，它目前下載原始專案的檔案，連安裝都會失敗。

以 Closure Library 來說，20170816 的版本是可以用的，但是它 build 工具 source.py (closure/bin/build/source.py) 遇到某些檔案會出現錯誤而卡住：

[圖1] Python codecs 讀取檔案失敗

上面最重要的訊息是：

UnicodeDecodeError: 'utf8' codec can't decode byte 0xa5 in position 3457: invalid start byte

查了一下，後來版本 Closure Library 的 source.py 中，用 codecs 來讀取檔案內容，而且指定使用「utf-8-sig」的編碼：

  fileobj = None
  try:
    fileobj = codecs.open(path, encoding='utf-8-sig')
    return fileobj.read()
  except IOError as error:
    err = True
    raise IOError('An error occurred opening or reading the file: %s. %s'
                  % (path, error))
  finally:
    if fileobj is not None:
      fileobj.close()

反覆地測試，查了半天，總算知道卡住的原因了。哈！就那麼巧，我的檔案中居然有好幾個是使用 big5 中文編碼的。Python 的 codecs ，一執行到 read 就出現錯誤，這個情形在舊版使用內建的 open 再 read ，並不會發生的。

解決這個錯誤的方法很簡單，就是先在程式中，先顯示檔名，然後就可以知道卡在哪一個檔案，將有問題的檔案以文字編輯器以 UTF-8 編碼來儲存即可。

有時思考真的不能太僵化，一開始我都懷疑是 Python 環境的問題，但是這一次是各種版本及系統都會發生，完全找錯方向了。

等都弄好以後，再將 LimeJS fork 一份並更新，實在怕哪一天什麼都沒有了，然後 HTML5 FUN 也跟著動不了了。

相關文章
閱讀全文
By at 沒有留言:
標籤: , ,

2023年6月7日 星期三

HTML5 : 青蛙過河

2023年6月7日 星期三

前兩天突然想到以前大型機台的「青蛙過河」，這真是經典中的經典，簡單又好玩。想到了，當然要做出來囉！不過並沒有打算設計得那麼複雜，就單純地過河就好。花了一整天，將河道弄好，加上青蛙的操控，最上再整合題庫的部份，兩天完成了九成，昨天為了處理音效的部份，又用掉了一整天，不過有新發現，滿值得。

[圖1] HTML5 青蛙過河的遊戲說明

目前 HTML5 青蛙過河按完遊說明的 [開始挑戰] 鈕後，畫面上方的草地上會出現題目，青蛙由畫面下方草地出發，跳到正確的答案上才安全，不然會落水、扣分，並由出發點重來；如果青蛙被河水帶到兩側看不到了，也會落水扣分。

如何控制青蛙？如果是用電腦，可以使用鍵盤方向鍵的上、下、左、右來控制青蛙跳的方向；鍵盤的空白鍵也可以讓青蛙往前跳；在草地上的四個箭頭跟鍵盤的方向鍵一樣是用來控制青蛙的方向；也可以按住青蛙，利用「手勢」的方式來操控：

  • 往前跳：按住青蛙往上滑後放開。
  • 往後跳：按住青蛙往下滑後放開。
  • 往右移動：按住青蛙往右滑後放開。
  • 往左移動：按住青蛙往左滑後放開。

[圖2] 青蛙移動的方式

青蛙連過三關，跳到上方的草地以後，就能得分。

[圖3] 跳到第一關的荷葉上
[圖4] 跳到第二關的荷葉上
[圖5] 跳到第三關的荷葉上
[圖6] 上岸得分

如果想試玩或是下載青蛙過河的範例題庫，可以在 HTML5 FUN 網站中找到：

玩一玩

HTML5 青蛙過河可以在 HTML5 FUN 網站中找到，只要按一下它的圖示，即可以試玩已建立好的範例題庫，HTML5 FUN 網站的網址如下：

HTML5 青蛙過河的圖示：

檔案內容

除了在 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 發布。
閱讀全文
By at 沒有留言:
標籤: , , ,

2023年5月31日 星期三

HTML5 : 足球高手與籃球高手

2023年5月31日 星期三
這一篇介紹文自 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 網站的網址

▋ 籃球高手的圖示

▋ 足球高手的圖示

▋ 直接試玩的連結

打造自己的遊戲

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_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 的題庫範例檔案。

相關連結

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

足球高手更新記錄

  • 2023.05.31 預載守門員的圖片，以免第一次動作會有延遲或是跳格的情形。
  • 2023.05.26 發布 .v1。
閱讀全文
By at 6 則留言:
標籤: , , , ,

2023年5月23日 星期二

HTML5 FUN : 數學小白板

2023年5月23日 星期二

HTML5 FUN 數學小白板是 2023年1月建立的一個實驗專案，主要是想做一個可以不斷擴充模組的數位學習工具。哈！當然還是那個壞習慣，沒日沒夜地衝了一陣子，因為又把時間花在別處，就擱著沒動了。隔了幾個月，這兩天又拿出來加了個骰子的模組，稍微整理一下目前的內容，記錄一下。

[圖1] HTML5 數學小白板

玩一玩

想立即體驗一下 HTML5 FUN 數學小白板的功能，就按底下的按鈕進入，有什麼心得或是建議，歡迎在本篇最下方旳留言處留言。

PLAY

物件簡介

HTML5 FUN 數學小白板中的物件，主要可以分為兩大類：

  • 容器：可以將一般物件拖曳到容器中，將物件加入容器通常會有特別的功能；將其它物件拖離容器的範圍後，物件就會由容器中移出。
  • 一般物件：除了運算的物件，大部份的物件都代表著某個數值。一般物件可以拿來進行計算。

目前 HTML5 FUN 數學小白板可用的物件簡介如下：

小白板

小白板元件是一個「容器」(圖2)，我們可以將其它的物件拖曳到「小白板」上，如果有「等號」的物件，「小白板」下方會多一個「送出算式」的按鈕，按下這個按鈕，「小白板」會計算並檢驗等號、大於、小於等物件左、右兩側的數值是否符合算式或比較式。

[圖2] 具有驗證算式功能的小白板容器

數值天平

數值天平是一個「容器」(圖3)，我們可以將帶有「數值」的物件拖曳到天平的秤盤上疊在一起，天平可以依數值大小的改變而作反應。


[圖3] 可互動的數值天平

分數條

它是一個「容器」，可以將分數條拖曳到分數條中，就能進行多個分數的比較，可以應用在等值分數的學習中。拖曳分數條的「小三角」，可以改變著色的範圍。如果對準分數條「長按」，會出現設定的選單，設定分割的方式及顏色等選項。

運算子物件

運算子物件可以應用在表達計算式中；對著運算子物件長按不放，即可出現設定的選單。

整數物件

數數物件用來代表某個物件上數字的數值；對著物件長按不放，即可出現設定的選單，調整它的數值。

數字型分數物件

數字型分數物件用來顯示真分數或是帶分數；對著物件長按不放，即可出現設定的選單，調整它的數值。

圖形式分數物件

圖形式分數物件有圖形、直條、橫條三種圖形，用來表示真分數。對準分數圖形的某一分割區按一下，可以著色，或是取消著色。對著物件長按不放，即可出現設定的選單，可以選擇圖形形狀，設定圖形大小，調整它的數值，甚至複製圖形。

骰子物件

骰子物件上的點數就代表它的數值，如果按一下，它就會重新取得新的數值。

五格板

五格板中可以加入其它元件，如果將一個五格板加入另一個五格板中，它們就會合在一起，變成十格板；再加一個五格板就變成15格板......以此類推。

如果在五格板的格子中按一下，它會填入一個前一次使用的元件，預設是紅色的圓圈；長按的話，會出現要填入的元件選項，可以選擇填一個，或是填滿空格。

圓圈及圖示元件

這個元件可以是單色實心的圓圈，或是小圖示；加好的只要再長按，即可更換。目前無論是圓圈或是圖示，它們代表的數值都是１。

時鐘元件

時鐘元件以圖形指針式時鐘為主，可以加上數字型的文字框在中間；如果設定為自動模式，會跟著系統時間走，手動模式則可以拖曳指針來設定要顯示的時間。時鐘元件的介紹請參考這一則：

遮簾元件

遮簾元件如果拖曳四個角落可以設定尺寸大小，按一下中央則可以打開遮簾或是放下遮簾。

塗鴉工具

塗鴉工具在畫面的右側，按一下淡紫色的開關即可展開或是收合。工具展開時，就可以使用裡面的選色器、畫筆、橡皮擦及清除所有塗鴉的小工具。塗鴉的內容會疊在所有元件的最上方，使用「分享」中的「下載圖片」時，也會包含塗鴉的內容；不過，使用「分享」中的 QRCode 及複製網址，則因為容量大小的限制，無法包括塗鴉內容哦！

使用與移除物件

要使用前述的那些容器，或是一般物件，都可以從畫面左側的「陳列區」中，拖曳進畫面中央；如果不想使用了，就將物件拖曳到畫面右下角的「回收區」中刪除。

如果想一次清除畫面中的所有物件，就長按右下角的「回收區」，會出現清除全部的對話框。

操作影片

相關連結

更新記錄

  • 2025.05.11 圖形分數可以自訂顏色。
  • 2024.04.17 QR Code API 改用 QuickChart。
  • 2023.12.13 時鐘加上雙色背景的舖色選項
  • 2023.12.06 時鐘的大刻度與數字改用時針的顏色
  • 2023.11.22 圖形分數著色的部份改為透明的，被按下的物件加入最上層物件群前，先將其它有同樣設定的清除，以免混亂。
  • 2023.11.01 塗鴉支援多點觸控，可多個人同時塗鴉
  • 2023.10.22 jsurl 解碼前先檢查參數是否被 escape 過, 有的話就先 unescape 。
  • 2023.10.15 時鐘的三支指針都可以單獨隱藏；如果只剩時針時，只會顯示12大格的刻度；只剩一支指針時，拖曳指針畫出的旋轉角不會有箭頭，拖曳指針端點才會有箭頭；解決時鐘旋轉角及指針是否隱藏的設定未匯出的問題。
  • 2023.10.03 QR code 改用類似短網址的機置，會將元件資料儲存到試算表中，並取得一個 ID，用來製作 QR code，學生掃瞄完 QR code 後，會以 ID 查詢試算表資料，取得元件的設定並呈現在載具中，以上類似短網址的機置；老師在看到 QR code 時，同時在剪貼簿中會自動複製一份完整的網址(非短網址)；基本上每一個載具在當次只會使用到試算表的一列，如果使用量過大(試算表能儲存四萬列)，再加入自動刪除舊資料的功能。
  • 2023.09.24 解決跨載具時座標計算基準不同的問題，原本都是使用螢幕座標，改用場景的座標，才不會因為瀏覽器對上方網址列及按鈕列是否包含在 innerHeight 而影響比例。
  • 2023.09.18 加入遮簾元件；解決分數、整數元件無法匯入的問題(主因是之前改了元件的設計，匯入的程序未修改到)。
  • 2023.09.13 右側加入塗鴉工具列，展開時，進入畫模式，可以使用畫筆，收合時恢復為一般模式。
  • 2023.09.07 加入時鐘的元件。
  • 2023.08.26 分享改用三項選單: 建立 QR code、複製網址、下載為圖片。 
  • 2023.08.25 可以建立多個分數牆；整數元件可以一次加減10或是加減100；小白板支援 >、<、>=、<= 和 = 的比較式；天平及小白板加入音效。
  • 2023.08.24 分享功能支擾分數條；天平如果兩邊有放東西，而且一樣重時，中央會亮綠色提示。
  • 2023.08.23 畫面右上角多一個分享的圖示，按下去以後可以分享當時的內容，網址會自動複製到剪貼簿，並顯示 QRCode。(註: 分享的功能目前暫不支援分數條)
  • 2023.05.22 加入骰子。
  • 2023.01.09 初稿。
閱讀全文
By at 5 則留言:
標籤: , , ,

2023年5月20日 星期六

HTML5 : Crossword 填字遊戲

2023年5月20日 星期六

平常很喜歡和小孩一起看公視的節目「一字千金」，2021年11月做了一個 HTML5 Crossword 填字遊戲，就是發想自節目中的成語遊戲遊戲「洞築機先」。 HTML5 筆順練習程式本來就已經有了畫國字部件的基礎，最複雜的隨機出題畫格子填字的部份則是在 Github 中找到了 Matt Johnson 的這個 Crossword-Generator 專案：

只稍微小小加一點料就能應用HTML5填字遊戲中了。不過程式雛形完成後，再也沒動過，連出題的說明文件都沒寫，就這麼放著。時值 2023年5月，HTML5 FUN 中的遊戲一個個地改版，支援 HTML5 FUN 烘焙機， HTML5 填字遊戲怎麼可以丟著不管，於是用了幾天，更改了題庫的格式，調整了程序，臭蟲也順便解決掉。本篇就來簡單地介紹這個 2021年末的「HTML5 填字遊戲」。

功能與特色

HTML5 填字遊戲在讀取設定檔中的題庫以後，會自動繪製帶有謎底的格子，一個格子放一個字，如果在格子上按一下(如圖2)，會出現輸出對話框等候使用者輸入該格子的答案(如圖3)；答對的話，格子會變成綠色，答對則會變成紅色。所有格子都答對的話，即完成一關；如果有多關，則可以進入下一關，繼續挑戰。玩的過程中，隨時可以按畫面右下角的問號切換成提示模式(如圖4)，再按一下帶有問號的格子(如圖5)，即可查看提示(如圖6)。

[圖1] HTML5 填字遊戲歡迎畫面

底下為輸入答案的截圖：

[圖2] 點選要輸入答案的格式
[圖3] 輸入篒案

作答時可以隨時查看提示：

[圖4] 按一下切換成提示模式
[圖5] 點選要查看提示的格子
[圖6] 查看提示


HTML5 填字遊戲有以下的功能與特色：

  • 可跨平臺使用：只要支援 HTML5 的瀏覽器就能玩。
  • 可自訂題庫：可以使用多個有部份字相同的中文語詞來出中文的填字遊戲，或是多個有部份字母相同的英文單字來出英文的填字遊戲。
  • 可自訂要遮蔽的中文字筆畫：謎底如果是在教育部筆順網中所包含的六千多個中文裡，可以下載到謎底的筆順，就可以將謎底中文字的部份筆畫遮蔽不顯示，增加遊戲的趣味與難度。
  • 可自訂每個謎題的提示。

玩玩看

HTML5 填字遊戲的程式與範例題庫，與其它 HTML5  FUN 的遊戲一樣，可以在 HTML5 FUN 的網站中找到，只要找到 HTML5 填字遊戲的圖示，即可玩玩範例題庫，或是下載打包好的遊戲壓縮檔案。HTML5 FUN 網站的網址與與連結如下：

本站中， HTML5 FUN 遊戲或工具的相關說明文件，全部都匯整在「雄 : HTML5 FUN 精選集」這份清單中：

打造自己的填字遊戲

玩 HTML5 填字遊戲的範例題庫一定是不過癮的，來打造自己的填字遊戲吧！

先來了解一下 HTML5 填字遊戲的題庫設定格式：

  • 每一題必須由多行組成。
  • 每一行就是一個詞語，必須至少有「謎底」、「提示」兩個欄位；欄位跟欄位之間，使用兩個井字號「##」當作欄位分隔符號。例如：
    • 兵家常事##很平常的事情。
  • 中文題則可以再加第三個欄位來指定字要顯示的筆畫（沒有指定筆畫，會以亂數自動選取）。例如：
    • 兵家常事##很平常的事情。##0;1-3;1-5;1-8
      • 上面的例子指定了四個字要顯示的筆畫：
      • 兵： 0 ，完全空白。
      • 家：1-3 ，顯示家的 1-3 畫。
      • 常：1-5，顯示常的 1-5 畫。
      • 事：1-8，顯示事的 1-8 畫。
  • 同一題的多行詞語，必須一行接一行，想結束該題，就在下一行填入「=====本題結束」。

是不是用任何字詞都能成功出題？

當然不是，這個遊戲的謎底跟謎底之間，一定要有字是一樣的，才能讓橫的謎底，跟直的謎底串接在一起。不然是無法變成題目的，所以要思考一下選用什麼謎題比較合適。

底下利用一些出題時的關鍵描述，可以使用 Bing Chat 或是 OpenAI ChatGPT 3.5 來幫忙出題：

你是一個中文老師。請選四個成語，不要自己創造，每個成語都四個字，第一個成語和第二個成語有一個字一樣，第二個成語的最後一個字當成第三個成語的一個字，第四個成語的一個字和第三個成語相同。請提供成語及其簡單解釋，格式如下：成語##解釋

來看看 Bing Chat 出的回應情形(圖7)：

[圖7] 以 Bing Chat 來出填字遊戲的題目

這是 Bing Chat 出的題目：

一心一意##專心致志,不分心
一意孤行##固執己見,不聽勸告
行雲流水##形容動作敏捷,不受拘束
水落石出##比喻事情的真相顯露出來

文字接龍向來是 ChatGPT 的長項，用這一類的 AI 輔助出題，只要在提示語再加一點點限制即可導出我們要的題目了。

好了！準備做一個自己的 HTML5 填字遊戲了嗎？

請按底下的圖示，打開「HTML5 FUN 遊戲式題庫烘焙機」，利用 HTML5 FUN 烘焙機，來打造自己的填字遊戲：


相關連結

更新記錄

  • 2025.02.20 清除題目顯示的臭蟲；最後一格答完，暫停 1.5 秒再顯示作答結果。
  • 2025.02.19 筆順資料改先由試算表抓, 輸入答案時，如果已是正解者在輸入區預填，否則出現空心問題的提示字。
  • 2023.05.20 筆順資料合併音檔路徑與部件設定(由本機檔案查詢)；題庫沒部件欄位者，先試著由筆順的部件設定中去掉一個，再沒有者就取三分之一筆畫。
  • 2023.05.19 在載入筆順資料後，稍微等一下下，以免筆順出不來。
  • 2023.05.17 支援 embed mode; 修改題庫格式，題目結束改以只有單欄的那行當標記；支援英文(非中文、沒有筆順)的題目。
  • 2021.11.21 解決 inputDialog 取消按鈕沒作用。
  • 2021.11.20 依視窗大小調整縮放比例；輸入答案棄 prompt 改用自訂的界面，以免計時器暫停；解決筆順繪製的 bug (改在 lime.CanvasContext 的 draw 中繪字)。
  • 2021.11.17 加入提示、計時器的功能。
  • 2021.11.15 草稿。
閱讀全文
By at 沒有留言:
標籤: , , ,

2023年5月15日 星期一

打造自己的遊戲 : HTML5 FUN 烘焙機大彙整

2023年5月15日 星期一

雄的 HTML5 FUN 網站提供了一些不用安裝，可以直接在網頁瀏覽器中使用的數位學具與教具，它們除了可以使用已建立好的題庫，還可以打造成自己的工具或是遊戲。

如果想試玩各個遊戲或工具，就到 HTML5 FUN 網站，網址如下：

如果想查看各個遊戲或工具的詳細說明，或是手動建立題庫的方法，請參考「HTML5 FUN 精選集」：

如果想製作可以放 Blogger (參考「雄 :在Blogger中放 HTML5 FUN 遊戲」)、Google Sites (參考「雄:在Google Sites放HTML5 FUN遊戲」)或其它網站的 HTML5 FUN 遊戲，就請繼續看下去，使用 HTML5 FUN 烘焙機來幫您打造自己的遊戲。

遊戲式題庫烘焙機 (HTML5 FUN Homepage)

什麼是「遊戲式題庫烘焙機 (HTML5 FUN Homepage)」？

這個「烘焙機」是我和好友江明勳老師經過一番討論後，幫 HTML5 FUN 遊戲製作工具所取的名稱 (「Homepage 烘焙雞」的聯想)。

HTML5 FUN 的遊戲題庫彈性其實可以很大，透過題庫設定，可以自訂題庫內容，打造自己的遊戲。為了方便大家能在網頁瀏覽器中即可設定，最後還能將遊戲放到網站中使用，無論是 Blog、Google Sites、Weebly 或是其它網站中，都可以使用 HTML5 FUN 烘焙機來製作嵌入的語法；甚至下載為單一遊戲網頁，打開來就可以在本機玩。

目前 HTML5 FUN 大部份可自訂題庫的遊戲都有支援烘焙機，打開烘焙機以後，即可看到已支援烘焙機的遊戲清單，並由清單中選取想製作的遊戲；有的遊戲還支援多種題庫設定範本，製作時可以參考範本，輕鬆設定。

HTML5 FUN 的烘焙機，只要三大步驟就可以製作嵌入網頁的HTML語法；貼入 Blogger 、Google Sites 或其它網頁中，即可分享、使用自製的 HTML5 FUN 遊戲。

製作 HTML5 FUN 的遊戲就是這麼簡單，讓我們馬上按底下的啟動按鈕，打開「HTML5 FUN 烘焙機」製作自己的 HTML5 FUN 遊戲吧！

相關連結
    閱讀全文
    By at 28 則留言:
    標籤: , , , , ,
    訂閱： 文章 (Atom)
     
    雄::gsyan © 2009. Design by Pocket