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:
- El lado izquierdo de a se encuentra a la izquierda del lado derecho de b.
- El lado derecho de a se encuentra a la derecho del lado izquierdo de
b.
- El lado inferior de a se encuentra debajo del lado superior de
b.
- 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>