本节书摘来自华章出版社《HTML5 2D游戏编程核心技术》一书中的第1章，第1.2节HTML5游戏开发最佳实践，作者［美］ 戴维·吉尔里，更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1.2 HTML5游戏开发最佳实践
我们将在本书中持续地讨论一些关于游戏开发的最佳实践，首先介绍7个与HTML5有关的实践。
1）窗口失去焦点时暂停游戏。
2）窗口重新获得焦点时实现倒计时。
3）使用CSS实现UI特效。
4）对于运行缓慢的游戏做出检测和处理。
5）添加社交功能。
6）把所有的游戏图像放在单独的Sprite表单中。
7）在服务器中存储高分榜和实时游戏数据。
在接下来的章节中，我们将详细地讨论上面提到的最佳实践。本节先通过快速浏览这些实践来介绍Snail Bait游戏的特点。
1.2.1 窗口失去焦点时暂停游戏
在浏览器中运行HTML5游戏时，如果将焦点改变到另一个标签页或浏览器窗口上，那么大部分浏览器都会降低游戏动画运行的帧频，以便节约CPU和电池的开销。因为在窗口或者标签页上浪费不可见的资源是没有必要的。
帧速率锁定破坏了大多数的碰撞检测算法，因为这些算法会在游戏绘制每一个动画帧时检测碰撞。如果在两个动画帧之间花费太长时间，sprite对象会越过彼此而没有碰撞检测。为了避免这种帧速率锁定导致的碰撞检测崩溃，必须在窗口失去焦点时暂停游戏。
如图1.5所示，当Snail Bait游戏暂停时，它会显示一个提示信息，让玩家知道游戏暂停。
图1.5 Snail Bait暂停
暂停不仅仅是停止游戏
当一个暂停的游戏恢复运行时，所有状态必须和游戏暂停时的状态相同。例如在图1.5中，当比赛恢复时，跑步小人必须在游戏暂停时所在的位置继续跳跃。
除了暂停和恢复游戏之外，还必须要冻结和解冻游戏，确保在游戏恢复时有一个平滑的转换。我们将在第4章详细地讨论暂停游戏。
提示信息（toast）
toast原意是指举起酒杯为人的健康干杯，这里是指短时间内向玩家显示游戏信息。如图1.5所示，toast可以是简单的文本，也可以显示传统对话框，如图1.8所示。
1.2.2 窗口重获焦点时实现倒计时功能
当窗口重新获取焦点时，应该给玩家几秒钟准备重新开始游戏。Snail Bait游戏在窗口重新获取焦点时，提供了3秒钟的倒计时准备时间，如图1.6所示。
图1.6 Snail Bait在窗口重新获取焦点时的倒计时
1.2.3 使用CSS实现UI特效
图1.7显示了游戏加载后短时间内的截图。
重点注意图1.7中的两个物体。第一，显示了包含简单文字的提示信息。这个提示信息在游戏加载时淡入，5秒后淡出。
图1.7 Snail Bait游戏中的提示信息
第二，如图1.7所示，在游戏开始时，canvas下面的复选框（控制声音和音乐）和说明文字（讲述哪些按键有哪些功能）是不透明的，而游戏顶部的生命提示符和分数板是半透明的。当游戏提示信息渐渐消失时，透明度发生反转；生命提示符和分数板变得不透明，而复选框和说明文字变得几乎完全透明，如图1.6所示。
Snail Bait游戏使用CSS3渐变属性来实现元素的淡化显示及提示板的淡入淡出效果。
聚焦当前重要的事件
当Snail Bait游戏开始时，canvas下面的介绍是不透明的，而canvas上面的生命提示符和分数板是半透明的。过一会之后，它们的不透明度会发生变化；canvas上面的元素会变得完全不透明，而canvas下面的元素变得半透明。
Snail Bait游戏之所以会具有如此复杂的操作，与当前关注的重点是什么有密切关系。初始化时，玩家会关注游戏下面的说明文字；而游戏一旦开始后，玩家将更加关注他们的得分情况以及剩余生命的数量。
1.2.4 对游戏运行缓慢的状态做出检测和处理
与控制台游戏运行在受控环境中不同，HTML5游戏运行在一个高度变化且不可预测的混乱环境中。玩家的某些操作可以直接影响到系统的性能，例如，在另一个浏览器标签页或窗口中播放YouTube视频。另外，一些其他性能杀手，例如玩家并不了解的在系统后台运行的进程，也可能轻松地使HTML5游戏变得运行缓慢，甚至变得不可玩。还有一种可能是玩家使用了不能保障游戏正常运行的浏览器。
作为HTML5游戏开发人员，必须要监测帧速率，当它降低到某个影响运行的阈值时做出处理。当Snail Bait游戏检测到最后10帧动画速率低于40帧每秒（fps）时，它会显示游戏运行缓慢的通知信息如图1.8所示。
图1.8
1.2.5 添加社交功能
许多现代游戏融合了社交功能，例如，将游戏分数发布到Twitter或者Facebook上。当Snail Bait游戏玩家点击游戏底部（如图1.4所示）的Tweet my score链接时，Snail Bait游戏会在另一个浏览器标签页上创建一个发布分数的推特交互窗口，如图1.9所示。
1.2.6 将所有游戏图像放在单独的sprite表单中
开发人员可以通过做很多事情使HTML5游戏（或者任何HTML5应用）加载得更快，但是最有效的办法是减少向服务器发送HTTP请求的次数。一种实现该方法的途径是将所有游戏图像放到一个单独的图像里，这个单独的图像被称为sprite表单（sprite sheet）。图1.10显示了Snail Bait游戏的sprite表单。
图1.10 Snail Bait游戏的sprite表单（灰色背景是透明的）
Snail Bait游戏的sprite表单
当Snail Bait游戏绘制sprite对象时，它会从sprite表单中复制对象到canvas中。
移动设备上的sprite表单
一些移动设备的内存空间限制了图像文件的大小，如果sprite表单太大，则需要将它分成多个文件。这样游戏的加载将会变得缓慢，但是总比没有加载上要好很多。
1.2.7 在服务器中存储高分榜和实时游戏数据
大多数游戏会因为各种原因同服务器进行交互。Snail Bait游戏在服务器中存储高分榜数据，并在游戏进行时发送游戏数据。Snail Bait游戏未使用任何第三方图像架构；但它使用了两个JavaScript架构——Node.js和socket.io，用来实现玩家电脑和服务器的信息交互。第19章介绍了更详细的信息。
