Detecting the collision of 2 divs with JavaScript

Question

I'm making a simple Space Invaders Clone in Web and ran into an issue. The code works well so far with the exception of the collision system. I need to destroy an enemy every time that the player's bullet hits it. In order to make it, I'm grabbing the x and y coordinates of both the enemies' div and the bullet's div. The issue appears on the values comparison: apparently getBoundingClientRect() grabs the x and y coordinates from within the element excluding its real size. Hence, according to my code, only when the bullet is perfectly inside the enemy that things would trigger. Is there a better way of doing it? How so?

Thanks in advance.

const shoot = (x) => {
  //Creates bullet
  const main = document.getElementById("main");
  const div_bullet = document.createElement("div");

  //Appends child
  main.appendChild(div_bullet);

  //Sets position
  div_bullet.style.top = "340px";
  div_bullet.style.left = x + "px";

  //Gives it a class
  div_bullet.classList.add("div_bullet");
  div_bullet.setAttribute("id", "bullet");

  //Deletes bullet
  setTimeout(() => {
    div_bullet.remove();
  }, 1000);
};

const load_game = () => {
  //Adding movement to the spaceship
  const space_ship = document.getElementById("space_ship");
  let x = 375;
  window.addEventListener("keydown", (e) => {
    switch (e.key) {
      case "ArrowLeft":
        if (x <= 15) break;
        x = x - 10;
        space_ship.style.left = x + "px";
        break;
      case "ArrowRight":
        if (x >= 725) break;
        x = x + 10;
        space_ship.style.left = x + "px";
        break;
      case "ArrowUp":
        if (document.getElementsByClassName("div_bullet").length === 0)
          shoot(x + 20);
        break;
      default:
        break;
    }
  });
};

const collision_system = () => {
  setInterval(() => {
    //Checks if any enemy was hit
    const e1 = document.getElementById("e1");
    const e2 = document.getElementById("e2");
    const e3 = document.getElementById("e3");
    const e4 = document.getElementById("e4");
    const e5 = document.getElementById("e5");

    const enemies_position = [{
        x: e1.getBoundingClientRect().x,
        y: e1.getBoundingClientRect().y
      },
      {
        x: e2.getBoundingClientRect().x,
        y: e2.getBoundingClientRect().y
      },
      {
        x: e3.getBoundingClientRect().x,
        y: e3.getBoundingClientRect().y
      },
      {
        x: e4.getBoundingClientRect().x,
        y: e4.getBoundingClientRect().y
      },
      {
        x: e5.getBoundingClientRect().x,
        y: e5.getBoundingClientRect().y
      },
    ];

    if (document.getElementById("bullet")) {
      const x_bullet = document
        .getElementById("bullet")
        .getBoundingClientRect().x;
      const y_bullet = document
        .getElementById("bullet")
        .getBoundingClientRect().y;

      console.log(
        "X: " + enemies_position[0].x + "Y: " + enemies_position[0].y
      );
      console.log("X bullet: " + x_bullet + "Y bullet : " + y_bullet);
      for (let i = 0; i < 5; i++) {
        if (
          enemies_position[i].x === x_bullet &&
          enemies_position[i].y === y_bullet
        )
          alert("Shoot!");
      }
    }
  }, 10);
};

document.addEventListener("DOMContentLoaded", () => {
  load_game();
  collision_system();
});

* {
  padding: 0px;
  margin: 0px;
}

body {
  background-color: black;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  width: 800px;
  height: 500px;
  border: 2px white solid;
  border-radius: 10px;
}

@keyframes enemies_move {
  from {
    left: 80px;
  }
  to {
    left: -80px;
  }
}

.enemies {
  margin-top: 20px;
  position: fixed;
  width: 800px;
  height: 50px;
  display: flex;
  justify-content: space-evenly;
}

.enemies div {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: orange;
  animation: enemies_move 4s alternate infinite;
}

.barriers {
  width: 800px;
  height: 20px;
  position: fixed;
  top: 460px;
  display: flex;
  justify-content: space-evenly;
}

.barriers div {
  width: 100px;
  height: 20px;
  background-color: white;
}

.space_ship {
  width: 50px;
  height: 50px;
  border: 2px white solid;
  position: relative;
  top: 440px;
  left: 375px;
}

@keyframes shoot_bullet {
  from {
    top: 340px;
  }
  to {
    top: -50px;
  }
}

.div_bullet {
  left: 17px;
  width: 15px;
  height: 40px;
  background-color: white;
  position: relative;
  animation: shoot_bullet 1s;
}

<div id="main" class="main">
  <div class="enemies">
    <div id="e1"></div>
    <div id="e2"></div>
    <div id="e3"></div>
    <div id="e4"></div>
    <div id="e5"></div>
  </div>
  <div class="barriers">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div id="space_ship" class="space_ship"></div>
