HTML5 : 對對碰

我的 Flash 版對對碰 match 是 2009 年的作品，後續還有一個 2010年的 Flahs 版 match2；HTML5 版則是 2014年完成雛形，之後則沒什麼大變動。本次有了 HTML5 戳戳樂的基礎，將 HTML5 對對碰做了大幅的增強。它目前具有以下的功能：

• 工具箱有按鈕可更換蓋牌模式的切換。
• 工具箱有按鈕可控制左上角編號的顯示。
• 利用內建的題庫及設定編輯器，可立即修改遊戲內容，套用或匯出設定檔。
• 題庫支援文字或圖片。(2023年4月後的版本，支援聲音題及國字加注音的文字題)
• 題庫每題可以是兩欄式，提供一組兩項內容；或是單欄式，以一個內容來製作兩張一樣的牌。(2023年4月後的版本，每題都可支援任意張數，而且每題可不一樣)
• 一張卡片可設定多個內容後，讓程式用亂數取用。(2023年4月後的版本)
• 格子自動計算最佳的大小及格數，題目不足時，以空格補缺。
• 利用選單設定檔可以製作多組題目的選單。
• 可以利用網址列的參數 menufilename 來指定要開啟的選單設定檔。
• 可以利用網址列的參數 filename 來指定要開啟的題庫設定檔。

HTML5 對對碰

試玩與下載

對對碰可以在 HTML5 FUN 網站中試玩及下載打包好的檔案，網址如下：

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

打造自己的遊戲

如果想要快速地線上製作自己的 HTML5 對對碰遊戲，建議可以試試看 HTML5 FUN 烘焙機(可製作遊戲或是下載題庫設定檔)：

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

遊戲模式

對對碰的牌面上可以是文字或是圖片，在玩的時候要找出「成對」的牌，找到了就加分，錯了則會扣分，並復位繼續。

另外，提供「蓋牌」的模式，也就是玩家在所有牌出現時，要在設定的時間內先記住牌的位置及內容，記憶時間到了，所有的牌都會翻面覆蓋，才能開始翻牌湊對。

兩張牌怎樣「成對」是由題庫來設定，在設定檔中，題庫一題一行，牌面的內容則可以分為兩種：

