实现游戏控制机制
HTML5 作为游戏开发平台的主要优势之一是能够在各种平台和设备上运行。简化跨设备差异会带来多种挑战，特别是在为不同环境提供适当的控制方面。在本系列文章中，我们将向您展示如何构建可以在触摸屏智能手机、鼠标和键盘以及游戏手柄等不太常见的机制上玩的游戏。
案例研究
我们将使用 Captain Rogers: Battle at Andromeda 演示 作为示例。
Captain Rogers 是使用 Phaser 框架创建的，Phaser 是目前 JavaScript 中最流行的简单 2D 游戏开发工具，但应该很容易在使用纯 JavaScript 或任何其他框架构建游戏时重用这些文章中包含的知识。如果您正在寻找 Phaser 的良好入门，那么请查看 使用 Phaser 的 2D 打砖块游戏 教程。
在接下来的文章中，我们将展示如何为 Captain Rogers 实现各种不同的控制机制，以支持不同的平台 - 从移动设备上的触控，到桌面上的键盘/鼠标/游戏手柄，再到更非传统的控制机制，比如电视遥控器、对着笔记本电脑喊话或挥手，或者捏香蕉。
设置环境
让我们从快速概述游戏的文件夹结构、JavaScript 文件和游戏内状态开始，这样我们就知道各个部分的用途。游戏的文件夹结构如下所示：
如您所见，这里有图像、JavaScript 文件、字体和音效的文件夹。src 文件夹包含 JavaScript 文件，这些文件被拆分为单独的状态 - Boot.js、Preloader.js、MainMenu.js 和 Game.js - 这些文件按此顺序加载到索引文件中。第一个文件初始化 Phaser，第二个文件预加载所有资产，第三个文件控制欢迎玩家的主菜单，第四个文件控制实际的游戏玩法。
每个状态都有自己的默认方法：preload()、create() 和 update()。第一个方法用于预加载所需的资产，create() 在状态启动后执行一次，update() 在每一帧执行。
例如，您可以在 create() 函数中定义一个按钮：
create() {
// …
const buttonEnclave = this.add.button(10, 10, 'logo-enclave', this.clickEnclave, this);
// …
}
该按钮将在游戏开始时创建一次，并在点击时执行分配给它的 this.clickEnclave() 操作，但您也可以在 update() 函数中使用鼠标的指针值来执行操作：
update() {
// …
if (this.game.input.mousePointer.isDown) {
// do something
}
// …
}
这将在每次按下鼠标按钮时执行，并且将在游戏的每一帧中针对输入的 isDown 布尔变量进行检查。
这应该让您对项目结构有所了解。我们将主要使用 MainMenu.js 和 Game.js 文件，并在后面的文章中更详细地解释 create() 和 update() 方法中的代码。
纯 JavaScript 演示
还有一个 小型在线演示，包含完整的源代码，可以在 GitHub 上获取，其中实现了文章中描述的控制机制的基本支持。将在以下文章中进行解释，但您现在就可以玩它，并将代码用于学习目的。