JavaScript：當兩個div觸碰/重疊時觸發一個功能

Question

標題解釋它真的。這個怎麼做？兩個div的大小都不相同。兩個div都在移動（我正在製作一個jquery遊戲）。如果碰到對方，我想要發生的事情。

謝謝

Answer 1

沒有爲onOverlap沒有JavaScript事件，你需要做的的計算是否div的是都由你自己的重疊：

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

你是如何導致divs移動？當然，一種方法是編寫一個簡單的布爾返回函數，在給定兩個div的情況下，計算它們是否重疊（獲取拐角的座標並僅比較交點）。然後，在導致div移動的函數結束時，調用此函數並採取適當的操作。

實際上，根據您的移動方式，您甚至可以將兩個div的座標都設置爲非常高效。

除此之外，我不知道任何「onoverlap」事件或類似事件，所以定期檢查是我能想到的唯一通用的方式。取決於代碼的結構，可能有更快的方法可用。