图形和动画是任何视频游戏最根本的方面，所以在本文中，我将从 Canvas2D API 的简要介绍开始，对 Snail Bait 的中央动画的实现进行讨论。在本文中，您将学习如何：

• 将图像和图形基元绘制到画布上
• 创建流畅的、无闪烁的动画
• 以帧数每秒为单位监视动画的速度
• 使用视差来模拟三维效果

本文中所讨论的代码的最终结果如图 1 所示：

图 1. 滚动背景并监视帧速率

背景和平台水平滚动。这些平台在前景中，所以它们的移动明显快于背景，这样会形成一个温和的视差效果。在游戏开始时，背景由右至左滚动。在结束某个级别时，背景和平台开始逆转方向。

在开发的这个阶段，跑步者不动。此外，游戏还没有经过碰撞检测，所以当跑步者的下面没有平台时，她会漂浮在半空中。

最后，游戏画布的上方和左侧的图标会显示剩余生命的数量（如 所示）。目前，该游戏会在这个位置上显示当前动画速度（以帧数每秒为单位）。

在继续后面的操作之前，您可能想尝试创建一个这类游戏，因为它就在 里；如果您创建了这样的游戏，就会更容易理解相关的代码。（请参阅 ，获得本期的 Snail Bait 实现。）

Canvas 2D 上下文提供了一个广泛的图形 API，让您可以在平台视频游戏中实现文本编辑器中的一切。在我撰写这篇文章的时候，该 API 包含了超过 30 个方法，但 Snail Bait 只使用了其中的极少数，如表 1 所示：

除平台之外，Snail Bait 中的所有内容都是一个图像。背景、跑步者以及所有好人和坏人都是游戏使用 drawImage() 方法绘制的图像。

最终，Snail Bait 将使用 spritesheet（单个图像包含游戏的所有图形），但现在，我对背景和跑步者分别使用不同的图像。我使用 所示的函数绘制跑步者：

清单 1. 绘制跑步者

drawRunner() 函数将三个参数传递给了 drawImage()：一个图像、左侧坐标和顶部坐标，将在画布的这个位置上绘制图像。左侧坐标是一个常数，而顶部坐标由跑步者所驻留的平台决定。

我以类似的方式绘制背景，如清单 2 所示：

绘制背景图像。稍后，我会在本文中修改该函数，以便滚动背景。

绘制平台（它们不是图像）需要更广泛地使用 Canvas API，如清单 3 所示：

中的 JavaScript 定义一个名称为 platformData 的数组。该数组中的每个对象代表着描述一个独立平台的元数据。

属性，该属性设置您之后在画布上绘制的任何图形的不透明度。

调用 context.translate() 将画布的坐标系（如图 2 所示）在水平方向平移指定数量的像素。该平移和属性设置是临时的，因为这些操作是在 context.save() 和 context.restore() 调用之间执行的。

默认情况下，坐标系的原点位于画布的左上角。您可以使用 context.translate() 移动坐标系的原点。

Canvas 有关的一切内容。在本系列的其余部分中，我将侧重于 HTML5 游戏开发的其他方面，从动画开始。

从根本上讲，实现动画很简单：您反复绘制一个图像序列，看起来就象对象在以某种方式运动。这意味着您必须实现一个定期绘制图像的循环。

毫无疑问， 中的代码通过反复调用一个绘制下一个动画帧的 animate() 函数来生成一个动画；然而，您可能会得到不满意的结果，因为

在 中，我将时间间隔设置为 1000/60 毫秒，这相当于大约每秒 60 帧。这个数字是我对最佳帧速率的最佳估值，它可能不是一个很好的值，但是，因为 setInterval() 和 setTimeout() 完全不了解动画，所以由我指定帧速率。浏览器肯定比我更了解何时绘制下一个动画帧，因此，如果改为由浏览器指定帧速率，会产生更好的结果。

使用 setTimeout 和 setInterval() 甚至有一个更严重的缺陷。虽然您传递以毫秒为单位指定的这些方法的时间间隔，但这些方法没有精确到毫秒；事实上，根据 HTML 规范，这些方法（为了节约资源）慷慨地拉长您指定的时间间隔。

您可以将 requestAnimationFrame() 作为一个参考传递给回调函数，当浏览器准备好绘制下一个动画帧时，它就会调用这个回调函数。为了维持动画，回调函数还会调用 requestAnimationFrame()。

正如您在 中所见，浏览器会将一个 time 参数传递给您的回调函数。您可能会疑惑该 time 参数究竟有何意义。它是当前时间，还是浏览器绘制下一个动画帧的时间？

令人惊讶的是，这个时间并没有固定的定义。您惟一可以肯定的是，对于任何给定的浏览器，它试着代表着同样的事情；因此，您可以使用它来计算两帧之间的时间间隔，我会在

从许多方面来看，HTML5 是程序员的乌托邦。没有专用的 API，开发人员使用 HTML5 在无处不在的浏览器中实现跨平台运行的应用程序。规范发展迅速，不断采用新技术，同时改进现有的功能。

然而，新技术要实行规范，往往是通过特定浏览器现有的功能来实现的。浏览器厂商通常为这样的功能添加了前缀，使它们不会干扰其他浏览器的实现；例如，requestAnimationFrame() 最初被 Mozilla 实现为 mozRequestAnimationFrame()。然后 WebKit 实现了它，将其函数命名为

供应商提供了对前缀实现以及标准实现的不同支持，这使得新功能的使用变得非常棘手，所以 HTML5 社区发明了一种被称为 polyfill 的东西。Polyfill 针对特定功性确定浏览器的支持级别，如果浏览器已经实现了该功能，您就可以直接访问它，否则，浏览器会向您提供一个暂时尽量模仿标准功能的实现。

