休闲移动游戏的市场正在与不断增长的智能手机市场保持同步。有一些 Web 工具可以帮助像你这样的 Web 开发人员构建与原生游戏竞争的游戏。你需要出色地执行才能从人群中脱颖而出 - 正确使用 JavaScript API 可以提供帮助。对于游戏开发，你需要了解设备方向 API 和振动 API。

Cyber Orb

Cyber Orb 是一个使用 Phaser 框架创建的简单 HTML5 游戏演示。

我对 Phaser 感兴趣，因为它是一个移动游戏框架，速度快，针对各种移动设备进行了优化，易于使用，此外还有庞大的 Phaser 社区。该框架是开源的，并在 GitHub 上可用，我的 Cyber Orb 演示的 源代码 也是如此。

Phaser 简介 是我撰写的一篇 MDN 文章，它将引导你完成使用 Phaser 构建移动游戏的基本步骤。它展示了设备方向和振动 API 的实际应用 - 以及它们是如何实现的。

使用框架

我使用 Phaser 框架来创建游戏，因为从头开始编码会花费更多时间和精力。Phaser 处理了枯燥且必要的步骤，例如加载资产、在屏幕上操作图像或管理用户输入。它可以帮助你专注于游戏代码和游戏机制，这样你就不用担心浏览器实现之间的差异。以控制为例。在从头开始创建的游戏中，你需要编写类似于以下代码来实现键盘控制

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
    if(e.keyCode == 37) { // left cursor key
        leftPressed = true;
    }
    else if(e.keyCode == 39) { // right cursor key
        rightPressed = true;
    }
}
function keyUpHandler(e) {
    if(e.keyCode == 37) {
        leftPressed = false;
    }
    else if(e.keyCode == 39) {
        rightPressed = false;
    }
}

需要键向上和键向下的事件监听器 - keydown 用于知道何时按下键，keyup 用于管理释放键的情况。你必须记住每个键盘按钮的 keyCode - 例如，左光标键是 37。然后，在主游戏循环中，你可以执行以下操作

if(leftPressed) {
    // move the ball left
}

与其从头开始执行所有操作并记住键代码，不如将其留给 Phaser

this.keys = this.game.input.keyboard.createCursorKeys();

然后

if(this.keys.left.isDown) {
    // move the ball left
}

代码也显得更加简洁明了。

桌面与移动

虽然我们将在本文中重点关注移动设备，但建议首先为桌面构建控制。如果你在桌面上的代码编辑器和浏览器中构建游戏，你可以快速对其进行测试。然后，使用渐进增强方法，可以在桌面控制之上添加移动控制，并使用设备方向 API 查看移动设备上的游戏体验有何不同。

设备方向

设备方向 API 规范仍处于工作草案状态，因此将来可能会引入一些破坏性代码变更。这是一项实验性技术，应谨慎对待。所有实现都仍然缺少 compassneedscalibration 事件。此外，浏览器实现之间存在差异，应予以考虑。例如，Chrome 和 Opera 不支持 devicemotion 事件。

要在游戏中使用设备方向 API，你必须添加对 deviceorientation 事件的监听器

window.addEventListener("deviceorientation", this.handleOrientation, true);

然后，所有操作都在 handleOrientation 函数中完成

handleOrientation: function(e) {
    var z = e.alpha;
    var y = e.beta;
    var x = e.gamma;
    Ball._player.body.velocity.x += x;
    Ball._player.body.velocity.y += y;
}

你可以从传递的对象中提取三个变量：alpha、beta 和 gamma。

var z = e.alpha;
var y = e.beta;
var x = e.gamma;

这三个属性包含设备在三维空间中的方向。我们对最后两个属性感兴趣，它们用于控制球体的左右和上下移动。第一个，alpha 变量可用于确定球体的上下移动，使其跳跃。这些值的范围不同：alpha 的范围为 0 到 360，beta 的范围为 -180 到 180，gamma 的范围为 -90 到 90。

在游戏中可以使用这些值，我们可以使用最后两行代码在屏幕上移动球体

