實現遊戲控制機制

案例研究

我們將以 Captain Rogers: Battle at Andromeda 演示 作為示例。

Captain Rogers 是使用 Phaser 框架建立的，該框架是目前最流行的 JavaScript 簡單 2D 遊戲開發工具。但如果你在純 JavaScript 或任何其他框架中構建遊戲，應該很容易重用這些文章中的知識。如果你正在尋找 Phaser 的入門教程，可以檢視 使用 Phaser 構建的 2D breakout 遊戲 教程。

在接下來的文章中，我們將展示如何為 Captain Rogers 實現各種不同的控制機制，以支援不同的平臺——從移動裝置的觸控，到桌面裝置的鍵盤/滑鼠/遊戲手柄，再到更不尋常的控制方式，如電視遙控器、對著筆記型電腦喊叫或揮手，或者擠壓香蕉。

設定環境

讓我們從快速概覽遊戲資料夾結構、JavaScript 檔案和遊戲內狀態開始，以便我們瞭解各個部分的功能。遊戲資料夾如下所示：

如你所見，有用於圖片、JavaScript 檔案、字型和聲音效果的資料夾。src 資料夾包含 JavaScript 檔案，這些檔案被拆分為不同的狀態 — Boot.js、Preloader.js、MainMenu.js 和 Game.js — 它們按照此確切順序載入到 index 檔案中。第一個檔案初始化 Phaser，第二個檔案預載入所有資源，第三個檔案控制歡迎玩家的主選單，第四個檔案控制實際的遊戲玩法。

每個狀態都有自己的預設方法：preload()、create() 和 update()。第一個用於預載入所需的資源，create() 在狀態開始後執行一次，而 update() 在每一幀執行。

例如，你可以在 create() 函式中定義一個按鈕：

function create() {
  // …
  const buttonEnclave = this.add.button(
    10,
    10,
    "logo-enclave",
    this.clickEnclave,
    this,
  );
  // …
}

它將在遊戲開始時建立一次，並在被點選時執行分配給它的 this.clickEnclave() 操作。但你也可以在 update() 函式中使用滑鼠指標值來執行操作：

function update() {
  // …
  if (this.game.input.mousePointer.isDown) {
    // do something
  }
  // …
}

這將在每次按下滑鼠按鈕時執行，並在每一幀中與輸入項的 isDown 布林變數進行檢查。

這應該讓你對專案結構有所瞭解。我們主要會處理 MainMenu.js 和 Game.js 檔案，並在後續文章中更詳細地解釋 create() 和 update() 方法中的程式碼。

純 JavaScript 演示

還有一個 小型線上演示，其完整的原始碼 可在 GitHub 上找到，其中使用純 JavaScript 實現了一些文章中描述的控制機制的基本支援。這些內容將在下文的文章中解釋，但你可以立即試玩，並根據需要使用程式碼進行學習。

文章

由於 HTML 真正實現了跨平臺性，JavaScript 是移動遊戲開發的理想選擇；以下所有文章都側重於用於與不同控制機制互動的 API。

1. 移動觸控控制元件 — 第一篇文章將從觸控開始，因為移動優先的方法非常受歡迎。
2. 桌面滑鼠和鍵盤控制元件 — 在桌面/筆記型電腦上玩遊戲時，提供鍵盤和滑鼠控制元件對於保證遊戲的可接受的可訪問性至關重要。
3. 桌面遊戲手柄控制元件 — Gamepad API 非常方便地允許使用遊戲手柄來控制桌面/筆記型電腦上的 Web 應用程式，以獲得類似遊戲機的體驗。
4. 非常規控制元件 — 最後一篇文章展示了一些非常規的控制機制，從實驗性的到略顯瘋狂的，你可能難以置信它們也可以用來玩遊戲。