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の座標を使用できるため、非常に効率的です。

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