JavaScript: attiva una funzione quando due div toccano / si sovrappongono

Question

Il titolo lo spiega davvero. Come fare questo? Entrambi i div sono di dimensioni diverse. Entrambi i div si stanno muovendo (sto realizzando un piccolo gioco Jquery). Se uno colpisce l'altro, voglio che succeda qualcosa.

Grazie

Answer 1

Non ci sono eventi JavaScript per onOverlap, devi fare il calcolo se i div si sovrappongono da soli:

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

Come stai spostando i div? Un modo per farlo, certamente, sarebbe quello di scrivere una semplice funzione di ritorno booleano che, dati due div, capisca se si sovrappongono (ottenere le coordinate degli angoli e confrontare solo per un incrocio). Quindi, alla fine della funzione che causa lo spostamento dei div, chiama questa funzione e intraprendi le azioni appropriate in tal caso.

In effetti, a seconda di come stai muovendo, potresti anche avere le coordinate di entrambi i div disponibili per renderlo molto efficiente.

Oltre a ciò, non sono a conoscenza di alcun "onoverlap" evento o simile, quindi il controllo periodico è l'unico modo generalmente applicabile che mi viene in mente. Potrebbe esserci un metodo più veloce disponibile a seconda di come è strutturato il tuo codice.