2013年12月17日 星期二

HTML5 : PK2 四人競賽

2013年12月17日 星期二

去年(2012年)就想設計一個可以四個人一起比賽的程式,後來以 HTML5 先設計了一個名為「PK大賽」的兩人競賽工具。一年過去,為了實現最原始的想法,構思了好幾天,遲遲未動手,真的是「坐而言,不如起而行。」,停留在腦袋想想,就是想想而已,想了 N 天,一行程式也沒生出來,一但在電腦前動手後,一個晚上雛形就出來了。哈!將一年前的程式再度拿出來看,發現了好幾個有問題的地方,也順便將原來東拼西湊的部份整理整理。本來以為只要拿去年的程式小改一下即可變四人玩的新程式,結果是重寫了一大半。不過經過這次的模組化後,開發新的程式應該可以更方便。

PK2」的最大特色是可以同時四個人競賽,為了達到這個目的,主要針對帶有觸控螢幕的平板電腦而設計。無論是 iPad 、 Android 與 Windows ,四個人圍著一臺平板電腦,各據一方後,就可以開始競賽。

底下提供一個試玩的連結,只要以支援 HTML5 的瀏覽器(現在平板電腦內建的瀏覽器應該都支援) 打開連結,就可以開始 PK 囉!

如何玩呢?

進入遊戲,選定要競賽的題庫以後,玩家各自選擇一個方向就位。當所有玩家都按了「GO」的按鈕,或是玩家不足四位就想立即開始做答,可以按一下正中央「開始」的大按鈕。好了就會倒數三秒,倒數完畢,題目就會出現。


等待玩家的畫面
競賽開始的畫面

當玩家答對題目時,即可獲得一顆藍色的鑽石,答錯時則會扣一顆鑽石;最後看誰先獲得所需的鑽石即可得一分,最後看誰的積分最高。

程式特色

基本上,除了最多可以支援到四個人同時玩以外,PK2 和「PK大賽」是差不多的:

  • 以 LimeJS 及 HTML5 開發,因此可以跨平臺使用。
  • 如果存放檔案的主機支援,可以離線使用,並自動更新,此部份可以參考之前整理的「HTML5 : CACHE MANIFEST 離線使用與快取」。
    在 iPad 上則可以用「加入主畫面」新增到桌面並離線使用。 
  • 可以自訂題庫。

自訂題庫

PK2 和去年的「PK大賽」一樣,只要將檔案下載到自己的電腦,利用文字編輯軟體即可自己編寫設定檔,將選單及題庫都換成自訂的內容。而且「PK大賽」與「PK2」所使用的題庫格式是一模一樣的,可以通用。

程式的設定、題庫的格式和編寫,有需要的就參考去年的幾篇文章吧!

檔案下載

更新記錄

  • 2023.06.10 h0 在畫面左下角多一個按鈕,按下後可產生進行中遊戲的 QRCode 的對話框,並將網址複製到剪鉆簿中。
  • 2023.05.06 .g8 出題時,將用不到的選項位置移除。
  • 2022.11.10 .g5 修正語文高手題庫的題幹未將答案的部份去掉;修正已進入倒時計時,又再重覆呼叫的問題;支援篏入Blogger及網頁;新增加法、減法(一位數及兩位數)的題庫,共六個自動出題題庫。
  • 2018.02.07 .g4 版,讓文字式的題目及選項可以自動調整字的大小至最佳。
  • 2014.02.23 .g3 版,修正同時獲勝會無法繼續玩的臭蟲。
  • 2014.02.18 修改一回合結束的畫面,改將競賽結果呈現在各個 player 的作答區,讓每個玩家都看得到,將回主選單的按鈕取消,只留一個會自動旋轉的 "繼續" 按鈕。將載點改至 GDrive。
  • 2013.12.17 將載點改至 Dropbox
  • 2013.12.16 在右下角加入回主選單的小圖示及功能,修正音效播放的小問題。
  • 2013.12.14 加入音效。
  • 2013.12.13 修正圖片題目未正確調整比例, cache.manifest 錯放設定,無法離線使用的問題。
  • 2013.12.12 第一版


7 則留言:

  1. 老師您好:
    我的選項用圖,無法占滿圓圈,是否有長寬高限制,煩請解答。

    回覆刪除
  2. 親愛的雄老師:

    非常感謝您的幫忙,檔案已經順利下載,講義也編寫完畢。
    期待跟其他老師分享!

    回覆刪除
  3. 雄老師,謝謝您的分享,我碰上這個問題,麻煩您看看好嗎?謝謝。
    https://www.dropbox.com/s/ptisqnfenyipa2y/Pic1.png?dl=0

    回覆刪除
  4. 老師請問
    這些有趣的小遊戲,在上線上課時,如何分享給孩子們線上競賽

    回覆刪除
  5. 您好:
    如果是遊戲, 當初都不是針對網路應用而設計的。

    回覆刪除

 
雄::gsyan © 2009. Design by Pocket