Canvas Games: Part I - HTML5 Canvas - page 677

Geo Blaster Game Structure

Thestructureofthegameapplicationisverysimilartothestructurewestartedtobuildearlier
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 const GAME_STATE_TITLE = 0 ;

const

const GAME_STATE_NEW_GAME = 1 ;
const

const GAME_STATE_NEW_LEVEL = 2 ;
const const GAME_STATE_PLAYER_START = 3 ;

const const GAME_STATE_PLAY_LEVEL = 4 ;

const

const GAME_STATE_PLAYER_DIE = 5 ;
const 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() 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()

Increasesthe level valuebyoneandthensetsthe“gameknob”valuestocontrolthelevel
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()

Controlstheplayofthegamelevel.Itcallsthe update() and render() functions,aswell
as the functions for evaluating keyboard input for player ship control.