HTML5 : 我說你猜 : 比手畫腳

我說你猜，你說我猜；比一比，猜一猜；大家一起來比手畫腳。

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

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

HTML5 Charades 成績報告畫面

HTML5 Charades 計時器選單畫面

特色與功能

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

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

試玩與下載

教學上要如何應用，可以參考這一篇記錄：

• 雄:有說有笑(效)：HTML5 我說你猜教學應用

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

HTML5 FUN 的網址如下：

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

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

HTML5 我說你猜的圖示

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

自製遊戲

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

按一下底下的按鈕，即可打開「HTML5 FUN 烘焙機」，啟動烘焙機以後，只要透過三大步驟，來更換自己的題庫，並利用「其它選項」，來做一些客製化的設定。試玩沒問題，最後就能按按鈕，輸出自製遊戲的嵌入語法。

最新版的烘焙機請按這裡：

• 打造自己的遊戲 : HTML5 FUN 烘焙機大彙整(最新版烘焙機)

1.改

2.玩

3.剪貼

Let's go ～～

步驟 1

雄:HTML5 FUN:自訂題庫設定

1-1 輸入題庫

• 題庫內容一行一牌組
• 兩個井字號「##」為「欄位分隔符號」。
• 第一欄為牌組名稱(選單上的名稱)。
• 第二欄起牌面上的內容

底下有兩種題庫的編輯器
您可以在圖形化編輯器或是原始碼輸入區中
填入自己的題庫內容：

圖形化題庫編輯器

1. ######

題庫原始碼：

1-2 設定其它參數

按這裡展開並設定其它選項

以上為主要的設定
其它更多的參數，請在複製原始碼貼到您自己的Blogger(HTML檢視)之後，再自行設定。

步驟 2

按底下的按鈕試玩
(進入遊戲畫面後，按右上角的小叉叉可以再回到語法產生器)

步驟 3

會員限定的遊戲代碼(可省略，空白表示任何人均可玩)

 

是否要嵌入 Google Sites
(勾選 : Google Sites 專用的語法 ； 未勾選 :使用一般語法)

 應用於 Google Sites

 將遊戲開啟在獨立的視窗

是否要嵌入 ClassroomScreen
(勾選 : ClassroomScreen 專用的語法 ； 未勾選 :使用一般語法)

 應用於 ClassroomScreen

可以將底下合併後的原始碼貼到Blogger(HTML檢視)

---

1. 在輸入區將題目修改為自己想用的。
2. 按底下的【查看合併後的原始碼-自動複製到剪貼簿】，複製合併後的原始碼。
3. 進入Blogger建立新文章。
4. 輸入「標題」。
5. 文章編輯工具最左邊的切換為 <>「HTML檢視」。
6. 貼上複製的原始碼。
7. 發布測試。
8. 沒問題就可以編輯文章，自訂題庫。

---

請依需求按一下底下的功能選項:

【查看 ${caption} 題庫及設定】

【查看載入程序的原始碼】

【查看合併後的原始碼-自動複製到剪貼簿】

Q&A

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

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

相關連結

• 雄:有說有笑(效)：HTML5 我說你猜教學應用

• 江明勳老師:嘰哩呱啦ACE (2代):第1914回-師生互動數位輔具-我說你猜：比手畫腳

• 江明勳老師:第1915回-師生互動數位輔具-我說你猜：比手畫腳-2-三分鐘學會出題

• 雄 : HTML5 FUN 精選集

• 雄 : 打造自己的遊戲 : HTML5 FUN 烘焙機大彙整(最新版烘焙機)

更新記錄

• 2023.09.22 題庫內容新增支援圖片，所以可用純文字、純圖片或是文字加圖片來當作卡片的內容。
• 2023.09.21 遊戲結束時，停止鍵盤的監聽，以免因為連續按下一題，誤按了重玩的功能，造成成績報告被跳過，需要重玩或是回選單的功能，就以按畫面中的按鈕來執行。
• 2023.08.18 v1.1 修改分數頁面的重玩、選單按鈕在畫面出來後兩秒才能按，以免因為連續按正確或跳過時有誤觸的情形，以致看不到答題分數及記錄。
• 2023.08.17 v1.0 題庫支援國字加直式注音的格式。
• 2023.07.04 v.0.9 題庫的設定如果某行沒有內容，會造成題庫解析錯誤而陷入無窮迴圈，問題已解決。
• 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 專案新建。