HTML5 : PK 大賽

之前設計的小遊戲都是一個人玩的較多，即使像 TeamPlay 雖然設計上是兩人搶答，還是受限於作業系統只支援單點操作，可能會發生搶滑鼠觸發事件的情形而互相干擾彼此的操作。最近在研究 HTML5 ，而 iPad 支援多點同時操作，假日天氣又溼又冷，只能窩在家裡，突然閃過一個四個人圍在一台 iPad 同時玩遊戲的畫面，於是「PK 大賽」花了二天的時間寫好了。

如果照原始構想，四個人各據 iPad 小小的一角，要玩什麼遊戲呢？

先從兩人玩的 PK 賽著手。剛開始只想弄一個可以讓我們家女兒一起玩的認數字遊戲，後來變成了九九乘法的二人 PK 賽。有了雛形，想再變化成別的題庫也容易了。

samples/sample-4.js 範例題庫的畫面

功能簡介

• 以 HTML5 開發，在 Chrome、Safari 和 Firefox 上測試過， iPad 如果「加入主畫面螢幕」，可以離線使用。
• 可用平板電腦、電子白板的觸控或一般電腦的滑鼠、鍵盤操作。
• 可自訂出題的範圍、題數及要使用的鍵盤按鍵。
• 可顯示文字、圖片，其中文字的部份支援直式注音的顯示及數學分數的顯示。

使用方法

HTML5 PK 大賽是 HTML5 FUN 網站中的一個遊戲，網站的網址如下：

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

找到 PK 大賽的圖示，按下去就可以開始玩已建立的題庫。

或是直接以支援 HTML5 的瀏覽器 ( Chrome、Safari、Firefox ...... ) 開啟下面的連結，即可開始玩：

• PK 大賽

以 Wiimote 電子白板 + IR 槌玩 PK 大賽

離線使用與更新

在 iPad 上只要將 PK大賽「加入主畫面」後，並執行過一次，之後在網路斷線狀態下仍可以離線使用 PK 大賽。而且如果在網路連線狀態使用，一啟動程式，它就會先檢查是否有更新的檔案，有的話，會自動下載更新資料。「加入主畫面」的程序類似底下的畫面

1.開啟PK大賽的頁面以後，按一下「分享」的圖示。

2.按一下「加入主畫面」的圖示。

3.接著可以修改名稱，修改完或不想修改就按「新增」。

新增以後，應該可以在主畫面中看到多出PK大戰的圖示。試用看看吧！

設定檔

如果想要自訂出題的範圍或是重新指定鍵盤與選項的對應關係，可以先下載 PK 大賽的 html5_pk.zip 檔案，將檔案解壓縮以後，以類似 Windows 裡記事本的文字編輯軟體來修改裡面的設定檔「pk_set.js」。修改完，儲存好檔案以後，直接以電腦中的瀏覽器開啟「 html5_pk.html」 來啟動程式。如果是要給 iPad 離線使用，則必須將所有檔案上載到自己的網路空間後再連線使用。

底下是設定檔中的參數說明：

• questionsToAnswer：一回合要出多少題目。
• timesTables：出題時，被乘數可使用的數字清單。
• scoreToAdd：答對時加多少分，答對錯扣多少分。
• key_map[0]：PLAYER 1 的選項使用哪些鍵盤按鍵。按鍵代碼可以參考設定檔後面的定義。
• key_map[1]：PLAYER 2 的選項使用哪些鍵盤按鍵。按鍵代碼可以參考設定檔後面的定義。

檔案下載

• html5_pk.zip (2023.05.08 更新)

相關連結

• 雄 : HTML5 FUN 精選集

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

• HTML5 : PK2 四人競賽

• 雄 : HTML5 : PK 大賽自訂題庫

• 雄 : HTML5 : PK 大賽自訂題庫《進階》

• 雄 : Apps Script : PK 遊戲題庫產生器

• 雄 : VBA : PK 遊戲題庫產生器

• 相關噗文：http://www.plurk.com/p/hof25i

更新記錄

• 2023.05.08 支援「HTML5 FUN 烘焙機」，可以線上製作遊戲、產生可嵌入網站的語法。
• 2019.11.19 加入可面對面 PK 的遊戲模式。
• 2018.02.07 .a1 版，讓文字式的題目及選項可以自動調整字的大小至最佳。
• 2012.12.12 數學題庫因為程式裡的 bugs 造成不能載入題庫，已修正；讓自訂題庫的部份可以更自由，現在可以自訂欄位分隔符號，只要指定對了，不限用分號及逗號來當分隔符號。
• 2012.12.11 加入顯示圖片的功能，可以在題幹或選項中顯示圖片；除掉了一些小臭蟲，調整了國字加注音字的大小及字距，以免純注音的字太小。samples 中新增 sample-4.js ，展示較特殊的語法。
• 2012.12.08 陸陸續續又更新了不少回，重要的記錄一下：可以自訂題庫；可顯示選單；支援語文高手題庫產生器產生的語法，可以顯示直式的注音；支援顯示數學的「分數」；將得分改為顯示已向上爬了多少格。
• 2012.11.20 加入鍵盤選答的功能。
• 2012.11.19 修改出題方式。
• 2012.11.18 修正按鈕未鎖定的亂象及動畫。
• 2012.11.17 第一版。