使用 JavaScript 创建简单的 Windows 8 游戏：第 4 部分 – 输入与声音
4.92/5 (8投票s)
这是我们将要展示的系列文章中的第四篇，它将教你创建一个（非常）简单的 Windows 8 游戏。
创建简单的 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 的有用库。
该游戏基于 XNA 示例游戏 “投石机大战实验室”。我们将在开发基于 Web 技术的 Windows 8 新版本时重复使用该游戏中的资源。
在本篇文章中，我们将响应用户输入，并通过添加声音让游戏更有趣。
处理用户输入
当然，我们有很多方法可以实现瞄准射击——随机、基于时间、基于精确度（例如，“点击……现在！”）——但在这个例子中，我们将让用户画一条线来指示方向和速度。
首先，让我们在 *default.js* 文件顶部附近添加新变量
Windows 8 支持多种绘图方式——鼠标、触摸、笔——我们的游戏需要足够灵活，以支持用户使用的任何一种。幸运的是，MSPointer 系统将所有这些支持整合到了一个里面。我们将使用 MSPointerDown/Up 来开始和结束瞄准，以及 MSPointerMove 来在用户调整瞄准时提供反馈。
顺便说一句，MSGesture 也提供了出色的支持，用于检测手势，如点击、双击等。处理输入和手势的一个很好的例子是 MSDN 上的 “BallInEight”示例。
这些事件通过指向监听函数来使用，当它们触发时会被调用。现在我们就来处理这个问题，在 initialize() 函数的顶部附近添加
现在轮到函数本身了（随便放在哪里，但我放在了 update() 和 fireShot() 之间）
请注意这里留了一个练习。为了简单起见，我在 adjustAim() 函数中省略了显示瞄准百分比的文本和/或绘制瞄准箭头。去试试添加它们吧——从前面的部分，我们已经使用了你需要用到的完全相同的技术。
以及一个帮助我们计算瞄准的函数
同样，简单是关键，这只是针对玩家 1 的，但这是正在发生的事情
- 第 239-241 行 – 从起点到终点的距离创建一个新的 Point。将其缩放到一个适合每帧/更新的速度。
- 第 242 和 244 行 – 确保 x 和 y 的值有限制，这样射击就不会因为速度太快而直接消失在屏幕外。
- 第 243 和 245 行 – 确保射击是朝向敌人的……大概是这样。
我们之前在 update() 中添加了一些临时代码，让玩家 1 总是随机射击。现在我们可以用新的 aimVector 来替换它。
现在去运行游戏吧……
现在你可以使用鼠标、笔或触摸来控制射击了！
“我一定是听错了！”——添加声音
直到我们有了声音，游戏开发者的工作才算完成。我们已经在 第二部分 添加了声音文件，所以让我们通过加载它们来迈出下一步。
首先，在 default.js 文件中添加一些变量，以保持整洁
回想一下第二部分，我们是否已经配置好了 PreloadJS 来确保我们的资源在游戏开始时就准备就绪？我们可以用同样的方法处理声音，所以让我们把它们添加到清单中。
要使用这些文件，我们将创建 HTML 音频元素的实例。长话短说，如果你只为每个声音文件创建一个音频实例，你可能会遇到音频剪辑的问题，因为一个声音播放未完成，而同一个实例又开始播放另一个。有很多方法可以解决这个问题（例如，请参阅 “HTML5 音频和 JavaScript 控制”），但我们将采用简单而“低效”的方法，即每次播放声音时使用一个实例。
请注意，在这个例子中我们不会使用 SoundJS（CreateJS 的另一个部分），但当然，你也可以随意尝试！
添加 playSound(file) 辅助函数
就是这样！现在我们只需要调用它，指定指向正确文件的常量。我们将把它放在几个地方。
首先，在 fireShot() 中添加一个调用：
现在，processHit()
正如注释所说，如果你想让炮塔需要多次命中才能摧毁，你可以使用“Hit”声音而不是“Explode”声音。
最后，在 endGame() 中播放结束赢或输的声音。
去运行一下游戏，试试看。
游戏开始……然后继续……然后继续……
恭喜！你已经制作了一个游戏！
我们在这些文章中涵盖了很多内容，但就像任何事情一样，还有很多其他事情可以尝试。为什么不尝试其中的一些呢？
- 屏幕调整——纵向/横向，并排/填充。学习 CSS 媒体查询的好机会！
- 改进触摸/手势支持
- 精灵/动画——命中/未命中，炮塔后拉/发射，炮塔被摧毁
- 游戏动态——添加风，新场景，新炮塔功能/升级，弹药选择等。
- 在背景中添加山和移动的云（资产已经到位）
- 为目前非常“人工智能”的智能添加一些“智能”
- 考虑使用动态磁贴——也许显示玩家的 last/high score？
- 下载 Catapult Wars 扩展包，并着手处理其中一些想法——生命值条，2 个玩家，角度，瞄准，补给和滚动！
尽情享受！期待听到你添加的那些令人惊叹的新东西！