实现游戏控制机制

案例研究

我们将以 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. 非常规控件 — 最后一篇文章展示了一些非常规的控制机制，从实验性的到略显疯狂的，你可能难以置信它们也可以用来玩游戏。