JavaScript: déclencher une fonction lorsque deux divs se touchent / se chevauchent

Question

Le titre l'explique vraiment. Comment faire ça? Les deux div sont de taille différente. Les deux div sont en mouvement (je fais un petit jeu Jquery). Si l’un frappe l’autre, je veux que des choses se passent.

Merci

Answer 1

Il n'y a pas d'événement JavaScript pour onOverlap, vous devez calculer si les divs se chevauchent par vous-même:

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

Comment faites-vous bouger les divs? Une façon de le faire serait certainement d’écrire une simple fonction de renvoi booléen qui, étant donné deux divs, détermine s’ils se chevauchent (obtiennent les coordonnées des angles et ne font que comparer pour une intersection). Ensuite, à la fin de la fonction qui provoque le déplacement des divs, appelez cette fonction et prenez les mesures appropriées, le cas échéant.

En fait, en fonction de vos déplacements, vous aurez peut-être même les coordonnées des deux divs disponibles, ce qui le rend très efficace.

Par ailleurs, je ne suis au courant d'aucun "onoverlap". événement ou similaire, donc vérifier périodiquement est la seule façon généralement applicable que je puisse penser. Une méthode plus rapide peut être disponible en fonction de la structure de votre code.