Space Runner - HTML5 Game Development - page 98

Game loop
The imeout loop is used for data and logic updates, while the animaion frame is used to
redraw the view.
The setTimeout or setInterval funcion is used to keep a ime interval that keeps
updaing things in the game, such as a imer and a game score that is based on ime or
the movement of game objects.
The requestAnimationFrame funcion, on the other hand, is useful to draw loops. The
browser executes the callback when computer usage is relaively low, and the browser will
automaically slow down the frequency of the callback when the CPU is under heavy load.
Note that these two loops are created in the gameScene object.
Then, inside each loop handler, it invokes the child objects for a ick event.
This is because the loop acts like a global clock. We want to place it in the
parent object, say the game scene.
The main Game loop
The ick funcion is the main Game loop controlling the runway movement. It does several
things, which are listed as follows:
F Increases the loop count
F Updates the runway movement, which updates the posiion of the iles and
determines any collision
F Updates the duraion to trigger the next ick
F Registers another setTimeout funcion with a duraion
Moving the tiles down
We need a way to illustrate a running and moving scenario. In this simple game,
we animate the running by moving each ile down one grid at a ime.
We update the y posiion in the imeout loop but draw the new posiion in the request
animaion frame callback.
The duration
We decrease the imeout duraion between each imeout callback. This makes the game run
faster gradually, and thus increases the game diiculies from ime to ime:
var duration = Math.max(801-this.round, 100);