HTML and CSS Reference
In-Depth Information
cjs.Sound.alternateExtensions = ['aif', 'webm'];
preload = new cjs.LoadQueue(true, assetsPath);
preload.installPlugin(cjs.Sound);
preload.addEventListener("complete", game.start);
preload.loadManifest(manifest);
};
2. Before we have any preloader, we start the game directly in the
game.js
file.
Now we load the game; the loader will start the game only after all the assets are
loaded. We replace the
game.start()
method's execuion with
game.load()
inside the
game.js
ile.
3. When the game starts, we play the sound:
game.start = function() {
...
// existing code goes here.
cjs.Sound.play("start-game");
};
4. When the trash buton or the ingredients butons are clicked, we play the following
buton sound:
cjs.Sound.play("button");
5. We play the "money-earning" sound when we successfully serve the customer:
if (isEqual) {
cjs.Sound.play("earn-money");
// existing code goes here.
...
}
6. When we refill the ingredients, we play the refill sound:
cjs.Sound.play("refill");
Objective complete - mini debriefing
We have added sound effects to our game. Just as we used to preload the images, we need
to preload the audio files. Therefore, we use PreloadJS to load the audio assets. We start the
game after all the assets are loaded.
We can use the
<audio>
HTML tag to play the audio. However, an audio library, such as
SoundJS, would provide easier controls and fallbacks in a different technology when web
audio is not available.
