jQuery/JavaScript を使用して長方形要素間の衝突検出を行うにはどうすればよいでしょうか?

jQuery/JavaScript 衝突検出

Web 開発の領域では、ページ上の 2 つの要素が衝突した場合に検出することが必要になることがよくあります。この情報は、インタラクティブなゲーム、アニメーション、空間レイアウトなどのさまざまなアプリケーションで非常に重要です。

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

<div> のような単純な長方形を扱う場合。要素が垂直方向に移動する場合、衝突検出は簡単な作業になります。これを実現するために jQuery を利用する JavaScript ソリューションを次に示します。

この関数は、2 つの jQuery 要素 (a と b) を引数として受け取り、それらが重複しているかどうかを示すブール値を返します。これは、まず要素の位置と寸法を計算し、それらを比較して交差があるかどうかを判断することによって行われます。

<div>

機能を示すために、内部で移動する複数の色のボックスを持つ長方形の領域を定義する HTML スニペットを次に示します。 it:

$(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 を使用して衝突を動的にチェックします:

このコードは、赤いボックス (#box0) を除いて、領域内のボックスを反復処理します。そして各ボックスが衝突しているかどうかを計算します。結果は

のリストに表示されます。

このアプローチは、重複する <div> 要素を効果的に検出します。 getPositions() 関数を適宜変更することで、より複雑な形状や軌道を処理できるように簡単に調整できます。