Canvas Games: Part I - HTML5 Canvas - page 694

1. Create a rocks: label, and then start to loop through the rocks array.
2. Create a missiles: label insidethe rocks iteration, andloopthroughthe playerMis-
siles array.
3. Do a bounding box collision detection between the last rock and the last missile.
Notice that we loop starting at the end of each array so that we can remove elements
(whencollisionsoccur)inthearraywithoutaffectingarraymembersthathavenotbeen
checked yet.
4. If a rock and a missile collide, remove them from their respective arrays, and then call
break rocks and then break missiles . We must break back to the next element in
an array for any object type that is removed.
5. Continueloopingthroughthemissilesuntiltheyhaveallbeencheckedagainstthecur-
rent rock (unless break rocks was fired off for a rock/missile collision).
6. Check each saucer, each saucer missile, and the player against each of the rocks. The
player does not need a label because there is only a single instance of the player. The
saucers and saucerMissiles will follow the same logic as missiles . If there is a
collision between one and a rock, break back to their respective labels after removing
the objects from their respective arrays.
7. After we have checked the rocks against all the other game objects, check the player-
Missiles against the saucers, using the same basic logic of loop labels, looping back-
ward through the arrays and breaking back to the labels when objects are removed.
8. Check the saucerMissiles against the player in the same manner.
Over the years, we have found this to be a powerful way to check multiple objects' arrays
against one another. It certainly is not the only way to do so. If you are not comfortable using
loop labels, you can employ a method such as the following:
1. Add a Boolean hit attribute to each object, and set it to false when an object is cre-
ated.
2. Loop through the rocks , and check them against the other game objects. This time the
direction (forward or backward) through the loops does not matter.
3. Before calling the boundingBoxCollide() function, be sure that each object's hit at-
tribute is false . If not, skip the collision check.
4. If the two objects collide, set each object's hit attribute to true . There is no need to
remove objects from the arrays at this time.