使用 JavaScript 创建简单的 Windows 8 游戏：第 3 部分 – 游戏逻辑
5.00/5 (4投票s)
这是本系列文章的第三篇，将向您展示如何创建一个（非常）简单的 Windows 8 游戏。
欢迎访问 Chris Bowen 的博客：http://blogs.msdn.com/cbowen
创建简单的 Windows 8 游戏系列
- 使用 JavaScript 创建简单的 Windows 8 游戏：第 1 部分 – Windows 8 应用基础
- 使用 JavaScript 创建简单的 Windows 8 游戏：第 2 部分 – 游戏基础知识与 CreateJS/EaselJS
- 使用 JavaScript 创建简单的 Windows 8 游戏：第 3 部分 – 游戏逻辑
- 使用 JavaScript 创建简单的 Windows 8 游戏：第 4 部分 – 输入与声音
这是本系列文章的第三篇，将向您展示如何创建一个（非常）简单的 Windows 8 游戏。我们将使用 HTML5、JavaScript、WinJS 以及来自 CreateJS 的一些有用库。
- 第 1 部分 – Windows 8 应用基础知识
- 第 2 部分 – 游戏基础知识与 CreateJS/EaselJS
- 第 3 部分 – 游戏逻辑
- 第 4 部分 – 输入与声音
该游戏基于 XNA 示例游戏 “投石机大战实验室”。我们将在开发基于 Web 技术的 Windows 8 新版本时重复使用该游戏中的资源。
在本文中，我们将通过一些游戏逻辑和 JavaScript 让游戏“活”起来。
游戏循环
任何游戏的“心跳”都是游戏循环。它是一个每秒运行多次的函数，有两个主要任务——更新当前发生的事情，然后绘制新场景。
在第 2 部分中，我们已经搭建了框架。
现在的问题是，我们如何启动 gameLoop() 函数，并让它每秒运行多次？
EaselJS Ticker 类
幸运的是，EaselJS 有一个 Ticker 类，它具有一些我们将要使用的功能：
- 管理游戏循环的计时
- 暂停/恢复游戏循环
- 测量经过的时间
它是一个静态类，所以我们可以直接开始使用它。在 default.js 中，添加一个新的 startGame() 函数，并在 prepareGame() 的末尾调用它。
在这里，我们指示 Ticker 使用 window.requestAnimationFrame 来控制 gameLoop 函数的调用频率。
requestAnimationFrame 是一个相对较新的 Web 应用程序 API，它有助于确保不会不必要地进行工作。要了解为什么这比设置固定计时器（例如使用 setTimeout()）更好，请参阅 IE Test Drive 网站上的 requestAnimationFrame 示例。
每次 RequestAnimationFrame 准备好时，我们的游戏循环就会运行。
“准备，瞄准，开火！”
好了，现在我们有一个带有运行游戏循环的游戏了，是时候添加一些乐趣了！
每个玩家/弹射器都将向对方发射弹药/石头。我们需要知道是否有炮弹正在飞行，现在是轮到谁，以及炮弹的移动方式。
首先，让我们向 default.js 添加更多变量：
现在让我们使用其中的一些变量，将以下内容添加到 update() 函数中：
目前，两个玩家在各自的回合会自动发射（以随机速度）。弹药位图被移动到发射弹射器的顶部中心，并且 shotVelocity 被赋予一个在边界范围内的随机值（根据屏幕分辨率进行调整）。
我们还将添加一个 fireShot() 函数来显示炮弹并告知游戏它正在空中飞行。
更新显示
在我们将炮弹移动到空中之前，让我们专注于游戏循环方程的第二部分——绘制到屏幕。这通常可能非常复杂，但 EaselJS Stage 负责绘制我们的内容（添加到 Stage 的所有子对象——位图、文本等），所以我们只需要这样做：
就是这样！ 如果您运行游戏，玩家 1 将自动开火，炮弹将出现在红色弹射器上方……
……但它不会移动。让我们开始移动吧。
移动炮弹
让我们回到 update() 函数，并向 if (shotIsFlying) 语句添加逻辑：
暂时不要运行它，我们仍然需要两个函数，但这是它的作用：
- 第 149 和 150 行 – 通过添加速度来移动炮弹（速度可以是负数，表示向上和/或向左移动）
- 第 151 行 – 应用重力来减缓速度
- 第 153-155 行 – 炮弹是否击中地面或飞出屏幕的左侧或右侧边缘？
- 第 157-160 行 – 未命中——结束炮弹并切换玩家。
- 第 162-168 行 – 玩家 1 的炮弹——检查是否击中玩家 2。如果是，则更新玩家 2 的生命值。
- 第 169-175 行 – 玩家 2 的炮弹——检查是否击中玩家 1。如果是，则更新玩家 1 的生命值。
让我们添加 checkHit(Bitmap) 函数：
这是关于 hitTest 的说法？ EaselJS 的 DisplayObject（Bitmap 是基于它的）支持 hitTest() 方法，这使得查看一个点是否在当前对象的上方非常容易。不幸的是，我们在缩放对象，而 hitTest 只对原始尺寸有效，所以我们需要自己检查碰撞。只需一点数学计算就可以完成。
处理碰撞
现在，添加 processHit() 函数：
这只是结束炮弹，切换玩家，并确保游戏没有结束。
结束游戏
让我们通过结束游戏来结束本篇文章。添加 endgame(Image) 函数：
就是这样！ 现在您可以运行游戏，看看谁会赢。
下一步是什么？
我们在这一部分添加了很多内容——绘制、移动、碰撞、结束……但还有两个明显的缺陷。首先，玩家实际上并没有**玩**，所以接下来我们将添加输入处理。其次，游戏非常安静，特别是对于一场战争来说，所以我们也会添加一些声音。
继续第 4 部分！