Skip to main content
Explicación adicional del funcionamiento de la detección
Origen Enlace
Roimer
  • 804
  • 5
  • 10
  • Ambos elementos son rectangulares (o se pueden considerar rectángulos). Como en tu caso son DIVs no habrá problemas con esto.
  • Ambos elementos deben estar contenidos en el mismo "padre posicionado": esto es para que al preguntar la posición de cada elemento, esta sea siempre relativa al mismo sistema de referencia (su padre).
  • Solo necesitas detectar colisiones entre dos elementos. Si son más de dos (pero no demasiados!) puedes detectar las colisiones por pares de objetos.

Básicamente, dos elementos a y b colisionan si se cumplen estas cuatro condiciones a la vez:

  1. El lado izquierdo de a se encuentra a la izquierda del lado derecho de b.
  2. El lado derecho de a se encuentra a la derecho del lado izquierdo de b.
  3. El lado inferior de a se encuentra debajo del lado superior de
    b.
  4. El lado superior de a se encuentra encima del lado inferior de
    b.

Claro, dependiendo de lo que deseas verificar, las cuatro desigualdades pueden ser estrictas (<) o no (<=)

  • Ambos elementos son rectangulares (o se pueden considerar rectángulos). Como en tu caso son DIVs no habrá problemas con esto.
  • Ambos elementos deben estar contenidos en el mismo "padre posicionado": esto es para que al preguntar la posición de cada elemento, esta sea siempre relativa al mismo sistema de referencia (su padre).
  • Ambos elementos son rectangulares (o se pueden considerar rectángulos). Como en tu caso son DIVs no habrá problemas con esto.
  • Ambos elementos deben estar contenidos en el mismo "padre posicionado": esto es para que al preguntar la posición de cada elemento, esta sea siempre relativa al mismo sistema de referencia (su padre).
  • Solo necesitas detectar colisiones entre dos elementos. Si son más de dos (pero no demasiados!) puedes detectar las colisiones por pares de objetos.

Básicamente, dos elementos a y b colisionan si se cumplen estas cuatro condiciones a la vez:

  1. El lado izquierdo de a se encuentra a la izquierda del lado derecho de b.
  2. El lado derecho de a se encuentra a la derecho del lado izquierdo de b.
  3. El lado inferior de a se encuentra debajo del lado superior de
    b.
  4. El lado superior de a se encuentra encima del lado inferior de
    b.

Claro, dependiendo de lo que deseas verificar, las cuatro desigualdades pueden ser estrictas (<) o no (<=)

Origen Enlace
Roimer
  • 804
  • 5
  • 10

El código para detectar colisiones es bastante sencillo, aunque requiere hacer algunas suposiciones previas:

  • Ambos elementos son rectangulares (o se pueden considerar rectángulos). Como en tu caso son DIVs no habrá problemas con esto.
  • Ambos elementos deben estar contenidos en el mismo "padre posicionado": esto es para que al preguntar la posición de cada elemento, esta sea siempre relativa al mismo sistema de referencia (su padre).

$(document).keyup(function(event) {
  //alert(event.keyCode)
  if(event.keyCode == 39){
    $(".caja1").css({"left":"+=50px"})
    DetectarColision()
  }
  if(event.keyCode == 37){
    $(".caja1").css({"left":"-=50px"})
    DetectarColision()
  }
});
function DetectarColision(){
    /// "a" y "b" deben ser dos objetos HTMLElement
  var a = $(".caja1");
  var b = $(".caja2");
  
  var a_pos = {t : a.position().top, 
                         l: a.position().left, 
               r: a.position().left + a.width(), 
               b: a.position().top + a.height()};
  var b_pos =  {t : b.position().top, 
                         l: b.position().left, 
               r: b.position().left + b.width(), 
               b: b.position().top + b.height()};
               

 //Detecta si se superponen las áreas
  if(   a_pos.l <= b_pos.r && a_pos.r >= b_pos.l 
    && a_pos.b >= b_pos.t && a_pos.t <= b_pos.b ){
        console.log('colision');
    
    }
 
}
div.caja1, div.caja2 {
    width: 100px;
    height: 100px;
    position: absolute;
  }
  
  div.caja1 {
    background: rgb(83, 53, 117)
  }
  
    div.caja2 {
    right:100px;
    background:rgb(56, 199, 70) 
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="caja1">
    caja 1
  </div>
  <div class="caja2">
    caja 2
  </div>