HTML5 Canvas, 2nd Edition

Turn-Based Game Flow and the State Machine

Our game logic and flow is separated into 16 discrete states. The entire application runs on a 40-frames-per-second interval timer:

switchGameState(GAME_STATE_INIT);
var FRAME_RATE = 40;
var intervalTime = 1000/FRAME_RATE;
setInterval(runGame, intervalTime )

As with the other games, in Chapter 8 and earlier in this chapter, we use a function reference state machine to run our current game state. The switchGameState() function transitions to a new game state. Let’s discuss this function briefly and then move through the rest of the game functions.

Note

We do not reprint each line of code or dissect it in detail here. Use this section as a guide for perusing the entire set of game code included at the end of this chapter (in Example 9-2). By now, you have seen most of the code and ideas that create this game logic. We break out the new ideas and code in the sections that follow.

GAME_STATE_INIT

This state loads the assets we need for our game. We are loading only a single tile sheet and no sounds for Micro Tank Maze.

After the initial load, it sends the state machine to the GAME_STATE_WAIT_FOR_LOAD state until the load event has occurred.

GAME_STATE_WAIT_FOR_LOAD

This state simply makes sure that all the items in GAME_STATE_INIT have loaded properly. It then sends the state machine to the GAME_STATE_TITLE state.

GAME_STATE_TITLE

This state shows the title screen and then waits for the space bar to be pressed. When this happens, it sends the state machine ...