Ball._player.body.velocity.x += x;
Ball._player.body.velocity.y += y;

就是这样 - 你可以使用设备方向事件来控制游戏，并可以通过倾斜和移动手机来玩游戏。此 API 可以为游戏增添额外的响应感，并为玩家提供更丰富的体验。

浏览器支持

设备方向 API 在 Firefox 6、Chrome 7、Opera 27 和 Internet Explorer 11 上支持桌面，在 Firefox Mobile 6、Android 3 和 Safari Mobile 4.2 上支持移动设备。

临近事件 API

此外，还有 临近事件 API，如果移动设备中提供临近传感器，则可以在游戏中使用它。这是一个实验性 API，但可以作为你已使用的 API 的有趣补充。API 的实现基于两个事件：deviceproximity 和 userproximity。第一个事件提供了设备与物体之间的距离的基于值的描述（value 以厘米为单位），而第二个事件提供了基于布尔的描述（near 属性根据距离为 true 或 false）。以下是一个示例

window.addEventListener('deviceproximity', function(event) {
    if(event.value < 20) {
        // something is closer than 20 centimeters to the sensor, make action
    }
});

window.addEventListener('userproximity', function(event) {
    if(event.near) {
        // something is near the sensor, perform action
    }
});

它可以用于在通话时关闭屏幕，这样当你将手机靠近耳朵时就不会错误地按下任何东西。在游戏中，它可以作为一种有趣的方式来控制游戏 - 等同于轻触操作。

浏览器支持

临近事件 API 仅在 Firefox 中受支持，但 W3C 文档状态为候选推荐，因此其他浏览器供应商可以毫无问题地实现它。

振动 API

振动 API 是另一个可以提升移动体验的功能。大多数设备都支持它（iOS Safari 和 Opera Mini 除外），并且在 Firefox OS 设备上运行良好。

使用振动 API 比使用设备方向 API 更容易 - 你所要做的就是检查 window.navigator.vibrate 函数是否可用，如果可用，则使用它

if("vibrate" in window.navigator) {
    window.navigator.vibrate(100);
}

传递给该函数的参数只有一个 - 振动持续时间。你还可以传递值数组，而不是传递一个值，从而多次振动，例如

window.navigator.vibrate([1000,2000,1000]);

这将使手机振动 1 秒（1000 毫秒），等待 2 秒，然后再次振动 1 秒。如果你想在某个时刻关闭振动，可以将 0 或 [] 作为参数传递

window.navigator.vibrate(0);

这将停止任何实际或将来的振动。

浏览器支持

振动 API 处于提议推荐状态，它在 Firefox 16（从版本 11 开始使用 moz 前缀）、Chrome（使用 webkit 前缀）以及最近的 Opera（从版本 27 开始）上支持桌面，在 Firefox Mobile 11（moz）和 Android（webkit）上支持移动设备。

总结

如你所见，使用这些 API 很简单，但它们可以丰富游戏体验。移动游戏体验不同于桌面体验，你可以利用这一点。游戏可以在没有这些附加功能的情况下运行，但是当实现新的 API 时，它会感觉好很多。

你可以 派生 Cyber Orb 演示 并 自行试玩。它很容易扩展，你可以添加额外的功能并构建一个完整的游戏。如果你在使用 Phaser 框架时需要帮助，可以访问 HTML5 Gamedevs 论坛 并联系社区。此外，还有一个 HTML5 游戏开发入门 列表，其中包含指向各种资源的链接，以及由我运营的 Gamedev.js 每周通讯，其中包含每周游戏开发新闻和资源。

MDN 和知识共享

作为一名开发人员，我已经多次使用 Mozilla 开发人员网络 来寻找编码问题的答案，并且通常能找到答案。MDN 是一个巨大的知识库，但它不必只有一种工作方式 - 它不是只读的。你可以轻松地回馈并与他人分享你的知识和经验。你可以写一些你擅长的内容，以便其他人需要时可以找到它。知识共享是关键，也是我们社区如此友好的原因。