Combining Bitmaps and Sound - HTML5 Canvas - page 462

saucershootSound3.setAttribute("src", "saucershoot." + audioType);
saucershootSound3.addEventListener("canplaythrough",itemLoaded,false);
shipTiles = new Image();
shipTiles.src = "ship_tiles.png";
shipTiles.onload = itemLoaded;
shipTiles2 = new Image();
shipTiles2.src = "ship_tiles2.png";
shipTiles2.onload = itemLoaded;
saucerTiles= new Image();
saucerTiles.src = "saucer.png";
saucerTiles.onload = itemLoaded;
largeRockTiles = new Image();
largeRockTiles.src = "largerocks.png";
largeRockTiles.onload = itemLoaded;
mediumRockTiles = new Image();
mediumRockTiles.src = "mediumrocks.png";
mediumRockTiles.onload = itemLoaded;
smallRockTiles = new Image();
smallRockTiles.src = "smallrocks.png";
smallRockTiles.onload = itemLoaded;
particleTiles = new Image();
particleTiles.src = "parts.png";
particleTiles.onload = itemLoaded;
switchGameState(GAME_STATE_WAIT_FOR_LOAD);
}
Notice that we must create and preload three separate instances of each sound, even
though they share the same sound file (or files). In this function, we also load in our
tile sheets. The application scope itemsToLoad variable will be used to check against the
application scope loadCount variable in the load event callback itemLoaded() function,
which is shared by all assets to be loaded. This will make it easy for the application to
change state so that it can start playing the game when all assets have loaded. Let's
briefly look at the itemLoaded() function now:
function itemLoaded(event) {
loadCount++;
//console.log("loading:" + loadCount)
if (loadCount >= itemsToLoad) {
shootSound.removeEventListener("canplaythrough",itemLoaded, false);
shootSound2.removeEventListener("canplaythrough",itemLoaded, false);
shootSound3.removeEventListener("canplaythrough",itemLoaded, false);
explodeSound.removeEventListener("canplaythrough",itemLoaded,false);
explodeSound2.removeEventListener("canplaythrough",itemLoaded,false);