今天我们发布了 Firefox 31，它提供了一些新功能，帮助 HTML5 游戏开发者编写和调试复杂的 游戏。此外，Mozilla 在 博客中介绍了第一个商业游戏，它们利用了 asm.js，Dungeon Defenders Eternity 和 Cloud Raiders 都使用 Emscripten 编译器交叉编译成 JavaScript。像这样的游戏表明，HTML5 已准备好成为游戏平台。

如果您有兴趣使用 Emscripten，您可以在主 Emscripten wiki 上获取更多信息，或者在 github 页面 上获取代码。另一个很好的资源是 MDN 上的 Emscripten 入门教程。如果您想知道 asm.js 的性能，请阅读 asm.js 性能改进，让 Firefox 最新版本的游戏飞起来！ 以获取详细信息。

在这篇文章中，我们将向您介绍一些由 Mozillians 构建的资源，这些资源可以让您编写和调试基于 HTML5 的游戏。此列表并不详尽，我们感谢您对任何有助于该领域的宝贵资源的反馈。不要害羞，在评论中告诉我们。

从哪里开始

在开发基于 HTML5 的游戏时，您需要做出很多选择。这些选择从使用什么编辑器开始，游戏是 使用 Canvas 2d、WebGL、SVG 还是 CSS，一直到使用哪些特定的渲染框架和游戏引擎。大多数这些 决定将基于开发人员体验和游戏将发布的平台。没有一篇文章能回答所有这些问题，但我们希望 编写一篇帖子，帮助您开始踏上这条道路。

MDN 上提供给游戏开发者的关键资源之一是 游戏区。MDN 的这一部分包含一般的游戏开发文章、演示、外部资源和示例。它还包括对开发者在 实现 HMTL5 游戏时需要了解的一些 API 的详细描述，包括声音管理、网络、存储和图形渲染。 我们目前正在添加内容并升级游戏区。在未来，我们希望为大多数常见场景、框架和工具链提供内容 和示例。

同时，以下是一些帮助游戏开发者入门的帖子和 MDN 文章。

工具

作为 HTML5 开发者，您将拥有大量工具可用。在 Mozilla 社区，我们一直在努力扩展 Firefox 开发者工具提供的功能。其中包括一个功能齐全的 JavaScript 调试器、样式编辑器、页面检查器、Scratchpad、性能分析器、网络监控器 和 网页控制台。

除了这些之外，最近还更新或引入了其他一些值得注意的工具，这些工具为游戏开发者提供了 一些很棒的功能。

画布调试器

在 Firefox 的当前版本中，我们在浏览器中添加了画布调试器。

画布调试器允许您跟踪所有用于生成帧的画布上下文调用。调用会根据特定调用进行颜色 编码，用于绘制元素或使用特定的着色器程序等操作。画布调试器不仅在开发基于 WebGL 的游戏 时很有用，在调试基于 Canvas 2D 的游戏时也可以使用。在下方的游戏中，您可以在动画条中看到 每个图像被绘制到画布上。您可以单击这些行中的任何一行，直接跳转到负责此操作的 JavaScript 部分。

使用画布调试器时，报告的两个非常常见的问题是：使用 setInterval 而不是 requestAnimationFrame 生成的动画和 检查 iframe 中的画布元素。

要了解有关画布调试器的更多信息，请务必阅读 在 Firefox 开发者工具中介绍画布调试器。

着色器编辑器

在开发基于 WebGL 的游戏时，能够在应用程序运行时测试和更改着色器程序非常有用。使用 开发者工具中的着色器编辑器可以实现这一点。顶点和片段着色器程序可以进行修改，而无需重新 加载页面，也可以将其黑盒化，以查看这对最终输出的影响。

有关着色器编辑器的更多信息，请务必查看 使用 Firefox 开发者工具实时编辑 WebGL 着色器 文章，并查看 这篇 MDN 文章，其中包含一些演示实时编辑的视频。

Web 音频编辑器

