HTML and CSS Reference
In-Depth Information
and then reverse direction. To achieve the reversal in direction, multiply the
speed
property by
-1
. If the aliens are moving to the right (
speed = 2
), this will make the
speed
= -2
, which will subtract from the
x
position and move the aliens to the left. If the aliens
hit the left side of the canvas, the
speed
property will again be multiplied by
-1
(
-2 *
-1
), which will equal
2
. The alien will then move to the right because
2
will be added
to the
x
value for the alien each time
drawScreen()
is called:
//Move Aliens
for (var i=aliens.length−1; i>= 0;i−−) {
aliens[i].x += aliens[i].speed;
if (aliens[i].x > (theCanvas.width-aliens[i].width) || aliens[i].x < 0) {
aliens[i].speed *= -1;
aliens[i].y += 20;
}
if (aliens[i].y > theCanvas.height) {
aliens.splice(i,1);
}
}
The next step in
drawScreen()
is to detect collisions between the aliens and the missiles.
This part of the code loops through the
missiles
array backward while nesting a loop
through the
aliens
array. It will test every missile against every alien to determine
whether there is a collision. Since we have already covered the
hitTest()
function, we
only need to discuss what happens if a collision is detected. First, we call the
play()
function of the
explodeSound
. This is the second critical line of code in this iteration of
Space Raiders
, as it plays (or attempts to play) the explosion sound every time a collision
is detected. After that, it splices the
alien
and
missile
objects out of their respective
arrays, and then breaks out of the nested
for:next
loop. If there are no aliens left to
shoot, we set the
appState
to
STATE_RESET
, which will add more aliens to the canvas so
the player can continue shooting:
missile: for (var i=missiles.length−1; i>= 0;i−−) {
var tempMissile = missiles[i]
for (var j=aliens.length-1; j>= 0;j−−) {
var tempAlien =aliens[j];
if (hitTest(tempMissile,tempAlien)) {
explodeSound.play();
missiles.splice(i,1);
aliens.splice(j,1);
break missile;
}
}
if (aliens.length <=0) {
appState = STATE_RESET;
}
}
The last few lines of code in
drawScreen()
loop through the
missiles
and
aliens
arrays,
and draw them onto the canvas. This is done using the
drawImage()
method of the