Collision Detection

by J. Albert Bowden

HTML

<button id="left">left</button>
<button id="right">right</button>
<button id="up">up</button>
<button id="down">down</button>

<div class="block"></div>
<div class="bomb"></div>

CSS

.block {
  position:absolute;
  background-color:#abc;
  left:50px;
  width:90px;
  height:90px;
  margin:5px;
}
.bomb {
  position:absolute;
  background-color:red;
  left:250px;
  width:40px;
  height:40px;
  margin:5px;
}

JavaScript

$("#right").click(function(){
  $(".block").animate({"left": "+=50px"}, "fast", checkCollisions);
});

$("#left").click(function(){
  $(".block").animate({"left": "-=50px"}, "fast", checkCollisions);
});

$("#up").click(function(){
  $(".block").animate({"top": "-=50px"}, "fast", checkCollisions);
});

$("#down").click(function(){
  $(".block").animate({"top": "+=50px"}, "fast", checkCollisions);
});

function getPositions(box) {
  var $box = $(box);
  var pos = $box.position();
  var width = $box.width();
  var height = $box.height();
  return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
}
        
function comparePositions(p1, p2) {
  var x1 = p1[0] < p2[0] ? p1 : p2;
  var x2 = p1[0] < p2[0] ? p2 : p1;
  return x1[1] > x2[0] || x1[0] === x2[0] ? true : false;
}

function checkCollisions(){
  var box = $(".bomb")[0];
  var pos = getPositions(box);

  var pos2 = getPositions(this);
  var horizontalMatch = comparePositions(pos[0], pos2[0]);
  var verticalMatch = comparePositions(pos[1], pos2[1]);            
  var match = horizontalMatch && verticalMatch;
  if (match) { $("body").append("<p>COLLISION !!!</p>"); }
}