Firefox Aurora（32）的当前版本有一个 Web 音频编辑器。编辑器显示当前 AudioContext 中 所有音频节点及其连接的图形表示。您可以深入到每个节点的特定属性以检查它们。

Web 音频 API 提供比 HTML5 音频标签 中可用的更强大和更复杂的音频创建、操作和处理功能。使用 Web 音频 API 时，请务必阅读 编写在所有浏览器中都能正常工作的 Web 音频 API 代码，因为它包含有关对各种音频节点的支持的相关信息。

有关 Web 音频编辑器的更多信息，请务必阅读 介绍 Web 编辑器的 Hacks 文章 和 这篇 MDN 文章。

网络监控器

在开发基于 HTML5 的游戏时，网络影响不仅可能很繁琐，而且如果用户在移动设备上，还会很昂贵。 使用网络监控器，您可以直观地检查所有网络请求的位置、操作花费的时间以及工件的类型和大小。

此外，您还可以使用网络监控器在缓存和未缓存的情况下直观地分析应用程序的性能。

要了解有关网络监控器的更多信息，请查看 MDN 页面。

Web IDE

在开始您的游戏时，您需要做的第一个选择之一是使用哪个编辑器。而且有很多编辑器（Sublime、 Eclipse、Dreamweaver、vi 等）。在大多数情况下，您已经有了自己喜欢的编辑器。如果您有兴趣在浏览器中 进行开发，您可能需要查看最近在 Firefox Nightly 中发布的 Web IDE。

Web IDE 项目不仅提供了一个功能齐全的编辑器，还充当各种本地和远程平台的发布代理、调试器、 模板框架和应用程序管理器。此外，支持此项目的框架提供了 API，这些 API 允许其他编辑器使用该 工具中提供的功能。要详细了解该领域正在进行的工作，请查看 这篇帖子。

为了及时了解 Firefox 开发者工具的新闻，请关注 Hacks 博客上的 文章系列。有关新稳定开发者工具功能的更详细信息，请查看 MDN 上的 文档。

API

MDN 游戏区列出了各种 API 和 文章，这些 API 和文章对于开始游戏开发很有用。

除了这些资源外，您可能还想查看一些额外的帖子，这些帖子对开发可能很有价值。

如果您的游戏要支持使用 WebRTC 或 WebSockets 的多人互动，您可能还想查看 Together.js，它为 web 应用程序提供了协作功能。要了解可能的范围，请查看 介绍 TogetherJS。

许多游戏都需要存储，可以使用 IndexedDB 来满足这些需求。有关扩展 IndexedDB 功能的信息，请阅读 突破 IndexedDB 的边界。您可能还想查看 localForage，它提供了对简单存储的浏览器无关支持。要详细了解此库，请阅读 这篇 Hacks 文章。

游戏优化

如今的 HTML5 游戏为游戏开发者提供了强大的功能。也就是说，许多这些游戏将在移动设备上玩，与 您的桌面相比，移动设备的性能会很差。因此，如果您希望您的游戏在各个平台上都能取得成功，那么 优化代码非常重要。为 Firefox OS 优化您的 JavaScript 游戏 文章中有很多很棒的技术，可以帮助您构建一款在低端移动设备上 运行良好的游戏。

本地化

为了让您的游戏接触到最多的用户，您可能想要考虑提供不同语言版本。作为此工作的一部分，开发者 应该从一开始就在游戏中内置本地化。我们正在围绕招募翻译人员进行大量工作，以帮助您翻译您的 游戏。有关此举措的更多信息，请查看 这篇帖子。

您的声音

由于 Mozilla 关于开发者和用户的社区，我们希望得到您的帮助和反馈。如果您对您想在产品中看到 的特定功能有任何建议，请确保加入 irc.mozilla.org 上的讨论或通过我们的 邮件列表。您也可以在 bugzilla.mozilla.org 上记录错误。此外，我们还为我们的 DevTools 和 Open Web Apps 提供额外的反馈渠道。