HTML5 Canvas [133]
theCanvas.addEventListener("mousemove",eventMouseMove, false);
setInterval(run, 33);
At this point, run() will be called and our game loop will start by calling the function associated 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.
In the code below, notice that we are using the same strategy. We have a single event handler 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 initApp() {
loadCount=0;
itemsToLoad = 5;
explodeSound = document.createElement("audio");
document.body.appendChild(explodeSound);
audioType = supportedAudioFormat(explodeSound);
explodeSound.setAttribute("src", "explode1." + audioType);
explodeSound.addEventListener("canplaythrough",itemLoaded,false);
shootSound = document.createElement("audio");
document.body.appendChild(shootSound);
shootSound.setAttribute("src", "shoot1." + audioType);
shootSound.addEventListener("canplaythrough",itemLoaded,false);
alienImage = new Image();
alienImage.onload = itemLoaded;
alienImage.src = "alien.png";
playerImage = new Image();
playerImage.onload = itemLoaded;
playerImage.src = "player.png";
missileImage = new Image();
missileImage.onload = itemLoaded;
missileImage.src = "missile.png"; appState = STATE_LOADING;
}
If you recall, STATE_LOADING does nothing in our run() function; it just waits for all events to occur. The action here is handled by the itemLoaded() event handler, which works exactly like the itemLoaded() function we wrote for the audio player, except that it has two additional functions:
It must remove the event listeners from the two sound objects we created. This is because, in some browsers, calling the play() method of an HTMLAudioElement object—or changing the src attribute of an HTMLAudioElement object—initiates a load operation, which will then call the itemLoaded event handler a second time. This will cause unexpected results in your application. Furthermore, it is always a good idea to remove unneeded event handlers from your objects.
We set the appState to STATE_RESET, which will initialize the game the next time the run() function is called on the interval.
Here is the code with the two additional functions:
function itemLoaded(event) {
loadCount++;
if (loadCount >= itemsToLoad) {
shootSound.removeEventListener("canplaythrough",itemLoaded, false);
explodeSound.removeEventListener("canplaythrough",itemLoaded,false);
appState = STATE_RESET;
}
}
Resetting the game
In the run() function, the STATE_RESET state calls the resetApp() function, which in turn calls startLevel(). It also sets the volume of our two sounds to 50% (.5) before setting the appState to STATE_PLAYING:
function resetApp() {
startLevel();
shootSound.volume = .5;
explodeSound.valume = .5;
appState = STATE_PLAYING;
}
The startLevel() function traverses through two nested for:next loops, creating the rows of aliens by column. Each time we create an alien, we push a dynamic object into the aliens array with the following properties:
speed
The number of pixels the aliens will move left or right on each call to drawScreen().
x
The starting x position of the alien on the screen. This value is set by the column (c) multiplied by ALIEN_SPACING, added to ALIEN_START_X.
y
The starting y position of the alien on the screen. This is set by the row (r) multiplied by ALIEN_SPACING, added to ALIEN_START_X.
width
The width of the alien image.
height
The height of the alien image.
Here is the code for the startLevel()