2012年11月23日 星期五

HTML5 : PK 大賽 (2012.12.12更新)

之前設計的小遊戲都是一個人玩的較多,即使像 TeamPlay 雖然設計上是兩人搶答,但受限於作業系統只支援單點操作,可能會發生搶滑鼠觸發事件的情形而互相干擾彼此的操作。最近在研究 HTML5 ,而 iPad 支援多點同時操作,假日天氣又溼又冷,只能窩在家裡,突然閃過一個四個人圍在一台 iPad 同時玩遊戲的畫面,於是「PK 大賽」花了二天的時間寫好了。
如果照原始構想,四個人各據 iPad 小小的一角,要玩什麼遊戲呢?先從兩人玩的 PK 賽著手。剛開始只想弄一個可以讓我們家女兒一起玩的認數字遊戲,後來變成了九九乘法的二人 PK 賽。有了雛形,想再變化成別的題庫也容易了。
samples/sample-4.js 範例題庫的畫面


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

使用方法

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


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


離線使用與更新

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

  • 以 iPad 的 Safari 連到「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 的選項使用哪些鍵盤按鍵。按鍵代碼可以參考設定檔後面的定義。

檔案下載



相關連結

更新記錄
  • 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 第一版。



4 則留言:

  1. 雄老師,
    想請問一下,可以玩一半不玩,而希望再重新回到主頁面嗎?

    馬志芳

    回覆刪除
    回覆
    1. 馬老師您好:
      哈!我比較暴力,都是用 Reload 的。

      刪除
    2. 雄老師
      了解了,謝謝!會轉告老師們.

      刪除
  2. 雄老師謝謝您,
    有你我們真幸福:) 來取經了!

    回覆刪除

 
© 2009. Design by Pocket