对于我们的一个项目，我们不得不使用Javascript和jQuery来构建游戏。 我和我的搭档决定制作一个以太空为主题的动画游戏。 游戏的目的是为了让我们的太空飞船保持“纳特（Naut），我们的狗宇航员能够不撞到任何小行星而到达板的另一侧。
我们遇到了一些挑战，试图使屏幕上的物体实际移动。 我们的对象在屏幕上，但是它们是静态的并且没有动。 屏幕上的许多东西之一或会移动……，其余的只是挂了起来而没有动，这违背了我们游戏的目的。
我们可以使用window.requestAnimationFrame（）方法使宇宙飞船在屏幕上移动：
方法window.requestAnimationFrame（callback_function）以回调函数作为参数。 它消除了使用setTimeout（）或setInterval（）的麻烦，因为setTimeout（）或setInterval（）会在再次运行函数之前将函数延迟一定的毫秒数。 相反，window.requestAnimationFrame（）以递归方式工作，您可以在方法内调用方法—方法接收！ 使用window.requestAnimationFrame（）为屏幕上的内容设置动画将防止动画帧之间出现不一致的延迟，并且不会使浏览器陷入心脏骤停的境地，因为浏览器被迫执行重复调用功能来更改页面和显示动画。 如果用户的系统性能有限，则可能导致页面加载不稳定，动画帧之间的延迟时间间隔不一致。
为了移动小行星，我发现了使用jQuery的.animate方法为对象设置动画的替代方法：
此动画方法确实需要setInterval（）和延迟时间（以毫秒为单位），然后才能再次运行该函数。 屏幕上只有五个小行星，所以我们的浏览器没有讨厌我们，也没有可见的动画延迟。 我们确实尝试了没有setInterval（）的方法，并且浏览器不喜欢它，因为产生了太多的调用堆栈，无法对小行星进行反复动画处理。 .animate方法是另一种在屏幕上随机显示特定对象的方法。
jQuery的方法.animate将参数（ 属性，[duration]，[easing]，[complete] ）作为对象：
缓和和完整参数是可选的，并且您可以将许多其他可选参数用于该方法。 如果确实将缓动作为参数传递，则需要一个提供缓动功能的jQuery插件。
