HTML and CSS Reference
In-Depth Information
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:
1. 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 ob-
ject—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.
2. 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;
}
}
Search WWH ::




Custom Search