jQuery/JavaScript で要素間の衝突を検出するにはどうすればよいですか?

jQuery/JavaScript 衝突検出

重複する要素の特定

2 つの要素がいつ重複したかを知ることは、さまざまな対話型 Web アプリケーションにとって不可欠です。 2 つの色の付いたボックスがグリッド上で垂直に移動する単純なゲームを想像してください。赤いボックスが他のボックスと衝突したかどうかを判断するには、次の jQuery/JavaScript ソリューションを使用できます。

関数の内訳

getPositions: 位置を取得します。要素の寸法と

comparePositions:指定された 2 つの位置の範囲を比較し、重なっているか接触している場合は true を返します。

overlaps: main 関数は 2 つの要素間の重複をチェックします。 getPositions と comparePositions を使用して、それらの軸のいずれかが重複しているかどうかを判断します。

実装

1. 重複を定義します として機能しますクロージャー。
2. チェックされている 2 つの要素の位置を取得します。
3. comparePositionsを使用して両方の要素の水平範囲と垂直範囲を比較します。
4. Return trueいずれかの範囲の場合

例

HTML 構造を考えてみましょう:

<div>

対応する JavaScript:

var overlaps = (function () {
  // ... same as before ...
})();

$(function () {
  var area = $('#area')[0],
      box = $('#box0')[0],
      html;

  html = $('#area').children().not(box).map(function (i) {
    return '<p>Red box + Box ' + (i + 1) + ' = ' + overlaps(box, this) + '</p>';
  }).get().join('');

  $('body').append(html);
});

このスクリプトはメッセージを追加します赤いボックスが他のボックスと重なっているかどうかを示すページに移動します。

以上がjQuery/JavaScript で要素間の衝突を検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。