如何使用 jQuery/JavaScript 進行矩形元素之間的碰撞偵測？

jQuery/JavaScript 碰撞偵測

在 Web 開發領域，通常需要偵測頁面上的兩個元素何時發生碰撞。這些資訊在各種應用中都至關重要，例如互動遊戲、動畫和空間佈局。

在處理像

<div> 這樣的簡單矩形形狀時，元素在垂直方向上移動，碰撞偵測可能是一項簡單的任務。以下是利用 jQuery 來完成此操作的 JavaScript 解決方案：

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

此函數採用兩個 jQuery 元素（a 和 b）作為參數，並傳回一個布林值，指示它們是否重疊。它透過首先計算元素的位置和尺寸並比較它們以確定是否存在交叉點來實現這一點。

為了示範該功能，這裡有一個HTML 片段，它定義了一個矩形區域，其中多個彩色框在其中移動it:

<div>

最後，使用jQuery 來動態檢查碰撞：

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

此程式碼迭代區域內的盒子（不包括紅色盒子（#box0）），並計算每個盒子是否與其發生碰撞。然後結果顯示在

清單中。

這種方法可以有效偵測重疊的

<div> 元素。元素，並且可以透過相應地修改 getPositions() 函數來輕鬆適應處理更複雜的形狀和軌跡。