几乎所有 polyfill 复杂性都涉及解决两个错误并在 return 语句前构成代码。第一个错误涉及 Chrome 10，它为时间传递一个 undefined 值。第二个错误涉及 Firefox 4.0，它将帧速率限制为每秒 35-40 帧。

虽然 requestNextAnimationFrame() polyfill 的实现很有趣，但不必理解它；相反，您只需要了解如何使用它即可，我会在下一节说明这一点。

清单 8 显示了游戏的动画循环，一般将该循环称为游戏循环：

animate() 函数根据当前时间计算动画的帧速率。（参见 ，了解有关

以 fps 计算动画速率

清单 9 显示了 Snail Bait 如何计算其帧速率，以及如何更新在 中显示的帧速率值：

帧速率只是自上一个动画帧开始计算的时间量，所以您也可以认为它是 frame per second（帧每秒）而不是 frames per second（每秒的帧数），这使得它不太像是一个速率。您可以采用更严格的方法，在几个帧中保持平均帧速率，但我还没有发现这样做的必要性，事实上，自最后一个动画帧起所用的时间就正是我在 中所需要的。

还演示了一个重要的动画技术：执行任务的速率不同于动画速率。如果我在每一个动画帧都更新帧/秒值，则无法读取速率，因为它总是在不断变化；我将该设置改为每秒更新一次。

设置好了游戏循环和帧速率之后，我现在就准备开始滚动背景了。

Snail Bait 的背景（如图 3 所示）在水平方向缓慢滚动：

因为背景的左右边缘是完全相同的，所以背景可以无缝地滚动，如图 4 所示：

图 4. 完全相同的边缘实现平滑的过渡（左：右边缘；右：左边缘）

Snail Bait 通过绘制两次背景，使背景无休止地滚动，如图 5 所示。最初，如图 5 的顶部截屏所示，左侧的背景图像完全在屏幕上，而右侧的背景图像则完全在屏幕外。随着时间的推移，背景开始滚动，如图 5 的中部和底部截屏所示：

图 5. 从右侧滚动到左侧：半透明区域代表在屏幕外的图像部分

函数绘制两次图像，试着在同一位置上进行绘制。明显的滚动由不断将画布坐标系统平移到左侧而显示的，使得背景看似滚动到了右侧。

（您如何理解平移到左侧，但滚动到右侧的明显矛盾：将画布想象为在一张很长的纸上的一个空图片帧。这张纸就是坐标系，将它向左侧平移，就像将它在帧[画布]下面向左侧滑动左侧一样，因此，画布看起来就移动到右侧。）

清单 10. 滚动背景

一个看似琐碎的计算仍然保留：计算 backgroundOffset，这决定了为每个动画帧将画布的坐标系统平移多远。虽然该计算本身确实是琐碎的，但它具有重要的意义，所以我接下来将会讨论它。

动画的帧速率各不相同，但您不能让不同的帧速率影响您的动画运行速率。例如，无论动画的底层帧速率是多少，Snail Bait 都以 42 像素/秒的速度滚动背景。动画必须是基于时间的，这意味着速度以像素/秒指定，并且一定不能依赖于帧速率。

使用基于时间的运动来计算给定帧中移动某个对象的像素数，这很简单：用速度除以当前帧速率。速度（像素/秒）除以帧速率（帧/秒），结果是像素/帧，这意味着您在当前帧中需要将某个东西移动该数量的像素。

清单 11 显示了 Snail Bait 如何使用基于时间的运动来计算背景的位移：

清单 11. 设置背景位移

setBackgroundOffset() 函数计算在当前帧中背景需移动的像素数，用背景的速度除以当前帧速率来计算它。然后将该值加到当前背景的位移。

为了持续滚动背景，setBackgroundOffset() 在该值小于 0 或大于背景宽度时将背景位移重置为 0。

如果您曾经坐在行驶中的汽车的乘客座位上，看着您的手刀穿过高速的电线杆，你就知道靠近自己的的东西的移动速度比距离远的东西更快。这就是所谓的 视差。

Snail Bait 是一个 2D 游戏平台，但它使用温和的视差效果，使平台看起来仿佛比背景更接近您。该游戏通过滚动平台的速度明显快于后台而实现视差。

图 6 演示了 Snail Bait 如何实现该视差。上面的截屏显示了在一个特定时间点上的背景，而底部的截屏显示了一些动画帧后面的背景。从这两个截屏可以看出，在相同的时间长度中，平台的移动比背景远得多。

图 6. 视差：平台（近）滚动得比背景（远）更快

清单 12 显示了设置平台速度和位移的函数：

清单 12. 设置平台速度和位移

函数，在需要绘制游戏的下一个动画帧时，浏览器会调用该函数。然后，该 animate() 函数调用一个 draw() 函数来绘制下一个动画帧。位于开发阶段中的 draw() 函数的代码如清单 13 所示：

draw() 函数设置了平台速度，并为背景和平台设置了位移。然后，它绘制背景、跑步者和平台。

在下期文章中，我会告诉您如何将 Snail Bait 代码封装在一个 JavaScript 对象中，以避免产生名称空间的冲突。我还将告诉您如何暂停游戏，包括如何在窗口失去焦点时自动暂停，以及如何在窗口重新获得焦点时通过倒计时重新启动游戏。您还可以了解如何用键盘控制该游戏的跑步者。接下来，我们将学习如何将 CSS 过渡和插话功能用于游戏循环。下次再见。

#消费均衡两次重试之间的时间间隔

#如果其超时，将会可能触发rebalance并认为已经死去

#确认zookeeper连接建立操作客户端能等待的最长时间