2022年11月22日 星期二

HTML5 : 我說你猜 : 比手畫腳

2022年11月22日 星期二

我說你猜,你說我猜;比一比,猜一猜;大家一起來比手畫腳。

比手畫腳很多人都玩過,朋友推了 TheEllenShow 頻道中的這部影片給我看:

利用平板或手機的陀螺儀(動作及方向感應器)來「翻牌」,滿方便的。2012年曾經研究過怎樣以 HTML5 加上陀螺儀來控制遊戲中的角色移動,哈!十年過去,只能重新研究,也因此,HTML5 FUN 的「 我說你猜」上線囉!

HTML5 Charades 成績報告畫面

HTML5 Charades 計時器選單畫面

特色與功能

「HTML5 我說你猜」有以下的功能與特色:

  • 以支援 HTML5 的瀏覽器來開啟頁面,即可使用,跨載具、跨平臺,不需要安裝。
  • 可以自訂題庫、每回合計時秒數及其它客製化的參數內容。
  • 手機、平板有陀螺儀,如果啟用感應器,目前會偵測裝置「垂直」、「往前傾」和「往後躺」三個動作,用來啟動、翻牌和表示「正確」「跳過」。
  • 在沒有動作及方向感器的電腦也可以玩,翻牌改以畫面中的按鈕操作。
  • 電腦支援「快速按鍵」預設以方向鍵右來按「正確」、「重玩」,方向鍵左來按「跳過」、「選單」,及方向鍵上下來捲動作答結果清單。(2022.11.23 明勳老師建議)
  • 有預覽題目的功能,在選定題庫後,顯示所有題目的內容,可以讓老師與學生事先討論遊戲策略。(2022.11.24 明勳老師建議)
  • 可匯入預先製作好的題庫檔案。
  • 支援語法產生器,可以將自製的遊戲嵌入 Blogger、Goolge Sites 或其它網站網頁中。

試玩與下載

「HTML5 我說你猜」可以在 HTML5 FUN 網站中找到,可以試玩,或是下載打包好的程式及範例題庫;也可以使用本文章後面的「語法產器」來改題目,立即玩或是製作語法,放入自己的網站中。

HTML5 FUN 的網址如下:

「HTML5 我說你猜」的圖示是:

HTML5 我說你猜的圖示

找到圖示,按下去,即可玩範例題庫;覺得不過癮,就參考下一小節的說明,來自製遊戲吧!

自製遊戲

如果想製作自己的遊戲題目,又想利用手機、平板的動作偵測來控制遊戲的進行,建議使用本文章中的「語法產器」來輸入題庫,並製作語法,再將遊戲放到 Blogger 、Google Sites 或是其它有支援合法「HTTPS」的(經認證過的)網站。主要是因為較新的手機、平板系統(尤其是 iOS 12 以後),對「動作及方向感應器」的啟用,基於安全的理由,有網站的限制。

按一下底下的按鈕,即可打開「語法產生器」,透過三大步驟,來更換自己的題庫,並利用「其它選項」,來做一些客製化的設定。試玩沒問題,最後就能按按鈕,輸出自製遊戲的嵌入語法。


Q&A

底下將一些可能會遇的問題列出來:

  • Q:快速按鍵可以自訂嗎?
    • A:當然可以自訂快速按鍵;利用「語法產生器」中,「設定其它參數」裡的「正確時的快速按鍵名稱」和「跳過時的快速按鍵名稱」即可設定。可用的按鍵的名稱可以由主設定檔「charades_set.js 」中的「keyCodes」找到。
  • Q:為什麼無法啟用感應器?
    • A:較新的系統,像 iOS 13 以後,遊戲必須放在支援 HTTPS 的網站中才能使用感應器。
    • A:如果前一次的啟用不是按「允許」,瀏覽器會記住設定,即使按了「重新整理」也沒有用,必須要先關閉瀏覽器,重新再打開瀏覽器,才能再次設定是否允許使用感應器。
  • Q:題庫可以不要選單嗎?
    • A:可以的,有兩種方式讓遊戲跳過題目選單。
      方法1:如果題庫設定中,只有一個牌組,也就是只有一行題目,就不會出現選單。
      方法2:參考範例題庫設定檔「question-set-2.js」在題庫設定中,每一行只放一個題目,都不加任何欄位分隔符號(預設為兩個井字號),這樣子,程式會自動將每一行合成一個牌組,不用打任何分隔符號,是不是比較方便!

相關連結

更新記錄

  • 2022.11.25 v.0.8 增加匯入題庫檔的功能,可以將預先製作好的題庫載入使用。
  • 2022.11.25 v.0.7 單行題庫時,未去掉第一欄的問題解決;新增 preview_col_number 的參數,用來自訂預覽時要以幾欄的方式呈現所有題目。
  • 2022.11.24 v.0.6 加入「預覽題目」的功能,如果啟用預覽,在選完題目後,會顯示所有的題目,並有 1~5 分鐘倒數計時後,自動進入該回合遊戲。
  • 2022.11.23 v.0.5 調整感應器啟用的程序,並提供更多錯誤訊息;加入快速按鍵的功能,供電腦操作。
  • 2022.11.22 程式發布。
  • 2022.11.20 HTML5 FUN charades 專案新建。 


沒有留言:

張貼留言

 
雄::gsyan © 2009. Design by Pocket