构建HTML5游戏的5个最佳实践……实战！
在本文中，我将概述在使用HTML5创建游戏之前和在开发过程中应该考虑的事项。
HTML5之所以出色，是因为它具有多功能性——它不局限于单一的使用场景。更重要的是，HTML5无处不在。它在你的电脑上、手机上、平板设备上——据我所知，它甚至可能在你的厨房电器上。
结合HTML5的这两种特性——多功能性和无处不在——你就会非常清楚为什么这么多开发者被它所启发。俗话说，“当开发者受到启发时，他们通常会写游戏。”（好吧，这可能是我刚编的。）
幸运的是，关于HTML5游戏开发的深入文章现在已经广泛可用。相反，我想为你概述一下在使用HTML5编写游戏之前和编写过程中应该考虑的事情。
你将从本文中学到什么？我将涵盖HTML5游戏开发框架，如何通过支持智能手机和平板设备触及更多受众，如何管理游戏内状态，如何处理性能问题，以及如何最大限度地利用你的浏览器这个平台。
话不多说，以下是构建HTML5游戏的5大最佳实践，实战演练！（“实战演练”为增加戏剧效果而添加）。
最佳实践 #1：使用框架
用HTML5编写简单的游戏很容易，但随着你投入的增加，你需要做一些事情来确保你的游戏运行流畅。
例如，当你使用大量图片、音效和其他资源时，你的浏览器需要一些时间才能从你的Web服务器下载所有这些内容。如果你在编写游戏时没有考虑到这一点，你将会大吃一惊。因为图片和声音文件是异步加载的，所以你的JavaScript代码会在所有资源加载完毕之前开始执行。这通常会导致“突然出现”（图片突然出现）和音效没有在应该播放时播放。一个很好的解决方案是创建一个预加载器，它会延迟脚本执行，直到所有资源都已下载完毕。
你可能会遇到的另一个问题是，不同的机器和/或浏览器会以不同的速度运行你的游戏。虽然你对此无能为力，但你仍然应该确保动画和移动速度与游戏运行的帧速率无关。
本质上，每个游戏都需要大量的样板代码才能正常运行。幸运的是，你不必自己编写所有这些代码。现在有各种各样的框架，可以让你专注于游戏逻辑，而无需担心使游戏流畅运行所需的所有小（和大）事情。
使用框架的唯一注意事项是，有太多可供选择。例如，像ImpactJS这样的框架旨在帮助游戏开发过程的几乎所有方面，而像EaselJS这样的框架则主要关注图形方面。最终，由你来选择你最满意的框架。这似乎是显而易见的，但在JavaScript世界中，选择一个框架通常意味着选择一种特定的编程风格。
ig.module(
'monster'
)
.requires(
'impact.game',
)
.defines(function(){
Monster = ig.Entity.extend({
eyes: 42
});
});
ImpactJS就是一个很好的例子，它不仅提供了显示图形或播放音效的抽象，还引入了自己如上图所示的对象和继承模型。
尽管现在许多HTML5游戏都依赖某种形式的框架，但许多开发者仍然走上自行尝试一切的崎岖之路。虽然这可能是一个很好的学习经验，但如果你想在合理的时间内完成任务，使用框架绝对是最佳选择。一个很好的例子是Ascended Arcade的杰出工作，他们使用ImpactJS框架在短短三个月内发布了三款非常有趣（且颇受好评）的游戏。
最佳实践 #2：考虑小屏幕和触摸屏设备
也许HTML5最具说服力的卖点之一是它可以在台式电脑、笔记本电脑、平板电脑甚至智能手机上运行（如果你还没看过IE9在Windows Phone 7 Mango上运行，请观看此视频）。
这种独特的跨平台性（韦氏词典，接招吧！）是HTML5固有的，通常只需要开发者做很少的额外工作。然而，有几件事你应该考虑……
首先，不同设备类别之间的屏幕尺寸、屏幕分辨率和宽高比可能差异很大。如果你的HTML5游戏想在移动设备上运行良好，你应该确保它们要么支持多种分辨率，要么不超过800x480的WVGA帧大小。
此外，由于大多数移动设备屏幕尺寸不足以一次性渲染整个网页，它们通常采用复杂的缩放和平移技术，这在编写游戏时可能会适得其反。这些可以通过使用视口meta标签以编程方式关闭。以下代码片段将使你的游戏的视口占据所有可用的水平屏幕空间。将参数“user-scalable”设置为“no”会告诉移动浏览器禁用捏合缩放，否则这通常会与基于手指的游戏控制发生冲突。
<meta name="Viewport" content="width=device-width; user-scaleable=no; initial-scale=1.0" />
一旦你的游戏在小屏幕设备上渲染正常，你也应该花点时间思考输入。大多数纯触摸设备都有虚拟键盘，但它们往往占用太多屏幕空间，无法用于控制游戏角色。如果纯触摸输入无法实现，你应该构建一个有限的虚拟键盘，只包含游戏所需的按钮（例如，方向键）。然而，最好对控制游戏的替代方式进行创新，这些方式不需要额外的屏幕元素。一个很好的例子是游戏Spy Chase，你用一根手指驾驶车辆（这是你在现实生活中不应该尝试的事情）。
最佳实践 #3：自动保存玩家进度
借助网站固定等功能，网页浏览器试图赋予网页应用程序与常规桌面应用程序相同的地位。然而，网站作为应用程序运作的理念相当新颖，网页保存客户端状态的概念也是如此。你可能会在关闭Microsoft Word实例之前三思，但你可能不会对一个打开的网页那么小心。大多数情况下，这不是问题——大多数网页要么是无状态的，要么在服务器上维护你的信息记录。
然而，浏览器游戏则略有不同。由于JavaScript代码在客户端执行，HTML5游戏通常将其游戏状态保存在瞬时内存（即RAM）中。关闭浏览器窗口，你辛辛苦苦获得的高分将永远丢失。
你可能会争辩说，一个明智的人会足够小心，不会关闭他们玩了八个小时的游戏，但意外确实会发生，尤其是在涉及多个标签页或电池电量耗尽时。
长话短说：在编写HTML5游戏时，定期保存玩家进度并允许玩家在返回已关闭的网页时继续游戏是绝对的最佳实践。
那么你该在哪里跟踪玩家的进度呢？过去，显而易见的地方要么是服务器端数据库，要么是客户端Cookie。这两种解决方案都不是很吸引人。使用服务器端方法，每当需要存储或检索信息时，都必须发出HTTP请求。Cookie方法为你提供的可用空间非常有限，并且Cookie的寿命很大程度上取决于浏览器配置。
一个更可行的解决方案是使用HTML5 DOM存储。DOM存储允许你通过一个类似于键值存储（或JavaScript扩展对象）的接口，为每个网站保存几兆字节的数据。这非常方便，但在HTML5游戏的背景下，你可能还想记住复杂的数据结构——DOM存储原生不支持这种功能。
幸运的是，现代JavaScript实现内置了将对象序列化为一种紧凑表示（称为JSON）的机制。使用这种方法，DOM存储也可以用于记住任意信息。以下两个辅助函数说明了如何使用HTML5 DOM存储和ECMAScript5内置的JSON功能来存储和检索游戏状态。
function saveState(state) {
window.localStorage.setItem("gameState", JSON.stringify(state));
}
function restoreState() {
var state = window.localStorage.getItem("gameState");
if (state) {
return JSON.parse(state);
} else {
return null;
}
}
最佳实践 #4：使用性能分析器
在开发游戏时，最大的挑战之一是，随着你不断增加功能，如何保持高帧率。
好消息是，在过去几年里，浏览器普遍变得更快，HTML5驱动的游戏以每秒60帧的恒定速度运行已成为现实。
这并不容易。对于Internet Explorer 9，这意味着要编写一个全新的JavaScript引擎，该引擎可以使用多个CPU核心和一个基于Direct2D的完全硬件加速渲染管道。换句话说：如果你在你的游戏设备上花了钱，Internet Explorer 9会充分利用它。
对于简单的游戏，这意味着你不必担心性能。但由于HTML5是平台无关的，你可能会为各种设备和浏览器开发，其中一些可能不如你所希望的那么快。即使你只针对高性能PC（我们说过不这样做，还记得吗？），性能仍然可能成为问题。
如果你想让你的游戏以 60 fps 运行，那么你只有不超过 16 毫秒的时间来渲染任何单个帧。在你眨眼的时间里，你必须渲染至少 6 个完整的帧。现在这看起来可能是一项艰巨的任务……对于任何非琐碎的游戏来说，它确实如此。
幸运的是，有一些工具可以帮助你。在Internet Explorer 9（或者10）中，按F12键打开开发者工具。选择“性能分析器”选项卡并点击“开始分析”。
现在，导航到你觉得性能应该更好的地方，给分析器大约30秒的时间收集数据，然后点击“停止分析”。你将看到一个概述，显示游戏中每个函数消耗的总执行时间。大多数情况下，你会发现有许多函数占据了大部分总执行时间。优化这些函数将为你带来最大的回报，并且当你分析代码时，慢速子程序会立即突出显示。
不过，不要过于盲目地相信你的直觉——那些看起来很慢的代码，在今天的JavaScript引擎中实际上可能执行得相当快。优化的最佳方法是经常重新进行性能分析，并始终衡量你对代码所做的更改是否真的对性能产生了积极影响。
最佳实践 #5：发挥创意！
能够编写在浏览器中原生运行的游戏真是太棒了，但更酷的是HTML5允许你编写在浏览器中运行的游戏！HTML5不仅从技术角度来看很有趣，浏览器也是一个完美的游戏平台。
想想看……浏览器存在于许多不同的设备上，它们（几乎）总是联网的，它们是人们通过电子邮件、聊天和社交网络相互联系的工具。作为一名浏览器游戏开发者，你可以创建有趣的游戏，将世界各地的人们聚集在一起。
如果你是HTML5游戏开发新手，可能会很想编写你在线下玩过的游戏的克隆版。这种方法绝对没错。但如果你把你的游戏看作是在一个“通讯应用程序”中运行，你很有可能会想出全新的、极具创意的游戏想法。一个有趣的例子是Warimals，它是首批基于HTML5的Facebook游戏之一。在Warimals中，你可以扮演狗或猫，并且可以邀请你的Facebook朋友和你一起玩。有什么理由不喜欢呢？
总结一下 ...
多亏了框架开发者和JavaScript先驱们的伟大工作，HTML5已经成为一个相当成熟的游戏开发平台。这是一个好消息，因为Web是任何类型应用程序最普遍的运行时。有了正确的工具（其中许多工具已方便地集成到Internet Explorer 9和10中，或者可以免费下载）和正确的框架，HTML5游戏开发体验可以变得愉快且回报丰厚，尤其是在以有趣和创新的方式创建互联体验时。