使用JavaScript创建一个简单的Windows 8游戏：输入和声音

这一系列帖子将向您展示如何使用HTML5，JavaScript，Winjs和CreateJS创建简单的Windows 8游戏 。 该游戏基于XNA样本游戏“弹射战争实验室”。当我们为Windows 8开发基于Web技术的Windows 8的新版本时，我们将重复使用该游戏的资产。 在这篇文章中，我们将响应用户输入，并通过添加声音使事情变得更加活跃。

钥匙要点

• >教程演示了如何使用HTML5，JavaScript，Winjs和CreateJS创建一个简单的Windows 8游戏，并且该游戏基于XNA示例游戏“ Catapult Wars Lab”。
>该游戏旨在以各种形式响应用户输入，例如鼠标，触摸，笔甚至手势，并实现了MSPOINTER系统和MSGESTURE，用于检测TAP和Double-Tap等手势。
• >。
游戏还使用html音频元素和预罗德J.

>处理用户输入

当然，我们可以通过许多方式拍摄瞄准工作 - 基于时间，基于精度的随机工作（例如“单击…现在！”），但是在这种情况下，我们将让用户画一条线，指示方向和速度。 首先，让我们添加默认值顶部附近的新变量：js： Windows 8支持绘制的几种方法 - 鼠标，触摸，笔 - 我们的游戏需要足够灵活，以支持用户拥有的任何方法。  幸运的是，MSPOINTER系统将对所有这些的支持结合在一起。  我们将使用MSPOTROWNDOWN/UP开始和最终目标，以及MSPOInterMove以在用户调整目标时提供反馈。 顺便说一句，通过MSGENTURE可以通过MSDECTURE（例如Dable，Double-Tap等）进行大力支持。处理输入和手势的一个很好的例子是MSDN上的“ Ballineight”样本。 这些事件是通过指向侦听器函数（在开火时调用）来使用的。  现在就考虑到这一点，添加在初始化（）函数的顶部附近： 现在，对于函数本身：添加您喜欢的位置，但是我放在update（）和fireshot（）之间： 请注意，练习留在这里。  为了简单起见，我省略了以AIM％和/或在Adjudaim（）函数期间绘制瞄准箭头的文本。  继续尝试添加 - 从早期的部分中，我们已经使用了所需的相同技术。 以及帮助我​​们计算目标的功能： 同样，简单性统治了一天，这仅适用于玩家1，但这是发生的事情：

• 行239-241 - 从距离到终点创建一个新点。  将其缩小到一个良好的速度，以适用于每个帧/更新。
>
• 行242＆244 - 确保X和Y受到限制，以免镜头从屏幕上消失，太快
>
• 第243和245号线 - 确保射击朝敌人投入……或多或少。

我们早些时候添加了一些临时代码以使player 1始终随机触发（）。  现在，我们可以替换使用新的Aimvector： 继续进行游戏… 现在，您可以使用鼠标，笔或触摸来控制镜头！

“我一定是在听东西！” - 添加声音

直到我们有声音，我们作为游戏开发的工作才能完成。  我们已经在第2部分中添加了声音文件，因此让我们加载下一步。 首先，在默认值中有几个变量，以使情况保持整洁： 从第2部分中回想一下，我们已经对PRELOADJS进行了启动，以确保游戏开始时我们的资源准备就绪？  我们可以在声音中使用相同的方法，所以让我们将它们添加到清单中： 要使用这些文件，我们将创建HTML音频元素的实例。  长话短说，如果您只是每个声音文件创建一个音频实例，那么您可能会遇到剪辑，因为一个声音在该实例的先前播放之前就无法播放。  有几种处理此问题的方法（例如，请参阅“ HTML5音频和JavaScript控件” ），但是我们将每次播放声音时都使用一个实例来做一个简单的＆效率低下的事情。 请注意，在此示例中，我们不会使用Soundjs（CreateJS的另一部分），但是当然，欢迎您将其旋转！ 添加弹奏（文件）助手功能： 就是这样！  现在，我们只称呼它，指定指向正确文件的常数。  我们将在几个地方这样做。 首先，将呼叫添加到FireShot（）： 现在，ProcessHit（）： 正如评论所提到的那样，如果您想获得多次击球来摧毁弹射器，则可以使用“命中”声音而不是“爆炸”。 最后，在Endgame（）中播放End Win或失去声音： 继续尝试尝试一下。 游戏在……上面……以及……

