• Choose a category
• All
• Classic-Fiction

For the saucers and the player, we will pass a number literal into the createExplode() function. In the saucer’s case, we pass in a 1. For the player ship, we pass in a 4:

createExplode(player.x+player.halfWidth, player.y+player.halfWidth,50,4);

Note that the createExplode() function call for the player is in the playerDie() function, which is called from checkCollisions().

NOTE

After we discuss adding sound and a particle pool to this game, we will present the entire set of code (Example 9-1), replacing the Geo Blaster Basic code. There will be no need to make the changes to the individual functions.

Adding Sound

In Chapter 7, we covered everything we need to know to add robust sound management to our canvas applications. If you are unfamiliar with the concepts presented in Chapter 7, please review that chapter first. In this chapter, we will cover only the code necessary to include sound in our game.

Arcade games need to play many sounds simultaneously, and sometimes those sounds play very rapidly in succession. In Chapter 7, we used the HTML5

NOTE

As of this writing, the Opera browser in Windows offers the best support for playing sounds. If you are having trouble with the sound in this game, any other sound example in the book, or in your own games, please test them out in the Opera browser.

The sounds for our game

We will be adding three sounds to our game:

A sound for when the player shoots a projectile (shoot1.mp3, .ogg, .wav)

A sound for explosions (explode1.mp3, .ogg, .wav)

A sound for when the saucer shoots a projectile (saucershoot.mp3, .ogg, .wav)

In the file download for this chapter, we have provided each of the three sounds in three different formats: .wav, .ogg, and .mp3.

Adding sound instances and management variables to the game

In the variable definition section of our game code, we will create variables to work with the sound manager code from Chapter 7. We will create three instances of each sound that goes into our pool:

var explodeSound;

var explodeSound2;

var explodeSound3;

var shootSound;

var shootSound2;

var shootSound3;

var saucershootSound;

var saucershootSound2;

var saucershootSound3;

We also need to create an array to hold our pool of sounds:

var soundPool = new Array();

To control which sound we want to play, we will assign a constant string to each, and to play the sound, we only ever need to use the constant. This way, we can change the sound names easily, which will help in refactoring code if we want to modify the sounds at a later time:

const SOUND_EXPLODE = "explode1";

const SOUND_SHOOT = "shoot1";

const SOUND_SAUCER_SHOOT = "saucershoot"

Finally, we need a variable called audioType, which we will use to reference the current file type (.ogg, .mp3, or .wav) by the sound manager code.

Loading in sounds and tile sheet assets

In Chapter 7, we used a function to load all of the game assets while our state machine waited in an idle state. We will add this code to our game in a function called gameStateInit():

function gameStateInit() {

loadCount = 0;

itemsToLoad = 16;

explodeSound = document.createElement("audio");

document.body.appendChild(explodeSound);

audioType = supportedAudioFormat(explodeSound);

explodeSound.setAttribute("src", "explode1." + audioType);

explodeSound.addEventListener("canplaythrough",itemLoaded,false);

explodeSound2 = document.createElement("audio");

document.body.appendChild(explodeSound2);

explodeSound2.setAttribute("src", "explode1." + audioType);

explodeSound2.addEventListener("canplaythrough",itemLoaded,false);

explodeSound3 = document.createElement("audio");

document.body.appendChild(explodeSound3);

explodeSound3.setAttribute("src", "explode1." + audioType);

explodeSound3.addEventListener("canplaythrough",itemLoaded,false);

shootSound = document.createElement("audio");

audioType = supportedAudioFormat(shootSound);

document.body.appendChild(shootSound);