HTML and CSS Reference
In-Depth Information
Game Timer Loop
Games on HTML5 Canvas require the use of the repeated update/render loop to simulate an-
imation. We do this by using the
setTimeout()
JavaScript function, which will repeatedly
call a function of our choosing at millisecond intervals. Each second of game/animation time
is made up of 1,000 milliseconds. If we want our game to run at 30 update/render cycles per
second, we call this a 30 frames per second (FPS) rate. To run our interval at 30 FPS, we first
need to divide 1,000 by 30. The result is the number of milliseconds in each interval:
const
const
FRAME_RATE
=
30
;
var
var
intervalTime
=
1000
/
FRAME_RATE
;
gameLoop
()
function
function
gameLoop
() {
drawScreen
();
window
.
setTimeout
(
gameLoop
,
intervalTime
);
}
By calling the
drawScreen()
function repeatedly on each interval time-out, we can simulate
animation.
NOTE
Sometimes we will refer to each of the frame intervals as a
frame tick
.