</div>

Gabriele Petrioli · Accepted Answer · 2022-06-12 20:08:37Z

The problem in your code is that you are using only the x and y of the bullet and enemy to check for collisions. You need to use the width and height of both items to check if they collide.

The checks needed to see if two rects collide is

function rectCollision(rectA, rectB) {
  return (
    rectA.x < rectB.x + rectB.width &&
    rectA.x + rectA.width > rectB.x &&
    rectA.y < rectB.y + rectB.height &&
    rectA.height + rectA.y > rectB.y
  );
}

And using this in your code makes it work

const shoot = (x) => {
  //Creates bullet
  const main = document.getElementById("main");
  const div_bullet = document.createElement("div");

  //Appends child
  main.appendChild(div_bullet);

  //Sets position
  div_bullet.style.top = "340px";
  div_bullet.style.left = x + "px";

  //Gives it a class
  div_bullet.classList.add("div_bullet");
  div_bullet.setAttribute("id", "bullet");

  //Deletes bullet
  setTimeout(() => {
    div_bullet.remove();
  }, 1000);
};

const load_game = () => {
  //Adding movement to the spaceship
  const space_ship = document.getElementById("space_ship");
  let x = 375;
  window.addEventListener("keydown", (e) => {
    switch (e.key) {
      case "ArrowLeft":
        if (x <= 15) break;
        x = x - 10;
        space_ship.style.left = x + "px";
        break;
      case "ArrowRight":
        if (x >= 725) break;
        x = x + 10;
        space_ship.style.left = x + "px";
        break;
      case "ArrowUp":
        if (document.getElementsByClassName("div_bullet").length === 0)
          shoot(x + 20);
        break;
      default:
        break;
    }
  });
};

const collision_system = () => {
  setInterval(() => {
    //Checks if any enemy was hit
    const e1 = document.getElementById("e1");
    const e2 = document.getElementById("e2");
    const e3 = document.getElementById("e3");
    const e4 = document.getElementById("e4");
    const e5 = document.getElementById("e5");

    const enemies_position = [
      e1.getBoundingClientRect(),
      e2.getBoundingClientRect(),
      e3.getBoundingClientRect(),
      e4.getBoundingClientRect(),
      e5.getBoundingClientRect(),
    ];

    if (document.getElementById("bullet")) {
      const bullet = document
        .getElementById("bullet")
        .getBoundingClientRect();

      console.log(
        "X: " + enemies_position[0].x + "Y: " + enemies_position[0].y
      );
      console.log("X bullet: " + bullet.x + "Y bullet : " + bullet.y);
      for (let i = 0; i < 5; i++) {
        if (
          rectCollision(enemies_position[i], bullet)
        )
          alert("Shoot!");
      }
    }
  }, 10);
};

function rectCollision(rectA, rectB) {
  return (rectA.x < rectB.x + rectB.width &&
    rectA.x + rectA.width > rectB.x &&
    rectA.y < rectB.y + rectB.height &&
    rectA.height + rectA.y > rectB.y)
}

document.addEventListener("DOMContentLoaded", () => {
  load_game();
  collision_system();
});

* {
  padding: 0px;
  margin: 0px;
}

body {
  background-color: black;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  width: 800px;
  height: 500px;
  border: 2px white solid;
  border-radius: 10px;
}

@keyframes enemies_move {
  from {
    left: 80px;
  }
  to {
    left: -80px;
  }
}

.enemies {
  margin-top: 20px;
  position: fixed;
  width: 800px;
  height: 50px;
  display: flex;
  justify-content: space-evenly;
}

.enemies div {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: orange;
  animation: enemies_move 4s alternate infinite;
}

.barriers {
  width: 800px;
  height: 20px;
  position: fixed;
  top: 460px;
  display: flex;
  justify-content: space-evenly;
}

.barriers div {
  width: 100px;
  height: 20px;
  background-color: white;
}

.space_ship {
  width: 50px;
  height: 50px;
  border: 2px white solid;
  position: relative;
  top: 440px;
  left: 375px;
}

@keyframes shoot_bullet {
  from {
    top: 340px;
  }
  to {
    top: -50px;
  }
}

.div_bullet {
  left: 17px;
  width: 15px;
  height: 40px;
  background-color: white;
  position: relative;
  animation: shoot_bullet 1s;
}

<div id="main" class="main">
  <div class="enemies">
    <div id="e1"></div>
    <div id="e2"></div>
    <div id="e3"></div>
    <div id="e4"></div>
    <div id="e5"></div>
  </div>
  <div class="barriers">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div id="space_ship" class="space_ship"></div>
</div>

Collectives™ on Stack Overflow

Detecting the collision of 2 divs with JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related