如何使用 JavaScript 和 jQuery 檢測兩個 Div 之間的衝突？

如何偵測兩個DIV 之間的衝突

在網頁上使用動態元素時，必須能夠偵測兩個DIV 之間的衝突他們。在本例中，我們正在處理兩個相互垂直移動的簡單彩色 div。

解：

要確定 div 是否發生碰撞，我們將利用 JavaScript 和 jQuery 函式庫。以下是解決方案的細分：

1. 取得位置：我們先使用getPositions() 函數計算兩個div 的位置，該函數傳回一個表示每個div 的左側和頂部座標。
2. 比較位置：使用comparePositions() 函數，我們比較每個 div 的位置。如果一個 div 的左邊緣小於另一個 div 的左邊緣，且第一個 div 的右邊緣大於第二個 div 的左邊緣，則會發生衝突。同樣，我們檢查垂直方向上的碰撞。
3. 檢查重疊：overlaps() 函數以兩個 div 作為輸入，組合前面的函數來決定它們是否重疊。如果是，函數傳回true；
4. 在JavaScript 中實作：我們將Overlaps() 函數合併到一個jQuery 函數中，該函數測試紅色div (box0) 是否與任何其他div 發生碰撞(框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);
});

此解決方案對於偵測垂直方向之間的碰撞非常有效率且準確地移動div。它為各種互動式 Web 應用程式（例如遊戲和模擬）提供了有用的工具。

以上是如何使用 JavaScript 和 jQuery 檢測兩個 Div 之間的衝突？的詳細內容。更多資訊請關注PHP中文網其他相關文章！