Working with Audio - HTML5 Canvas - page 602

var var ALIEN_START_X = 25 ;

var

var ALIEN_START_Y = 25 ;
var

var ALIEN_ROWS = 5 ;
var

var ALIEN_COLS = 8 ;
var var ALIEN_SPACING = 40 ;

Also,inthe canvasApp() function, weneedtosetupevent handlers for mouseup and mouse-
move . To create the game loop, we need to set up our interval to call the run() function:

theCanvas . addEventListener ( "mouseup" , eventMouseUp , false false );

theCanvas . addEventListener ( "mousemove" , eventMouseMove , false

false );

function function gameLoop () {

window . setTimeout ( gameLoop , 20 );
run ()

}

gameLoop ();

At this point, run() will be called and our game loop will start by calling the function associ-
ated with the value of appState .

Preloading all assets without global variables

We just showed that the appState variable was initialized to STATE_INIT , which means that
when the run() function is called for the first time, the initApp() function will be called.
The good news (at least for this discussion) is that initApp() does very little that we have
not already seen—it just does it in the context of the Canvas application. The result? Now we
don't need any global variables.
Inthefollowingcode,noticethatweareusingthesamestrategy.Wehaveasingleeventhand-
ler for all loaded assets ( itemLoaded() ), we set itemsToLoad to 5 (three graphics and two
sounds), and we set the appState to STATE_LOADING at the end of the function. The rest of
the code is all simple review:

function function initApp () {

loadCount = 0 ;
itemsToLoad = 5 ;
explodeSound = document . createElement ( "audio" );
document . body . appendChild ( explodeSound );
audioType = supportedAudioFormat ( explodeSound );
explodeSound . addEventListener ( "canplaythrough" , itemLoaded , false false );

explodeSound . setAttribute ( "src" , "explode1." + audioType );

shootSound = document . createElement ( "audio" );