瀏覽器中的程式設計遊戲

程式設計遊戲屬於電腦遊戲,就是讓多個程式互相競爭。這種遊戲有哪些基本需求?又要如何在瀏覽器中執行呢?用 JavaScript 嗎?

四項基本要件

要讓程式互相競爭有四項基本要件:

  1. 必須獨立於主程式之外執行。
  2. 必須先定義與主程式溝通的方式。
  3. 必須平行執行。主程式與各小程式均互相平行執行。
  4. 必須能輕鬆植入至遊戲環境。

傳統的 JavaScript 雖然好用,但因為本來就是同步執行,所以無法隔離子程式。隨著時代演變,新版 JavaScript 現已具備更多功能。而 Web Workers 則是為了加快 JavaScript 的速度所設計,可於瀏覽器中執行繁重的計算作業,卻又不會影響使用者介面。還不只如此,Web Workers 更符合上述的程式設計遊戲的需求:可平行執行、可獨立於主程式之外執行、根據事件而和主程式溝通,且歸功於新的 File API,更可從用戶端植入程式。

WEB WORKER CONTEST

就這樣,要用 Web Workers 寫出程式設計遊戲實在很簡單。為了讓大家知道這個想法可行,我在 2014 年 5 月發表了 Web Workers 架構的簡易程式設計遊戲《WEB WORKER CONTEST》。實際遊戲只是簡易的數學問題:該如何完整跑遍 100×100 的方塊區域。玩家會隨機從任一點開始,並以簡單的上、下、左、右佔領 100×100 的區域。

game2

程式只能佔領空白的地方;也就是說,只要敵對程式佔領過的地方就無法再搶奪。而雙方均不知道佔領區塊的資訊,只會知道自己選擇的上下左右移動是否可行。所以 Web Worker 是透過 postMessage() 送出新的行動;並根據其接收的 onmessage() 事件判斷行動是否可行 (就是簡單的 truefalse)。主程式就正好相反:透過 onmessage() 接收行動並於方塊中移動,再以 postMessage() 傳送成功訊息。

最後的程式碼如下所示:

現在就開始遊戲:

立刻就能開戰了。

可到 GitHub 上取得完整程式碼

主要難題:平均分配運算時間

用 Web Workers 撰寫程式設計遊戲的主要困難之處,就是該如何平均分配兩邊 Web Workers 的運算時間。主要可分成兩個時間問題,即載入階段與遊戲階段的時間。

在開始遊戲之前,需先載入 (遠端或本端均可) 兩組 Web Workers;也就是必須等待 Web Workers 均完成載入才行。可惜 Web Workers 並沒有適用的 onload 事件。當然,我們可以在剛開始讓主程式送出「are-you-ready」訊息至執行的程式,等雙方程式均確認此訊息之後再開始遊戲。

在一般情況下,機器分配給遊戲的運算資源不受主程式所控制;因此可能某一方可行動之前,另一方就已經偷跑。對瀏覽器引擎與作業系統來說,要讓雙方處於對等的狀態就已經是一大難題。另外也有可能由一方連續觸發 postMessage (使用迴圈) 而阻擋另一方。為了避免這類作弊情形,主程式將配合成功資訊一併送出隨機識別碼。任一方進行下一步行動時,均必須重新傳送此識別碼 (否則即視為不符規定)。在此限制之下,就能有效的平均分配運算資源。

可至 YouTube 觀看更多影片

程式設計遊戲比賽

WEB WORKER CONTEST 還頗受歡迎,在四周內就有超過兩百名工程師提供七百個程式,努力要以最佳策略完整佔領方塊。

瀏覽器一樣可執行此程式設計遊戲。我們能透過 Web Worker 技術體現此遊戲。而且只要瀏覽器就能執行的遊戲,也就不需要安裝遊戲環境,勢必可吸引更多人加入。現在就到網站上撰寫程式碼,立刻測試並上傳吧!

 

 

原文連結:Programming games in the browser

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *