创建 HTML5 游戏有很多有效的方法，并且关于每种方法的技术方面也有很多资料，因此在本文中，我将对 HTML5 游戏开发进行更广泛的概述。如何让“HTML5”比原生更出色，从哪里开始开发过程，在遇到困难时去哪里寻求帮助，以及如何将游戏货币化和分发。

HTML5 的优势

这里的大多数观众已经看到了 HTML5 的价值，但我希望再次强调为什么要构建 HTML5 游戏。如果你只针对 iOS 开发游戏，请用 Objective-C 编写游戏，在这种情况下，弊大于利… *但是* 如果你想构建一款可以在多种平台上运行的游戏，HTML5 就是最好的选择。

跨平台

HTML5 游戏的一个更明显的优势是，这些游戏可以在任何现代设备上运行。是的，你必须花更多心思考虑你的游戏如何响应各种屏幕尺寸和输入类型，而且是的，你可能需要在每个平台的代码中做一些“个性化”（主要障碍是音频）；但它远比每次都要完全移植游戏要好得多。

我看到太多游戏 *不能* 在手机和平板上运行，在大多数情况下，在开发游戏时，这确实是一个巨大的错误 - **在开发 HTML5 游戏时，要牢记移动设备！**

独特的分发

到目前为止开发的大多数 HTML5 游戏都以与 Flash 和原生移动游戏相同的方式构建。在某种程度上，这是有道理的，但被忽视的是 Web 作为平台所带来的实际优势。这就像 iOS 开发人员构建一款游戏，这款游戏没有利用触摸与鼠标的不同之处一样 - 或者 Doodle Jump 是用屏幕底部的箭头键构建的，而不是使用设备的加速度计。

很容易陷入过去行之有效的思维定势，但这会扼杀创新。我曾经陷入过这个陷阱 - 试图 100% 模仿 iOS、Android 和 Flash 上成功的做法 - 直到和前 Mozillian Rob Hawkes 聊天后，我才完全意识到这一点。虽然在一定程度上模仿过去行之有效的做法是必要的，但开放网络是游戏的一种不同的媒介，只有冒险尝试新事物才能实现创新。

HTML5 游戏的分发通常被认为是一个弱点，但这仅仅是因为我们一直从原生移动游戏的角度看待它，在原生移动游戏中，应用商店是 **唯一** 发现游戏的方式。HTML5 游戏拥有无比强大的超链接。链接可以很容易地在网络和移动设备上分发（想想你在 Facebook 和 Twitter 应用程序中点击了多少链接），当然不应该仅仅局限于游戏的首页。技术已经可以链接到你的游戏并做更多有趣的事情，比如跳转到游戏中的特定点，尝试击败朋友的分数，或者与朋友实时对战 - 利用它来你的优势！

仔细研究一下网站病毒式传播的成功经验，并将这些相同的原则应用到你的游戏中。

更快的开发流程

无需等待编译，实时更新和调试，并且一旦游戏完成，你就可以立即推出更新。

选择游戏引擎

游戏引擎只是抽象的另一层，可以处理游戏开发中一些更繁琐的任务。大多数引擎都负责资产加载、输入、物理、音频、精灵图和动画，但它们之间差异很大。有些引擎非常基础，而另一些（例如 ImpactJS）则包含一个 2D 关卡编辑器和调试工具。

决定是否需要游戏引擎

这很大程度上是一个个人决定。游戏引擎几乎总是可以缩短你创建完整功能游戏所需的时间，但我知道有些人就是喜欢从头开始构建一切，这样他们可以更好地理解游戏的每个组件。

对于简单的游戏，从头开始构建并不难（假设你具备 JavaScript 基础知识并了解游戏的运行机制）。例如，Slime Volley (源代码) 是在没有游戏引擎的情况下构建的，它的所有组件都不是什么高科技的东西。当然，Slime Volley 是一款非常基础的游戏，从头开始构建 RPG 可能会导致更多头发掉落。

在“游戏引擎”和“游戏制作器”之间做出选择

Mozilla Hacks 的大多数典型观众可能倾向于使用游戏引擎或从头开始构建，但也有一种选择是使用“游戏制作器”，例如 Construct 2。使用游戏制作器意味着你实际上不会用 JavaScript 编写代码；相反，你是在编辑器中创建类似代码的事件。这是一种权衡，它以易用性和快速原型设计/开发换取对最终结果的定制和控制。我见过一些用这两种方法构建的非常棒的游戏，但作为一个开发者，我倾向于从头开始编写代码或使用引擎。

寻找适合你的游戏引擎/游戏制作器

现在有这么多 HTML5 游戏引擎，这在某种程度上是一件好事，但也有可能是一件坏事，因为很大一部分引擎要么已经停止维护，要么很快就会停止维护。你一定要选择一款引擎，这款引擎在未来几年会不断更新和改进。

HTML5GameEngine.com 是开始搜索的绝佳地方，因为它将数百款游戏引擎缩小到大约 20 款，这些引擎都是成熟的、积极维护的，而且确实有游戏在使用它们开发。

对于更完整的游戏引擎列表（这意味着可能会有垃圾需要筛选），GitHub 上的这个列表 是你最好的选择。

学习工具

如果你要使用游戏引擎，通常他们的网站是最好的资源，其中包含教程和文档。

技术教程

• jsGameWiki 充满了指向技术教程和资源的链接。
• HTML5 Gamedev Starter - 与 jsGameWiki 类似，但更容易消化。
• Mozilla Hacks -> 游戏
• 如何使用 HTML5 设计移动游戏，用于开发移动友好的游戏。
• 无泪指南 - HTML5 游戏 相对来说比较古老（2.5 年），但如果你不使用游戏引擎，它仍然是一个非常好的学习工具。

游戏设计教程

在游戏开发中，技术方面并非全部 - 更重要的是游戏真的 **有趣**。以下是一些开始学习游戏机制的地方。

• 机制越少，游戏越好
• Gamasutra -> 设计
• HTML5 游戏：从移动游戏和 Flash 游戏中学习

有用的游戏工具

用户留存、货币化等

这里要完全公开：我是 Clay.io 的联合创始人。

让游戏正常运行只是等式的一部分。你还要让玩家玩得更久，让他们回来，告诉他们的朋友，也许还能让他们购买一些东西。游戏中专注于这些领域的常见元素包括用户帐户、排行榜、成就、社交整合和游戏内支付等功能。从表面上看，大多数功能通常很容易实现，但通常会有许多跨平台问题和被忽视的复杂性。在一个中央服务中运行这些功能对多个游戏也具有价值 - 例如，玩家真正关心 Xbox Live 上的成就，因为 Gamerscore 对他们很重要。

• Clay.io - 用户帐户、排行榜、成就、游戏内支付、分析、分发等等。
• Scoreoid - 与上面类似。

开发工具

• stats.js - JavaScript 性能监控器。显示帧速率和性能随时间推移的变化。
• Socket.IO - 实时客户端-服务器通信（如果你要为你的游戏设置后端）。
• pixi.js - Canvas 和 WebGL 渲染引擎。
• CocoonJS - 使用加速的 Canvas 绑定到 OpenGL ES，提高 HTML5 游戏在 iOS 和 Android 上的性能。

动力

无论你在构建什么，额外的动力总是有帮助的。对于游戏来说，这种动力通常来自于与和你一样的人（从事游戏开发的人）在一起 - 开发游戏。

js13kGames

js13kGames 是一项比赛，目前正在进行中。截止日期是 2013 年 9 月 13 日，你需要开发一款 HTML5 游戏，这款游戏压缩后的大小不超过 13kb。

Mozilla Game On

Mozilla 每年从 12 月到 2 月都会举办游戏比赛，并提供丰厚的奖品 - 去年是全额资助，红毯前往旧金山参加 GDC 2013 的行程。

Clay.io 的“Got Game?”

Clay.io（完全公开，我是一名创始人）每年都会为学生举办 HTML5 游戏开发竞赛。去年是第一年，我们收到超过 70 款游戏的提交。下一届比赛计划在 2014 年 2 月/3 月举行。

Ludum Dare

Ludum Dare 不提供实物奖品，也不专门针对 HTML5 游戏，但有很多 HTML5 开发人员参与。

