Lesson 46: Nested Loops
The last lesson had some pretty heavy math. It's time to take a break from that and blow some stuff up.
1. In the gameloop() function, within the block of code that executes when a collision between an enemy ship and the player's ship occurs, call the explode() function twice; once to explode the player's ship and once to explode the enemy ship.
2. Now create the explode function that will cause an explosion at the same location of the element that is passed to it.
explosion.gif is an animated gif that was included in the project files for this set of lessons. Unlike most animated gifs that are saved to loop forever, explosion.gif plays only once. Because the last frame of the animated GIF is transparent, the image is not visible once the animation plays one time through.
Adobe Photoshop allows you to save animated GIFs to only play once. You can also do this with GIMP, a free photo editing program.
Recall from a previous lesson that you already created a for loop within the gameloop() function to move all of the bullets.
3. Expand on the else block of this code (the portion that actually moves a bullet forward) so that it also checks if that bullet collides with any of the enemies.
Note that there is now a for loop inside another for loop. These are nested loops. The first loop is looping through each bullet, and for each bullet another loop is used to loop through each of the enemies to see if any of them collide with the bullet.
It is important to use a different variable to iterate through the bullets and the enemies. In this case, you are using i to iterate through the bullet elements and j to iterate through the elements in the enemies Array.
When a collision occurs, the bullet is removed from the bullets div, the explosion is started at the location of the enemy, and the enemy is placed back above the gameScreen. Because the explosion occurs in the location of the element that is passed in the explode() function, it is important that explode() is called prior to placeEnemyShip().
Now you should be able to destroy enemy ships for as long as you like.
However, you may notice in some browsers that the animated explosion only plays once, or until the first explosion is complete. This is because the browser is downloading the image only once and just re-using that same image; which in this case is set to only loop one time.
4. Force explosion.gif to be re-downloaded every time an explosion occurs.
You can do this by tricking the browser into downloading the same image by using a different URL.
Modifying the URL in this way is a common method for forcing a browser to reload a page, or in this case an image, that is already cached on the users machine.