HTML and CSS Reference
In-Depth Information
case STATE_INIT:
initApp();
break;
case STATE_LOADING:
//wait for call backs
break;
case STATE_RESET:
resetApp();
break;
case STATE_PLAYING:
drawScreen();
break;
}
}
Initializing the game: no global variables
Now that we know a bit about the state machine construct we will use for this game,
it's time to set up the preload for our assets. As we mentioned previously, this game
has two sounds, shoot and explode, but it also has three images: a player, an alien, and
a missile.
Remember how we kept saying we'd do away with global variables in these applica-
tions? Well, here's where it happens. With the state machine, we now have a mecha-
nism to allow our application to wait for loading assets instead of leveraging only the
DOM's window
load
event.
In the
canvasApp()
function, we set up the following variables to use in the game.
The
appState
variable holds the current state constant:
var appState = STATE_INIT;
We use the
loadCount
and
itemsToLoad
variables in exactly the same way we used them
in the audio player application—except here we will be loading more items:
var loadCount= 0;
var itemsToLoad = 0;
The variables
alienImage
,
missileImage
, and
playerImage
will hold the loaded images
we use in the game:
var alienImage = new Image();
var missileImage = new Image();
var playerImage = new Image();
explodeSound
and
shootSound
will hold the references to the
HTMLAudioElement
objects
we will load:
var explodeSound ;
var shootSound;
The
audioType
variable will hold the extension of the valid audio file type for the browser
displaying the application:
