如何使用 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() 函数来轻松适应处理更复杂的形状和轨迹。