Javascript 2 arrays collision detection

Question

I am making a game with the html5 canvas and IE 11 and have 2 arrays:

var bodies = [];
var bullets = [];

The bodies array stores the player and the enemies, while the bullets array stores the bullets. I use object constructors to add new objects when I need to. I want the player to disappear when they come in contact with an enemy. I am trying this:

for (i=0; i<bodies.length; i++) {
  //I add 30 to the x value because all bodies are 30px long
  if (bodies[i].x + 30 == player.x) {
    bodies.splice(0, 1);
    //the player is always in the 0 spot in the array
  }
}

However this does not work and the enemys walk through the player. Is there a better way to this? I appreciate any help.

Answer 1

A collision happens when the position (x,y) of bullet is inside the enemy body (x,y) yet your position comparison is not doing this space aware check. Also, your question is not making it clear whether bullets are involved or just body to body (player/enemy) position collision.

This introduces a check for such position overlap :

if (player.x >= bodies[i].x  &&
    player.x <= bodies[i].x + 30 ) {

    bodies.splice(0, 1);
    //the player is always in the 0 spot in the array
}

I am guessing you are solving for a one dimensional world, hence just the x ... cool good to start simple then expand ... once solved then extend to 2D (x,y) or 3D (x,y,z) or even ND by including those additional dimensions in similar boundary comparisons as you have for just x

Answer 2

Maybe this condition (bodies[i].x + 30 == player.x ) never holds. In order to move the player and the enemies you add a velocity to them, don't you? So, that velocity surely is greater than 1 (say, 2). So, at one moment it will happen that, for instance, bodies[i].x + 30 = 99 and player.x = 100, and the next moment, after adding "2" to bodies[i].x, you end with bodies[i].x + 30 = 101 and player.x = 100.

Instead of that condition (bodies[i].x + 30 == player.x), try checking whether the bodies[i] and the player overlaps with a condition like:

if(bodies[i].x > player.x && bodies[i].x + 30 <= player.x){...}

Answer 3

I use this method for collision detection:

// **isColliding()** returns true if two passed bodies are colliding.
// The approach is to test for five situations.  If any are true,
// the bodies are definitely not colliding. If none of them
// are true, the bodies are colliding.
// 1. b1 is the same body as b2.
// 2. Right of `b1` is to the left of the left of `b2`.
// 3. Bottom of `b1` is above the top of `b2`.
// 4. Left of `b1` is to the right of the right of `b2`.
// 5. Top of `b1` is below the bottom of `b2`.
function isColliding(b1, b2) {
    return !(
        b1 === b2 ||
        b1.x + b1.width < b2.x - b2.width ||
        b1.y + b1.height < b2.y - b2.height ||
        b1.x - b1.width > b2.x + b2.width ||
        b1.y - b1.height > b2.y + b2.height
    );
}

_{Adopted from Mary live-codes a JavaScript game from scratch – Mary Rose Cook at Front-Trends 2014}