ActionScritp 3 removeChild in loop - actionscript-3

Question

I have two arrays, fireballs and gombas (enemies).
When I create fireball and gomba, I add them into arrays using push();
I shoot fireballs and move gombas using foor loop
for (var f:int = 0; f < fireballs.length; f++)
{
// move fireballs
}
I also remove fireballs if it goes too far, for example
if (myFireball.x + 1000 < player.x)
{
if (myFireball.parent)
{
myFireball.parent.removeChild(myFireball);
fireballs.splice(myFireball, 1);
}
}
I have no problem removing fireballs, but if fireball hitTestObject gomba, I want to remove both, fireball and gomba, ant thats my problem.
I tried on this way and I get error, a term is undefined and has no properties
for (i = 0; i < fireballs.length; i++)
{
for (var m = 0; m < gombas.length; m++)
{
if (fireballs[i].hitTestObject(gombas[m]))
{
if (fireballs[i].parent)
{
fireballs[i].parent.removeChild(fireballs[i]);
// same for gombas
}
}
}
}
If I use same loop but just check if fireballs and gombas are visible, if fireballs hit gombas I set visible to false and it works ok. Why it wont work with removeChild.

Answer 1

As #itcouldevenbeaboat says, when looping through an array and removing objects, it's better to loop backwards; that way, you won't have index issues.
For example, with the array ["one","two","three"], if you looped through and removed like so:
for( var i:int = 0; i < myArray.length; i++ )
myArray.splice( i, 1 );
What's happening, is this:
i starts at 0, which points to "one"
we remove the object at position 0 from myArray
myArray is now ["two","three"]
at the end of the loop, i is incremented, and becomes 1
we start the next iteraction, and i is 1, which points to "three"
In this example, we've skipped over the "two" String, because the splice has modified the array we're iterating. If we went backwards:
for( var i:int = myArray.length - 1; i >= 0; i-- )
myArray.splice( i, 1 );
Then we get this:
i starts at 2, which points to "three"
we remove the object at position 2 from myArray
myArray is now ["one","two"]
at the end of the loop, i is decremented, and becomes 1
we start the next iteraction, and i is 1, which points to "two"
Thus we remove all the objects from myArray, no problem.
For your particular example, as you're removing objects from the two arrays, you should iterate backwards, which should give you something like:
outer: for ( var i:int = fireballs.length - 1; i >= 0; i-- )
{
for ( var m:int = gombas.length - 1; m >= 0; m-- )
{
if (fireballs[i].hitTestObject(gombas[m]))
{
// remove our fireball and gombas graphics
if( fireballs[i].parent != null )
fireballs[i].parent.removeChild( fireballs[i] );
if( gombas[m].parent != null )
gombas[m].parent.removeChild( gombas[i] );
// remove the fireball and gombas from the array; this is assuming
// that once a fireball hits a gomba, they both disappear
gombas.splice( m, 1 );
fireballs.splice( i, 1 );
// break to the outer loop; the fireballs one, as we don't need
// to go any further in the inner one
break outer;
}
}
}
Note the outer label on the fireballs loop; this lets us jump out once we detect a collision between a fireball and a gomba.
If you want a fireball to hit multiple gombas, then just don't remove the graphics or splice the array.