JavaScript と jQuery を使用して 2 つの Div 間の衝突を検出するにはどうすればよいですか?

2 つの DIV 間の衝突を検出する方法

Web ページ上で動的要素を操作する場合、DIV 間の衝突を検出できることが不可欠です。彼ら。この例では、互いに垂直に移動する 2 つの単純な色付き div を扱います。

解決策:

div が衝突するかどうかを判断するには、次のようにします。 JavaScript と jQuery ライブラリを活用します。解決策の内訳は次のとおりです。

1. 位置を取得します: まず getPositions() 関数を使用して両方の div の位置を計算します。この関数は、div を表す 2 次元配列を返します。各 div の左と上の座標
2. 位置の比較: ComparePositions() 関数では、各 div の位置を比較します。一方の div の左端が他方の div の左端より小さく、最初の div の右端が 2 番目の div の左端より大きい場合、衝突が発生します。同様に、垂直方向の衝突をチェックします。
3. Check Overlaps: 2 つの div を入力として受け取る Overlaps() 関数は、前の関数を組み合わせてそれらが重なっているかどうかを判断します。存在する場合、関数は true を返します。それ以外の場合は false を返します。
4. JavaScript で実装: 赤い div (box0) が他の div のいずれかと衝突するかどうかをテストする jQuery 関数に、overlaps() 関数を組み込みます (ボックス 1 ～ 4)。結果はページの本文に追加されます。

コード例:

var overlaps = (function () {
    function getPositions(elem) {
        var pos, width, height;
        pos = $(elem).position();
        width = $(elem).width();
        height = $(elem).height();
        return [[pos.left, pos.left + width], [pos.top, pos.top + height]];
    }

    function comparePositions(p1, p2) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }

    return function (a, b) {
        var pos1 = getPositions(a),
            pos2 = getPositions(b);
        return comparePositions(pos1[0], pos2[0]) && comparePositions(pos1[1], pos2[1]);
    };
})();

$(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);
});

このソリューションは、垂直方向間の衝突を検出するのに効率的かつ正確です。ディビジョンの移動。ゲームやシミュレーションなど、さまざまなインタラクティブな Web アプリケーションに便利なツールを提供します。

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