How to detect collision between two squares/rectangles

Question

Who provide an answer that explains all the necessary nuances for this in javascript will earn the points.

Answer 1

To show how the collision detection between two objects works I will use two div's square in a plane 2D, but collision detection can be applied to any form of object, provided we have the dimensions of the objects in question and this concept also serves for planes in 3D, the difference between 2D and 3D is that in 3D we work with three dimensions (x,y,z) while in 2D there are only two (x,y), which makes the process much simpler.

The two objects (div’s) will have the following dimensions, the first div(blue) has 100px high and 100px wide, the second div(red) is half the size of the first, so 50px high and 50px wide.

Position

To get the position of the element we have two options .position() or .offset(), the method .position() returns the location relative to the nearest ancestor, while the .offset() returns the position relative to the document. I will not explain in depth the methods if you want to understand more about them click here, in the example in question makes no difference as the parent or ancestor element is the document itself.

Collision

The collision in this context that we create, considering only these two elements, will happen when the following conditions are true:

Horizontally:

When the right end of the leftmost element(A2) is greater than or equal to the left edge of the rightmost element(V1) and less than or equal to the right end of the rightmost element(V2).

V1<=A2<=V2

Upright:

When the bottom end of the element above(A4) is greater than or equal to the top end of the element further down(V3) and less than or equal to the lower end of the lower element(V4).

V3<=A4<=V4

Extremities

var posAzul = $(".azul").position();
A1 = posAzul.left;
A2 = posAzul.left + $(".azul").width();
A3 = posAzul.top;
A4 = posAzul.top + $(".azul").height();

In the same way we get the ends of the red block.

If these two conditions are met simultaneously we can say that there was a collision between the objects. There are n ways to do this check, follows a very practical example that checks for collision between two objects, I hope it helps.

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

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

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

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

function getPositions(vermelho) {
  var $vermelho = $(vermelho);
  var pos = $vermelho.position();
  var width = $vermelho.width();
  var height = $vermelho.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 vermelho = $(".vermelho")[0];
  var pos = getPositions(vermelho);

  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>Colisão!</p>");
  }
}

.azul {
  position: absolute;
  background-color: blue;
  left: 50px;
  width: 100px;
  height: 100px;
  margin: 30px;
}

.vermelho {
  position: absolute;
  background-color: red;
  left: 300px;
  width: 50px;
  height: 50px;
  margin: 30px;
  top: 70px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="cima" style="width:150px;">Cima</button>
<br>
<button id="esq" style="width:75px;">Esquerda</button>
<button id="dir" style="width:75px;">Direita</button>
<br>
<button id="baixo" style="width:150px;">Baixo</button>

<div class="azul"></div>
<div class="vermelho"></div>