2021年6月12日 星期六

HTML5 : 對對碰

2021年6月12日 星期六

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

  • 工具箱有按鈕可更換蓋牌模式的切換。
  • 工具箱有按鈕可控制左上角編號的顯示。
  • 利用內建的題庫及設定編輯器,可立即修改遊戲內容,套用或匯出設定檔。
  • 題庫支援文字或圖片。
  • 題庫每題可以是兩欄式,提供一組兩項內容;或是單欄式,以一個內容來製作兩張一樣的牌。
  • 格子自動計算最佳的大小及格數,題目不足時,以空格補缺。
  • 利用選單設定檔可以製作多組題目的選單。
  • 可以利用網址列的參數 menufilename 來指定要開啟的選單設定檔。
  • 可以利用網址列的參數 filename 來指定要開啟的題庫設定檔。

HTML5 對對碰

可以在 HTML5 FUN 網站中試玩及下載打包好的檔案:


遊戲模式

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

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

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

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


選單設定與修改

因為 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


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

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

例如內建的題庫檔案 match_set.js 的題庫部份如下:


cards = new Array(
//------------------------------------下一行開始增加題目
  'CAT,samples/cat.png'
, 'CHICKEN,samples/chicken.png'
, 'COW,samples/cow.png'
, 'DOG,samples/dog.png'
, 'HORSE,samples/horse.png'
, 'MONKEY,samples/monkey.png'
//------------------------------------題庫結束,以下請勿修改
);


上面的範例中,cards 是由六道題目所組成的,以第一道題目來說:


CAT,samples/cat.png


這道題目因為有使用到「逗號」(欄位分隔符號)分隔,題目被分為兩欄,會製作成兩張內容不同的牌組:

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

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

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


cards = new Array(
//------------------------------------下一行開始增加題目
  'samples/cat.png'
, 'samples/chicken.png'
, 'samples/cow.png'
, 'samples/dog.png'
, 'samples/horse.png'
, 'samples/monkey.png'
//------------------------------------題庫結束,以下請勿修改
);


這個設定檔中的題庫 cards 中,一樣的有六組單引號括住的內容,表示有六道題目。但是跟前一個檔案中的六道題目有何不同呢?

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

最簡單修改題庫的方法,當然是直接利用 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來當題庫,並跳過選單。


相關文章


更新記錄

  • 2021.06.12 .v2 除蟲:跳過選單的,右下角還出現回主選單的圖示。
  • 2021.06.12 .v1 將程式碼精簡,加入工具箱,可以即時設定蓋牌模式、顯示編號;可以即時修改題庫、設定並匯出設定檔;可以利用網址列來設定選單設定檔檔名(menufilename)或題庫設定檔檔名(filename);如果選單載入失敗,會試著載入預設的題庫設定檔 match_set.js;加入翻牌時的音效;自動計算牌的張數;支援單欄式題庫。
  • 2020.11.09 增加可以換字體的參數 font。
  • 2019.04.27 ?
  • 2014.05.27 HTML5 初版


4 意見:

YOYO寶貝班 提到...

老師,使用您的檔案很久了,一直都很喜歡,目前這個對對碰更新後,是否就無法指定每一頁面出現的配對量了呢?(題目越多,圖面和文字會被壓縮得月小),以前可以指定單頁面一次指出現6個圖片或語詞,可以維持圖片較大~~~

提到...

您好:
本次的改版主要是為了能線上即時改題庫, 簡化出題的方式, 因此將設定的參數減到最少。原來的出題方式, 題目可以多出畫面所需要的, 再以亂數抽出需要的題數; 現在的模式則將題庫的題目通通顯示在畫面上; 因此, 建議您, 題庫只放您頁面中要顯示的就好, 這樣就不會太小。

YOYO寶貝班 提到...

老師,不好意思再跟您請教一下,如何才能像您的作品一樣,讓所有使用者(學生、家長),都能跨載具使用做好的題目呢?我嘗試將做好的放在google雲端,但是無法用正確的程式開啟,而且我不確定是否原先指定的路徑也會因此改變而失效......請賜教~~~

提到...

"YOYO寶貝班" 您好:
您得找一個「網頁空間」來放網頁、程式及其它檔案才可以讓別人用瀏覽器來載入並玩。我個人是使用 GitHub 的空間。
Google Drive 的空問能放檔案, 但是它不是網頁主機, 所以程式放在那個空間無法正常運作。
Google 有個 Firebase 的服務, 它有提供網頁的空間(Hosting), 我的筆順練習工具就是放在 Firebase 中; 不過 Firebase 跟 GitHub 得研究一下它的檔案管理機置, 稍有一點門檻。網路上或許還有其它免費的網頁空間,不過我現在都沒研究了,無法給您更進一步的建議。

張貼留言

 
© 2009. Design by Pocket