HTML5 : 對對碰烘焙機

HTML5 FUN 的對對碰是一個可以自訂題庫的翻牌小遊戲，牌面目前支援文字、圖片或是聲音；如果翻到同一組牌，就可加分，翻錯則扣分；牌組可以使用兩張不同的牌面(兩欄式題庫)，也可以使用相同的牌面(單欄式題庫)；遊戲的模式可設定為「蓋牌模式」，除了翻牌，還考記憶力。

HTML5 對對碰遊戲截圖

如果有興趣，可以在 HTML5 FUN 網站中玩玩「HTML5 對對碰」的範例題庫，網址如下：

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

HTML5 對對碰上一次較大的更新已是 2021年6月的事，詳情可以參考以下的舊文：

• 雄 : HTML5 : 對對碰

拖到 2023 年，HTML5 對對碰總算也支援「烘焙機」，可以使用 HTML5 FUN 的「烘焙機」(Blogger及網站嵌入語法產生器)，只要三大步驟即可製作嵌入網頁的 HTML語法，貼入 Blogger 、Google Sites 或網頁中，即可分享使用自製的「HTML5 : 對對碰」。

【備註】最新版的「烘焙機」將所有遊戲都整合在一起了，可以按這個連結前往：

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

按底下的按鈕，可打開「HTML5 對對碰烘焙機」(已停止更新)來製作自己的 HTML5 對對碰遊戲：(舊版已停用)

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} 題庫及設定】

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

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

相關連結

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

• 雄 : HTML5 : 對對碰

• 雄 : HTML5 FUN 精選集