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
Search WWH ::




Custom Search