Question

So I’m designing a game in JavaScript, and I’m having some trouble with the way things are removed relating to my collision detection function.
It’s Asteroids, so some of the objects are named accordingly.

My collision detection function is designed to check if there are collisions between the player and an asteroid, or a bullet and an asteroid. In the case of a bullet and an asteroid, one would expect both the bullet and the asteroid to disappear.

However, given how I’m checking for collisions, removing both the bullet and the asteroid it’s collided with seems to be a challenge. Here is my relevant code:

for (var i=0;i<$_.mapObjs.length;i++) { //get one object to check
    var superBox = $_.mapObjs[i].hitBox; //get it's properties
    var objectName = $_.mapObjs[i].name;
    var isAsteroid =(objectName.indexOf("asteroid") == -1)?false:true; //is the object an asteroid?
    for (var y=0;y<$_.mapObjs.length;y++) { //get the object to check it against
        if (objectName !== $_.mapObjs[y].name) { //if we are not checking the object against its self
            var subName = $_.mapObjs[y].name;
            var subIsAsteroid = (subName.indexOf("asteroid") == -1)?false:true; //is the second object an asteroid?
            if (!(isAsteroid) || !(subIsAsteroid)) { //if we are not checking two asteroids against each other
                var subBox = $_.mapObjs[y].hitBox;
                var collision = rectIntersectsRect(superBox,subBox); //check for a collision using rectIntersectsRect
                if (collision) { //if there is a collision
                    if ((objectName == "player" && subIsAsteroid) || (isAsteroid && subName == "player")) { //if either of the objects are the player, then the player dies
                        if (!player.invincible)
                            player.death(); 
                    } else if ((objectName == "blankObject" && subIsAsteroid) || (isAsteroid && subName == "blankObject")) { //if either of the objects are a bullet, then we destroy the asteroid
                        Console.log(i + "," + y); //this is the problem area
                        Console.log("getting rid of " + objects[i].name + " and " + objects[y].name);
                        if (subIsAsteroid) { //splice the asteroid out of the second array
                            objects.splice(y,1);
                        } else { //splice the asteroid out of the first array
                            objects.splice(i,1);
                        }
                    }
                }
            }
        }
    }
}

Now, because I need both the asteroid and bullet to dissapear when they collide, I change

if (subIsAsteroid) {
    objects.splice(y,1);
} else {
    objects.splice(i,1);
}

to

objects.splice(y,1);
objects.splice(i,1);

but then, whenever there is a collision, the function randomly deletes two objects off the array, even though the positions of both y and i refer to the bullet and asteroid objects. What am i doing wrong?

Answer 1

.splice() doesn’t just remove random elements, but after the .splice(y,1) operation removes one element the indexes of all the elements after y will be one less than before – all of these later elements “move up”. So if i is greater than y it will no longer refer to the element you want it to.

If you remove whichever element has a higher index first it should be fine:

objects.splice(Math.max(y,i), 1);
objects.splice(Math.min(y,i), 1);

Having said that, I can’t tell from your code what the relationship between $_.mapObjs and objects is but I think it might cause problems. You have nested loops iterating over $_.mapObjs with y and i as loop indexes, but then you remove elements from objects based on the y and i indexes from $_.mapObjs. Do these two arrays have the same elements in the same order? This could explain your “random” element removal. Should you be splicing out of $_.mapObjs? If so, you’d need to adjust y and i after the removal so that you don’t skip elements on the next loop iteration.