本节书摘来自华章出版社《HTML5 2D游戏编程核心技术》一书中的第1章，第1.1节，作者［美］　戴维·吉尔里，更多章节内容可以访问云栖社区“华章计算机”公众号查看。

3.5　滚动游戏背景

除跑步小人外，Snail Bait游戏中的所有物体，在游戏运行时都会在水平方向上滚动。本节将讨论这个滚动功能的实现。3.5.1　平移坐标系每一个canvas元素都包含两个部分：HTML元素以及绘图区域，如图3.3所示的一个画框和一片绘图区域。绘图区域有一个坐标系，这样你就可以在指定的位置上绘制图形，如图3.3中的文字，它位于坐标（150，100）。可以使用程序清单3.11中的代码，在canvas元素中绘制那段文本。

图3.3　canvas元素（画框）和它的绘图区域

程序清单3.11　在绘图区域中绘制文本

坐标系的原点，即位置（0，0），默认是在canvas元素的左上角。X坐标从左向右增加，Y坐标从上向下增加，如图3.3所示。X和Y坐标的方向是不能改变的，但是坐标系的原点不是固定的。可以移动它，如图3.4所示，如同移动画框下面的绘图区域一样。

图3.4　平移坐标系

在图3.4中，坐标系向左平移了100个像素。平移坐标系并绘制文本的代码在程序清

单3.12中给出。程序清单3.12　设置背景偏移量

传递给context.translate()的两个参数代表了在水平方向和垂直方向上移动坐标系的像素距离。在这个例子中，我们仅仅沿水平方向平移了坐标系，但context.translate()函数可以在两个方向平移。

注意，和图3.3中原始位置相比，尽管图3.4中的文字具有相同的坐标，但是相对于canvas元素向左移动了一些距离。反过来说，canvas元素相对于文字，向右移动了一些距离。很明显，移动来自于坐标系的平移。可以在绘图区域的任意位置进行图形绘制，但是如果超出了canvas元素的范围，超出部分的图形将变得不可见，如图3.5所示。

图3.5　超出画框（canvas元素）的绘制没有效果

程序清单3.13给出了图3.5中坐标系平移用到的代码。

程序清单3.13　设置背景偏移量

前面的代码将坐标系平移到足够靠左的位置，这样canvas元素中仅有部分文字是可见的。

正如前面讨论的那样，通过持续地平移坐标系，并在相同的坐标值下进行重新绘制，你就可以创作出明显的运动效果。这就是Snail Bait游戏滚动背景和其他物体的方法。3.5.2　滚动Snail Bait游戏的背景Snail Bait游戏的背景图像如图3.6所示。Snail Bait游戏将绘制背景两次，并且将其首尾相连，以适应滚动，如图3.7所示，图中蓝色的线（中间的线）并没有在游戏中画出，仅代表了两个背景的连接。　　　　??图3.6　背景图像

　　　　　　　　　　　　　　　??图3.7　两次绘制背景

drawBackground()函数如程序清单3.14所示。

程序清单3.14　绘制游戏背景

drawBackground()函数被draw()函数调用，Snail Bait游戏会在每一个动画帧中调用draw()函数。drawBackground()函数使得坐标系向左平移backgroundOffset个像素，绘制背景两次，并将它们首尾相连，然后平移坐标系到drawBackground()函数调用前的初始位置。为了滚动背景，Snail Bait游戏会持续地增加backgroundOffset的值。增加该值的影响如图3.8所示，从右向左滚动的半透明区域代表图像不在屏幕上显示的部分。canvas元素坐标系从右向左移动。

持续地向左平移坐标系，会使canvas元素中的游戏背景表现出向左移动的效果，正如你在图3.8中看到的那样。背景图像有1103像素宽，而游戏canvas元素只有800像素宽。当游戏开始时，backgroundOffset的值为零，两个背景唯一可见的部分是位于（0，0）处的图像的前四分之三，如图3.8顶部的截图所示。绘制在位置（background.width，0）上的剩余四分之一图像以及另一个图像，初始时是不可见的，因为它们位于canvas元素边界之外。游戏开始一段时间后，backgroundOffset不再是零，坐标系向左平移很大一段距离，如图3.8中部的截图所示。然而，画在（background.width，0）处的背景还是不可见的。

图3.8　增加backgroundOffset值的影响

在滚动的最后阶段（图3.8的底部截图），backgroundOffset等于背景图像的宽度值，背景可见的部分和滚动开始时可见的部分是完全一样的。此时，Snail Bait游戏会重新将backgroundOffset的值设置为零，重新回到图3.8的顶部截图所示的状态。

有意思的是，位于（background.width，0）位置后四分之一处的背景图像是不可见的。因为canvas元素和背景图片的大小不匹配。如果两者有相同的宽度，画在位置（background.width，0）上后四分之一的背景图像，在特定的时间点上，是可以显示出来的。前面的图像可能不是很明显，但好在背景图像有一个特点很适合作为游戏背景：图像左侧边缘和右侧边缘垂直方向的一列像素点是一样的，如图3.9所示。如果没有一样的边缘，在两个背景图像交汇的地方，会产生一条明显的不连续线，就像图3.7和图3.8中的蓝色线那样。目前滚动Snail Bait游戏背景还有一个问题没有解决：即游戏是如何调整backgroundOffset变量来控制背景滚动的？这个问题将留到下一节再解决，我们现在可以先不考虑潜在的帧速率变化，使用一个恒定的速率来滚动背景。为了产生平滑的滚动效果，请确保背景图像具有一样的边缘。