JavaScript: acionar uma função quando dois divs tocar / sobreposição

Question

O título explica ele realmente. Como fazer isso? Ambos os divs são de tamanho diferentes. Ambos os divs estão se movendo (Eu estou fazendo um pequeno jogo Jquery). Se um bate outro, eu quero coisas para acontecer.

Graças

Answer 1

Não há eventos JavaScript para onOverlap, você tem que fazer o cálculo se os divs são sobrepostos pelo youself:

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

Como você está fazendo com que os divs para mover? Uma maneira de fazê-lo, certamente, seria escrever uma função que retorna booleano simples que, dadas duas divs, funciona se eles se sobrepõem (obter as coordenadas dos cantos e apenas comparar para uma intersecção). Então, no final da função que faz com que os divs para se mover, chamar essa função e tomar as medidas adequadas em caso afirmativo.

Na verdade, dependendo de como você está fazendo o movimento você pode até ter as coordenadas de ambos os divs disponíveis tornando este muito eficiente.

Além disso, eu não estou ciente de qualquer "onoverlap" evento ou semelhante, por isso, periodicamente, verificando é a única maneira geral aplicável que eu posso pensar. Pode haver um método mais rápido disponível, dependendo de como seu código está estruturado.