每月一款游戏

每月一款游戏与其说是比赛，不如说是责任工具。它并不局限于 HTML5 游戏，但许多参与者使用 HTML5。目标是每个月制作一款游戏。我不建议长期这样，因为一个月的时间太短，不足以制作出一款优秀的游戏，但对于学习来说很有帮助，因为它能迫使你开发并完成简单的游戏。

社区帮助

HTML5GameDevs.com

HTML5GameDevs 已迅速成为最活跃的 HTML5 游戏开发者社区。大多数人都非常友好，愿意帮助你解决遇到的任何问题。

#BBG

#BBG 是 HTML5 游戏的最佳 IRC 频道 - 你甚至会发现很多 Mozilla 人员在那里。

如何赚钱

游戏内购买

我认为，从长远来看，游戏内支付是 HTML5 游戏的最佳选择。目前，大多数 HTML5 游戏还没有足够高质量的内容，也没有足够的游戏机制来让玩家购买物品。

这是最具潜力的收入模式，但也是最难实现的 - 不在技术上，而在于拥有合适的游戏。我认为，学习如何在这一方面正确地将游戏货币化的最佳方法是看看 Flash 和移动端做得非常好的游戏 - 来自 King.com 和 Zynga 的游戏通常在这方面做得很好。还有一些不错的阅读材料，例如 Gamasutra 上的F2P 货币化技巧。

许可

对于现在的 HTML5 游戏来说，游戏许可是最强大、最稳定的赚钱方式 - 仅当你的游戏在移动设备上运行良好时。

有无数的“Flash 游戏门户网站”接收移动端的自然流量，但无法通过他们拥有的 Flash 游戏将其货币化。他们的解决方案是寻找 HTML5 游戏，购买非独家许可（在他们的网站上发布游戏的权利，通常会进行少量调整），以便为他们的移动端访客提供服务。

通常情况下，非独家 HTML5 游戏许可（意味着你可以向多个网站出售）的价格在 500 美元到 1000 美元之间，具体取决于游戏和发行商。一些发行商会采用利润分成模式，你将获得所有广告收入的 40%-50%，但没有预付款。

许可是目前最安全的赚钱方式，但上限有限 - 单个游戏所能赚取的最高金额在 5000 美元到 6000 美元之间，但达到这个目标比游戏内支付或广告更容易。

广告

广告介于游戏内支付和许可之间。它比游戏内支付更容易赚钱，并且潜在上限比许可更高（但可能低于游戏内支付）。实施广告非常简单：只需选择你想要的广告网络（注意 Adsense 的严格条款），并在游戏的周围或不同的停止点实施广告。

常用的广告网络包括LeadBolt（适用于移动端）和CPMStar（适用于桌面端）。你也可以使用Clay.io，它可以更轻松地实施广告，并试图通过使用不同的广告网络（根据使用的设备和其他因素）来最大化收入。

分发

游戏开发的最后阶段是分发。游戏已经完成，现在你想要人们玩游戏！幸运的是，使用 HTML5，有很多地方可以发布你的游戏（其中很多通常用不到）。

如今，越来越多的市场正在接受 HTML5 游戏。每个市场都有自己的要求（Facebook 要求使用 SSL，大多数市场要求使用不同格式的清单文件等等），但进入每个市场的通常需要不到 30 分钟。如果你想进一步减少时间，Clay.io 可以帮助你自动生成清单文件和宣传图片资产（以及处理 SSL 要求） -有关此方面的文档在这里。

• Firefox Marketplace
• Clay.io
• Chrome Webstore
• Windows 应用商店
• Facebook
• Amazon 应用商店
• HTML5Games.com
• Kongregate、Newgrounds（以及其他类似的游戏门户网站）

对于一些市场，你将需要为你的游戏提供原生包装器 - 主要包括 iOS App Store 和 Google Play。PhoneGap 等包装器是一种选择，但原生 webview 具有非常糟糕的 JavaScript 引擎，因此目前你最好使用CocoonJS 和Ejecta 等工具。

现在就取决于你，去创造一款出色、创新的网页游戏 - 我期待看到未来几个月和几年里的新发展！