HTML and CSS Reference
In-Depth Information
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()
function:
function startLevel() {
for (var r = 0; r < ALIEN_ROWS; r++) {
for( var c= 0; c < ALIEN_COLS; c++) {
aliens.push({speed:2,x:ALIEN_START_X+c*ALIEN_SPACING, y:ALIEN_START_Y+r*
ALIEN_SPACING,width:alienImage.width, height:alienImage.height});
}
}
}
Mouse control
Before we talk about the game play itself, let's quickly discuss mouse event handlers,
which will collect all user input for the game. When the player moves the mouse, the
eventMouseMove()
handler is called. This function operates just like the same function
we created for the audio player, except for the last two lines. Those two lines set the