> 恭喜！  您已经做了一场比赛！ 在这些帖子中，我们已经涵盖了很多基础，但是像其他任何东西一样，还有很多其他事情要尝试。  为什么不对其中一些刺伤？

屏幕调整 - 肖像/景观，捕捉/填充。  了解CSS媒体查询的绝佳机会！>

改进触摸/手势支持
精灵/动画 - 射击/错过，弹射回调/火灾，弹射器被摧毁
• >游戏动力学 - 添加风，新场景，新的弹射功能/升级，弹药中的选择等。
>
• >在背景中添加山和移动的云（资产已经存在）
>
• >在当前非常>人工智能中添加一些智能
考虑使用现场瓷砖 - 也许显示玩家的最后/高分？
• >
享受！  期待听到您添加的新事物！

经常询问有关使用JavaScript创建简单Windows 8游戏的问题

>如何在游戏字符中添加更复杂的运动？

以在游戏字符中添加更多复杂的动作，您可以使用“ requestAnimationFrame”方法。此方法使您可以通过调用动画功能在浏览器的下一个重新涂抹之前调用动画功能来创建更光滑的动画。您可以使用此方法根据用户输入或游戏逻辑来更新游戏字符的位置。例如，当用户按特定的键时，您可以使用它来使角色跳跃。

>如何为游戏添加声音效果？

>在游戏中添加声音效果可以增强游戏体验。您可以在JavaScript中使用“音频”对象播放声音文件。要播放声音，您需要创建一个新的音频对象并调用“播放”方法。您还可以分别使用“卷”，“循环”和“暂停”方法来控制音量，循环声音，并停止声音。

>如何使我的游戏对不同的屏幕尺寸响应？为了使您的游戏响应迅速，您可以在JavaScript中使用'window.innerwidth'和'window.innerheight'属性。这些属性分别返回浏览器窗口的宽度和高度。您可以使用这些属性根据浏览器窗口的大小来调整游戏元素的大小和位置。

>

>如何将多人游戏功能添加到我的游戏？

>您的游戏可能很复杂。您将需要使用Websocket来启用玩家之间的实时通信。您还需要处理诸如延迟和同步等问题。

如何优化我的游戏以提高性能？

>

>有几种方法可以优化您的游戏以提高性能。一种方法是将“ RequestAnimationFrame”方法用于动画。此方法比“ setInterval”或“ settimeout”更有效，因为当用户切换到另一个选项卡时，它会暂停动画。另一种方法是最大程度地减少全局变量和关闭的使用，因为它们可以占据很多内存。

>我如何在游戏中添加触摸控件？

以在游戏中添加触摸控件，您可以在JavaScript中使用“ touchstart”，“ touchMove”和“ touchend”事件。当用户触摸屏幕，移动手指并分别举起手指时，这些事件会发射。您可以使用这些事件来控制游戏角色的运动。

>如何在Windows商店中发布我的游戏？

>

以在Windows商店中发布您的游戏，您需要创建Windows Store开发人员帐户。有帐户后，您可以提交游戏以进行认证。如果您的游戏通过了认证过程，它将发布在Windows商店中。

如何在游戏中添加应用程序内购买？ ，您需要使用Windows.ApplicationModel.store名称空间。此名称空间提供了您需要实现应用内购买的类和方法。

如何在游戏中添加成就？

才能在游戏中添加成就，您可以使用Windows。 ApplicationModel.userDataAccounts名称空间。此名称空间提供了您需要实现成就的类和方法。

如何在不同设备上测试我的游戏？

在不同的设备上测试您的游戏，您可以使用Windows Device Portal 。此工具允许您在Windows设备上进行远程调试和测试。

>

以上是使用JavaScript创建一个简单的Windows 8游戏：输入和声音的详细内容。更多信息请关注PHP中文网其他相关文章！