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

3.7　反转滚动方向

回想一下，Snail Bait游戏中所有的水平移动，都是通过持续地平移游戏绘图区域的坐标系，并持续地在相同的水平位置重新绘制所有物体的结果。这种产生明显水平运动的方法，可以使游戏代码在几个方面变得简单。首先，游戏不需要给每一个sprite对象计算水平位置，因为它们的水平位置从来都没有改变，相反，sprite对象控制它们自己的水平运动偏移量，正如背景偏移量控制自己的水平偏移运动一样。其次，改变方向使得所有物体在水平方向上朝相反的方向运动，这仅仅涉及改变游戏背景的移动速率，如程序清单3.16所示。程序清单3.16　向左、向右转换方向

再次提醒你，记住Snail Bait游戏的动画循环是连续的。设置bgVelocity变量值将会在下一次Snail Bait游戏绘制动画帧时起作用。

既然你应该已经理解了如何在不受动画帧速率影响的条件下，使用固定的频速率滚动背景，接下来就让我们看看在Snail Bait游戏中是如何使用前面讨论过的setBackgroundOffset()函数和drawBackground()函数的。