本节书摘来自华章出版社《HTML5 2D游戏编程核心技术》一书中的第3章，第3.6节制作基于时间的运动，作者［美］ 戴维·吉尔里，更多章节内容可以访问云栖社区“华章计算机”公众号查看。
3.6 制作基于时间的运动
游戏帧速率是会变化的，但是不能允许变化的帧速率影响到游戏中物体运动的速率，包括背景。可能干扰到游戏动画的任何噪声，都不应该成为影响生成平滑运动的原因。例如，不管潜在的动画帧速率是多少，Snail Bait游戏都会以每秒25个像素的速率滚动背景。运动必须是基于时间的，也即它仅仅依赖时间（例如，像素/秒），而不是动画帧速率。
对于任何动画帧来说，使用基于时间的运动来计算需要移动的像素数量都是简单的：使用自上一动画帧以来经过的时间（以秒为单位）乘以物体运动的速率。当你使用上一个动画帧经过的时间（秒/帧）乘以速率（像素/秒）时，秒被约掉，得到的结果以像素/帧为单位，从而得到当前的时间帧里需要移动的像素点数。
程序清单3.15显示了Snail Bait游戏如何通过使用基于时间的运动来计算背景的偏移量。
程序清单3.15 设置背景偏移量
为了计算当前帧内背景需要移动的像素数，setBackgroundOffset()函数使用前一个动画帧到当前动画帧的时间间隔，以秒为单位，乘以背景移动速率。然后将那个值加入到背景的偏移量中。
为了能够持续地滚动背景，setBackgroundOffset()函数会在偏移量小于零或者大于背景的宽度时，重新将背景的偏移量置为零。
Snail Bait游戏使用基于时间的运动来移动游戏中的所有物体，不仅仅是背景。
