11-游戏定时器循环

8.5.1　游戏定时器循环

HTML5 Canvas的游戏需要使用在循环中重复刷新和渲染的方式模拟动画。为此，需要使用JavaScript的setTimeout()函数。该函数能够以毫秒级的时间间隔重复调用指定的函数。在游戏和动画中，每1s由1000ms组成。如果希望游戏每秒运行30个更新和渲染周期，那么称之为游戏的帧率是30帧每秒（FPS）。要以30FPS的帧率运行，首先用1000除以30，然后将结果作为每次间隔的毫秒数。

const FRAME_RATE = 30;
var intervalTime = 1000/FRAME_RATE;
gameLoop()
function gameLoop() {
　　　　　 drawScreen();
　　　　　 window.setTimeout(gameLoop, intervalTime);
　　}

通过在每个间隔调用drawScreen()函数，就可以模拟动画了。

提示

有时也将每帧间隔的时间称为帧时隙。