Div Collider

collision detection using MDN collision algo, without using canvas or external libraries

by sonylnagale

HTML

<div class='container' id='divboard'>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme' data-dynamic='false'></div>
    <div class='collideme'...

CSS

body {
  font-family: sans-serif;
}


.collideme {
  height: 20px;
  width: 20px;
  display: inline-block;
  background-color: blue;
  position: absolute;
}

#divone {
  background-color: blue;
  left: 0;
  top: 0;
}

#divtwo {
  background-color: red;
  left: 50px;
  top: 50px;
}

.collision-state {
  background-color: green !important;
}

JavaScript

//////////// COLLISION ALGO FROM MDN
/* 
if (rect1.x < rect2.x + rect2.width &&
   rect1.x + rect1.width > rect2.x &&
   rect1.y < rect2.y + rect2.height &&
   rect1.height + rect1.y > rect2.y) {

}
*/

const collider = {
  moveableDiv: null,
  staticDivs: [],
  checkCollision: function() {
    let hasJustCollided = false;
    for (let i = 0; i < this.staticDivs.length; i++) {
      const currentDiv = this.staticDivs[i];
      if (currentDiv.position.left < this.moveableDiv.position.left + this.moveableDiv.position.width &&
      currentDiv.position.left + currentDiv.position.width > this.moveableDiv.position.left &&
      currentDiv.position.top < this.moveableDiv.position.top + this.moveableDiv.position.height &&
      currentDiv.position.height + currentDiv.position.top > this.moveableDiv.position.top) {
        hasJustCollided = true;
        if (!this.moveableDiv.ref.classList.contains('collision-state')) {
          this.moveableDiv.ref.classList.add('collision-state');
        }
      } else if (this.moveableDiv.ref.classList.contains('collision-state') && !hasJustCollided) {
          this.moveableDiv.ref.classList.remove('collision-state');
        }
    }
  },

};

class BaseDiv {
  constructor(position) {
    this.position = position;
  }
}

class MoveDiv extends BaseDiv {
  constructor(position, ref) {
    super(position);
    this.ref = ref;
  }
  shiftPosition(x, y) {
    this.position.left += x;
    this.position.top += y;
    this.reDraw();
  }
  reDraw() {
    this.ref.setAttribute('style', `left: ${this.position.left}px; top: ${this.position.top}px`);
    collider.checkCollision();
  }
}

function moveDiv(e) {
  switch(e.which) {
    case 37:
      collider.moveableDiv.shiftPosition(-1, 0);
      break;
    case 38:
      collider.moveableDiv.shiftPosition(0, -1);
      break;
    case 39:
      collider.moveableDiv.shiftPosition(1, 0);
      break;
    case 40:
      collider.moveableDiv.shiftPosition(0, 1);
      break;
    default:
     ...