HTML5 Canvas, 2nd Edition

Geo Blaster Game Structure

The structure of the game application is very similar to the structure we started to build earlier in this chapter. Let’s take a closer look at the state functions and how they will work together.

Game application states

Our game will have seven distinct game application states. We will store these in constants:

const GAME_STATE_TITLE = 0;
const GAME_STATE_NEW_GAME = 1;
const GAME_STATE_NEW_LEVEL = 2;
const GAME_STATE_PLAYER_START = 3;
const GAME_STATE_PLAY_LEVEL = 4;
const GAME_STATE_PLAYER_DIE = 5;
const GAME_STATE_GAME_OVER = 6;

Game application state functions

Each individual state will have an associated function that will be called on each frame tick. Let’s look at the functionality for each:

gameStateTitle()

Displays the title screen text and waits for the space bar to be pressed before the game starts.

gameStateNewGame()

Sets up all the defaults for a new game. All of the arrays for holding display objects are reinitialized—the game level is reset to 0, and the game score is set to 0.

gameStateNewLevel()

Increases the level value by one and then sets the “game knob” values to control the level difficulty. See the upcoming section Level Knobs for details.

gameStatePlayerStart()

Fades the player graphic onto the screen from 0 alpha to 1. When this is complete, level play will start.

gameStatePlayLevel()

Controls the play of the game level. It calls the update() and render() functions, as well as the functions for evaluating keyboard input for player ship control. ...