本节书摘来自华章出版社《HTML5 2D游戏编程核心技术》一书中的第3章，第3.3节实现游戏主循环，作者［美］ 戴维·吉尔里，更多章节内容可以访问云栖社区“华章计算机”公众号查看。
3.3 实现游戏主循环
既然我们已经具备了绘制图形和动画这个先决条件，现在就可以让Snail Bait游戏动起来了。在一开始，我们会在Snail Bait游戏的HTML文件中为requestNextAnimationFrame()函数添加一段JavaScript代码，如程序清单3.7所示。
程序清单3.7 HTML
程序清单3.8列出了游戏动画循环的开始阶段代码，一般称为游戏主循环。
程序清单3.8 游戏主循环
背景图像的onload事件处理程序调用startGame()函数，该函数通过第一次调用request-NextAnimationFrame()的polyf?ill实现来启动游戏。然后，到了绘制游戏第一个动画帧的时候，浏览器将会调用animate()函数。
animate()函数调用calculateFps()函数，使用当前时间值来计算动画的帧速率（阅读3.2.1节了解更多关于时间值的信息）。在计算完帧速率后，animate()函数调用draw()函数绘制下一个动画帧。然后，animate()函数调用requestNextAnimationFrame()函数维持动画。