• 兩張牌面內容不同：如果要放兩張不同內容的牌配成對，就將兩張牌的內容寫在同一行，並以欄位分隔符號(預設為兩個半形井字號「##」)置於中間區隔，也就是將一行分為兩欄，為「兩欄式題庫」。
• 兩張牌面內容相同：一行題目中，如果沒有出現欄位分隔符號(預設為兩個半形井字號「##」)，程式會認定該題為「單欄式題庫」，該組牌是使用相同的內容。

註：2023.04 起的版本可以支援超過兩張牌的配對。

選單設定與修改

因為 HTML5 對對碰有提供選單的功能，程式啟動以後，會去找選單設定檔，然後依設定產生選單供使用者點選要進入的題庫。選單設定檔的檔名是：

match_menu_set.js

如果您沒有選單的需求，可以將上述的選單設定檔改檔名，或是將它換個資料夾存放；程式如果無法載入選單設定時，它會繼續找預設的題庫設定檔「match_set.js」來載入裡面的題庫。建議您直接跳到下一個主題即可。

HTML5 對對碰的選單

如果您想使用選單，供使用者由多個題庫中選一個來玩，可以參考底下的說明，以純文字編輯器開啟 match_menu_set.js 來修改。

選單設定檔中只能設定標題跟各選項對應的設定檔檔名，範例中的內容：

menu_title='TPET 對對碰選單';
menu_items = new Array(
  '不蓋牌,match_set.js'
, '記憶大考驗,match_set_memory.js'
, '九九乘法,match_set_9x9.js'
);

在 menu_items 那行底下的，就是選單項目的設定。在每一組單引號裡面放的就是一個選單項目，選單的名稱和對應到的遊戲設定檔檔名之間，以欄位分隔符號「半形的逗號」分隔。

所以照上面的設定，選單畫面會有三個選項：

• 按下「不蓋牌」這個選項時，程式會載入「match_set.js」中的題庫來玩。
• 按下「記憶大考驗」這個選項時，程式會載入「match_set_memory.js」中的題庫來玩。
• 按下「九九乘法」這個選項時，程式會載入「match_set_9x9.js」中的題庫來玩。

題庫設定與修改

想要修改 HTML5 對對碰的題庫或設定，可以使用純文字編輯器來修改預設的設定檔，設定檔的檔名為：

match_set.js

檔案裡可以自訂的參數不少，請自行參考裡面註解的說明(兩個斜線開頭的為註解)，改了，測試了，重新載入就可以看出效果在哪裡，所以不一一說明。

題庫設定檔中，最重要的當然是題庫的部份(參數名稱為 questionLines)。遊戲中成對的牌組會放在同一行，如果是兩張不同內容的牌組，製作題庫時，以欄位分隔符號(預設為兩個半形井字號「##」)分隔兩張牌的內容；如果想製作兩張相同內容的題型，就只要放一個內容，不需要加分隔符號。

例如內建的題庫檔案 match_set.js 的題庫部份如下(註: 以下為 2023.04.24 起，題庫的新格式)：

questionLines = function(){/*--這一行請勿更改--
CAT##samples/cat.png
CHICKEN##samples/chicken.png
COW##samples/cow.png
DOG##samples/dog.png
HORSE##samples/horse.png
MONKEY##samples/monkey.png
-----*/}.toString().replace(/\r/g,"").slice("function(){/*--這一行請勿更改--".length+1,-9);

上面的範例中，題庫設定參數「questionLines」是由六道題目(一道題目一行，總共六行)所組成的，以第一道題目來說：

CAT##samples/cat.png

這道題目因為有使用到兩個半形井字號「##」(欄位分隔符號)分隔，題目被分為兩欄，會製作成兩張內容不同的牌組：

• CAT : 是文字，表示第一張牌的牌面是放文字。
• samples/cat.png：是 .png 圖檔的檔名(放在 samples資料夾中)，表示第二張牌的牌面是放圖片。

這個設定檔中的另外五題也是同樣的格式。

再來看看另一個設定檔 match_set_memory.js 中的題庫部份是這樣設定的：

questionLines = function(){/*--這一行請勿更改--
samples/cat.png
samples/chicken.png
samples/cow.png
samples/dog.png
samples/horse.png
samples/monkey.png
-----*/}.toString().replace(/\r/g,"").slice("function(){/*--這一行請勿更改--".length+1,-9);

這個設定檔中的題庫設定參數「questionLines」中，一樣的有六行的內容，表示有六道題目。但是跟前一個檔案中的六道題目有何不同呢？

我們可以發現六道題目中，都有沒出現欄位分隔符號「##」，所以這六道題庫都是屬於「單欄式題庫」，每道題目，程式會製作兩張一模一樣的牌卡，玩的時候，就是要玩家找出相同牌來配對。

直接在對對碰中改題目

對對碰有內建題庫及設定編輯器，所以也可以直接利用 HTML5 對對碰內建的題庫編輯器來修改正在玩的遊戲設定；不過還是建議使用最新版的「烘焙機」來設計遊戲，以下為舊的資料，僅供參考。

在內建的編輯器中，所有的設定一目了然，圖片題也可以用拖曳的方式來新增。操作的程序如下：

進入 HTML5 對對碰以後，在選單中選取要修改設定的遊戲，進入遊戲以後，就可以進行修改的程序。

進入遊戲以後，先打開工具箱，點選HTML5對對碰左下角的藍色箭頭

點左下角打開工具箱

按一下工具箱中「輸入」的按鈕，開啟題庫設計編輯器:

按輸入鈕開啟題庫編輯器

進入題庫內容編輯器以後，畫面上的是目前的題庫，你可以依需要自行修改:

修改題庫

需要注意的是：

• 一行一道題目。
• 圖片可以輸入對對碰資料夾已有的圖片檔的路徑。
• 圖片也可以直接用檔案總管拖曳進對對碰的編輯器中央。
• 如果兩張內容不同，中間用分隔符號來分成兩欄。

如果需要自訂其它選項，就點選編輯器右上角的「其它設定」

修改其它設定

都完成修改以後，可以按「套用」鈕開始測試；或是按編輯畫面左下角的匯出圖示，將題庫及設定儲存起來。

匯出設定檔

按對對碰編輯器左下角的匯出圖示後，可以將設定儲在起，而儲存起來的設定檔要怎麼讓它在下次啟動對對碰時能夠使用呢？

• 首先，要先在 HTML5 FUN 中下載對對碰的壓縮檔，解壓縮以後，會有一個名稱為 html5_match 的資料夾。
• 將前面製作並儲存好的設定檔，放入自己的對對碰資料夾 html5_match 中，將裡面的原有設定檔案覆蓋。
• 開啟 html5_match 資料夾中的 html5_match.html 來測試置換過的設定檔。

此部份和 HTML5 戳戳樂是類似的，可以參考之前錄的影片示範：

當然囉！進階使用，也可以將設定檔的檔名重新命名，改得和對對碰資料夾中已有的設定檔不同，然後在選單設定檔 match_menu_set.js 中加入新的選單項目。

進階使用：跳過選單直開遊戲

前面提過，如果對對碰程式找不到選單設定檔時，會跳過選單，直接開啟預設的題庫檔 match_set.js，所以不想用選單，就將選單設定檔改檔名或是搬走。

另外，我們也可以在網址列中，指定 filename 來開啟指定的題庫設定檔。比較一下底下兩個網址：

1. https://gsyan888.github.io/html5_fun/html5_match/html5_match.html
2. https://gsyan888.github.io/html5_fun/html5_match/html5_match.html?filename=match_set_9x9.js

這兩個網址只差在尾巴，第二個多了：

?filename=match_set_9x9.js

多了這個，程式知道 filename 的內容是 match_set_9x9.js，也是就指定要開啟 match_set_9x9.js來當題庫，並跳過選單。

相關文章

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

• 雄 : HTML5 : 對對碰烘焙機(舊版)

• 雄 : HTML5 FUN 精選集

• 雄 : Flash : Match2 對對碰

• 雄 : Teaching : 對對碰 Flash 小遊戲題庫解析

• 雄 : HTML5 : Poke 戳戳樂

更新記錄

• 2024.03.07 .v4 修改卡片配對的演算法，翻出的卡片，只要找到任一題目匹配的，即完成該牌組，最後如果剩下的牌找不到任何題目可匹配了，即為殘局，結束遊戲。
• 2023.05.05 .v3n 卡片背景顏色色碼 card_back_color 可以設多個(用逗號分隔)，如果色碼大於等於欄位數，表示不同欄位要使用不同顏色。
• 2023.04.30 .v3k 在下方加入「使用 Google TTS」的按鈕；調整加注音時換行計算式。
• 2023.04.30 .v3j 一張卡片可設定多個內容讓程式用亂數取用(以 fields_seperator2 分隔)
• 2023.04.29 .v3i 自動載入注音符號字型檔；題目可使用國字+注音。
• 2023.04.28 .v3g 題目的牌組每題可以使用任意張數的牌。
• 2023.04.27 .v3d 支援聲音的題庫；聲音可使用 .tts 的方式指定使用 TTS 發音，例如「cat.tts」就會使用 TTS 來合成「cat」的語音；[輸入] 加入 tts_language 的變數；TTS 改先試 speechSynthesis API, 不支援的才使用 Google TTS。
• 2023.04.26 .v3c 修改 embed 的執行流程，跳過載入選單設定檔的部份，減少因為無法載入選單設定所產生錯誤訊息。
• 2023.04.26 .v3b 修正在 embed 時，字型路徑有誤而無法載入字型檔的問題。
• 2023.04.26 .v3a 預設會載入英文字型 "EngTRESS A" (EngTRESS font 為教育部九年一貫英語組輔導群製作) ，檔案在 assets/eng-tress-a.woff。
• 2023.04.24 .v3 加入可嵌入 blog、Google Sites 或其它網站的功能(烘焙機)；將題庫格式改為和 HTML5 FUN 格式類似，題庫可使用 questionLines 的格式，範例設定都改為新的格式。
• 2021.06.12 .v2 除蟲:跳過選單的，右下角還出現回主選單的圖示。
• 2021.06.12 .v1 將程式碼精簡，加入工具箱，可以即時設定蓋牌模式、顯示編號；可以即時修改題庫、設定並匯出設定檔；可以利用網址列來設定選單設定檔檔名(menufilename)或題庫設定檔檔名(filename)；如果選單載入失敗，會試著載入預設的題庫設定檔 match_set.js；加入翻牌時的音效；自動計算牌的張數；支援單欄式題庫。
• 2020.11.09 增加可以換字體的參數 font。
• 2019.04.27 ?
• 2014.05.27 HTML5 初版