JavaScript: activa una función cuando dos divs se tocan / se superponen

Question

El título lo explica realmente. ¿Como hacer esto? Ambos divs son de diferente tamaño. Ambos divs se están moviendo (estoy haciendo un pequeño juego de Jquery). Si uno golpea al otro, quiero que sucedan cosas.

Gracias

Answer 1

No hay ningún evento de JavaScript para onOverlap, debe hacer el cálculo si los divs se superponen usted mismo:

var valueInRange = function(value,min, max) { 
   return (value >= min) && (value <= max);
}

var overlap = function(x1,y1,w1,h1,x2,y2,w2,h2) {
   xOverlap = valueInRange(x1, x2, x2 + w2) || valueInRange(x2, x1, x1 + w1);
   yOverlap = valueInRange(y1, y2, y2 + h2) || valueInRange(y2, y1, y1 + h1);
   return xOverlap && yOverlap;
}

Answer 2

¿Cómo estás haciendo que los divs se muevan? Una forma de hacerlo, sin duda, sería escribir una función booleana de retorno simple que, dados dos divs, calcule si se superponen (obtenga las coordenadas de las esquinas y simplemente compare para una intersección). Luego, al final de la función que hace que los divs se muevan, llame a esta función y tome las medidas apropiadas si es así.

De hecho, dependiendo de cómo esté haciendo el movimiento, incluso puede tener las coordenadas de ambos divs disponibles, lo que lo hace muy eficiente.

Más allá de eso no estoy al tanto de ninguna "superposición" evento o similar, por lo que verificar periódicamente es la única forma generalmente aplicable en la que puedo pensar. Puede haber un método más rápido disponible dependiendo de cómo esté estructurado su código.