Canvas Games: Part I - HTML5 Canvas - page 667

case case GAME_STATE_GAME_OVER :

currentGameStateFunction = gameStateGameOver ;
break

break ;

}

}

The gameLoop() function call will start the application by triggering the iteration of the run-
Game() function by use of the setTimeout() method. We will call the runGame() function
repeatedly in this setTimeout() method. runGame() will call the currentGameStateFunc-
tion referencevariableoneachframetick.Thisallowsustoeasilychangethefunctioncalled
by runGame() based on changes in the application state:

gameLoop ();

function function gameLoop () {

runGame ();
window . setTimeout ( gameLoop , intervalTime );

}

function function runGame (){

currentGameStateFunction ();

}

Let'slookatthecompletecode.Wewillcreatesomeshellfunctionsforthevariousapplication
state functions. Before the application starts, we will call the switchGameState() function
and pass in the constant value for the new function we want as the currentGameStateFunc-
tion :

//*** application start
switchGameState ( GAME_STATE_TITLE );

In Example 8-9 , we will use the GAME_STATE_TITLE state to draw a simple title screen that
will be redrawn on each frame tick.

Example 8-9. The tile screen state
< script type = "text/javascript" >
window . addEventListener ( 'load' , eventWindowLoaded , false false );

function function eventWindowLoaded () {

canvasApp ();

}