2012年11月23日 星期五

HTML5 : PK 大賽

2012年11月23日 星期五

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

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

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

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

功能簡介

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

使用方法

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

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

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


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

檔案下載

相關連結

更新記錄

  • 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 第一版。



13 則留言:

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

    馬志芳

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

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

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

    回覆刪除
  3. 老師 可以求適合小一的加減法嗎
    用Google題庫生成器跑出來之後 進入四人PK時出現以下的問題
    1.有的選項沒出現數字
    2.點了正確答案之後無法繼續進行
    不曉得提出這樣問題會太籠統嗎

    回覆刪除
    回覆
    1. 您好:
      可以將您的題庫寄給我, 我來幫忙看看問題在哪裡。
      gsyan888 (gmail 信箱)

      刪除
  4. 老師您好

    無法下載ㄝ

    在頁面也看不到分享

    回覆刪除
  5. 回覆
    1. 您好,
      您指的是本篇文章「檔案下載」中的「html5_pk.zip」嗎? 它都可以正常下載哦!

      刪除
  6. 老師:
    我可以更貪心的提出
    網路對戰嗎?
    想說讓學生在家也能和同學一起對戰^^

    回覆刪除
    回覆
    1. 您好,
      網路對戰這個構想十年前就有,但是因為需要有「即時傳資料」的伺服器來搭配才行,這種服務一般是需要額外付費,因此才會沒做。有空或許可以利用像戳戳樂遠端遙控器那樣,使用加大拿一家公司的實驗用服務,但不保證穩定可用。哈~ 只能等我心血來潮再來試試囉 ^_^

      刪除
    2. 或許可以試試看用免費的Firebase?

      刪除
    3. 您好,
      Google Firebase 我已用多年了,它的 real time database 簡單易用,但是免費的是有連線數及流量限制的。

      刪除

 
雄::gsyan © 2009. Design by Pocket