瀏覽器中的程式設計遊戲

程式設計遊戲屬於電腦遊戲，就是讓多個程式互相競爭。這種遊戲有哪些基本需求？又要如何在瀏覽器中執行呢？用 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 的區域。

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

最後的程式碼如下所示：

// - worker1.js -
// makeMove() calulates the next move
 
onmessage = function (event) {
  var success = event.data.success;
  var direction = makeMove(success);
  postMessage({
    direction: direction
  });
};
 
// - main program -
// makeMoveWorker1() executes the move
 
var worker1 = new Worker('worker1.js');
worker1.onmessage = function(event) {
  var direction = event.data.direction;
  var success = makeMoveWorker1(direction);
  worker1.postMessage({
    success: success
  });
};

現在就開始遊戲：

// analogously for a second worker
 
woker1.postMessage({ 
  success: true
});

立刻就能開戰了。

可到 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