javascript - JavaScript：2つの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

divをどのように動かしていますか？それを行う1つの方法は、確かに、2つのdivが与えられた場合に、それらがオーバーラップするかどうかを判断する単純なブール値を返す関数を作成することです（コーナーの座標を取得し、交差点を比較するだけです）。次に、divを移動させる関数の最後で、この関数を呼び出し、その場合は適切なアクションを実行します。

実際、移動の方法によっては、両方のdivの座標を使用できる場合もあり、これにより非常に効率的になります。

それを超えて、私は「重複」イベントなどを認識していないので、定期的にチェックすることが、私が考えることができる唯一の一般的に適用可能な方法です。コードの構造によっては、より高速な方法が利用できる場合があります。