Flying Before You Walk - HTML5 Mobile Game Development - page 15

setTimeout(Game.loop,30);

};

// Change an active game board
this.setBoard = function(num,board) { boards[num] = board; };

};
The boards are the pieces of the game updated and drawn onto the canvas. An example of a board might
be a background or a title screen. (In the next chapter, you create a special board for handling sprites.) The
Game.loop function loops through all the boards, checks if there is a board at that index, and if so, calls
that board's step method with the approximate number of seconds that have passed, followed by calling the
board's draw method, passing in the rendering context. For the draw call, the step call may have removed the
board, so checking again that the board exists with boards[i] && keeps the code from blowing up. Fin-
ally, setTimeout is used in the loop function to ensure that the loop runs again in 30 milliseconds. Using
setTimout instead of setInterval ensures that timer events don't back up if the game slows down, which
could lead to strange warp-like behavior. Because setTimeout doesn't retain the context of the called func-
tion, Game.loop needs to explicitly refer to the Game object instead of using the this keyword.

Timer Methods
There's more to JavaScript timers for game development than just setTimeout or setInterval . Chapter 9
discusses the requestAnimationFrame method that enables the browser to sync calls to your game with
screen updates. Also, hard coding the amount of time that has passed to a fixed number is generally a bad idea as
the timer may be called at different intervals depending on browser performance, but it should be okay for this
simple type of game.

Because boards drop from index 0 to the highest index, background boards (such as the starfield in the next
section) should be added to lower indexes, whereas elements added at the end, such as the score and HUDs,
should be drawn last.
Finally, the only method on the Game object that is called regularly during the game, Game.setBoard , is
defined. All this method does is set one of the game boards used in the loop method. It is used to switch active
GameBoards , which are used for title screens as well as the main section of the game.

Refactoring the Game Code
As you build games in the browser, you'll want to keep attention on the structure of what you're building.
JavaScript is a very flexible language, and without some discipline in how your game is structured, things can
fall apart quickly. A common pattern in this topic will be to show you how to use an API or technique quickly
and simply and then take some time to structure that code into a library or module.
The initial code for displaying a sprite on the screen in game.js is going to be replaced with code that does
the same but is structured in a way to be usable in a more complicated game.
Update game.js to use the Game class. Remove anything you have in game.js and add the code shown
in Listing 1-6 .
Listing 1-6: A refactored game.js method (game_class/game.js)
var sprites = {
ship: { sx: 0, sy: 0, w: 18, h: 35, frames: 3 }