0

Tengo una idea de hacer una animación cuando un objeto del DOM impacte con otro pero no logro saber cuando impactan hay forma de saberlo?

Les dejo una ejemplo de lo que llevo al darle a las flechas la caja 1 se mueve mi idea es que cuando choque con la otra se ejecute una function.

De antemano muchas gracias

$(document).keyup(function(event) {
  //alert(event.keyCode)
  if(event.keyCode == 39){
    $(".caja1").css({"left":"+=50px"})
  }
  if(event.keyCode == 37){
    $(".caja1").css({"left":"-=50px"})
  }
});
* {
  margin: 0px;
  padding: 0px;
}
div {
    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>

1

1 respuesta 1

1

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).
  • 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 (<=)

$(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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.