如何在一组 Div 元素之间实现碰撞检测？答案

【问题标题】：How do I implement collision detection between a set of Div elements?如何在一组 Div 元素之间实现碰撞检测？
【发布时间】：2011-12-25 05:31:45
【问题描述】：

我在jsfiddle有这个例子

我有一个 var 作为碰撞元素：

var $div = $('.container');

然后是碰撞：

function test (){
    $('.drag')
        .drag("start",function( ev, dd ){
            dd.limit = $div.offset();
            dd.limit.bottom = dd.limit.top + $div.outerHeight()
                - $( this ).outerHeight();
            dd.limit.right = dd.limit.left + $div.outerWidth()
                - $( this ).outerWidth();
        })
        .drag(function( ev, dd ){
            $( this ).css({
                top: Math.min( dd.limit.bottom, Math.max( dd.limit.top, dd.offsetY ) ),
                left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )
            });   
        });
}

为：

<div class="container"></div>
<div class="drag xxx" style="left:40px;"></div>
<div class="drag xxx" style="left:120px;"></div>
<div class="drag xxx" style="left:200px;"></div>

此代码实现了子 div 与容器 div 的碰撞检测。我将如何实现碰撞检测以使这 3 个 div 相互碰撞？

我正在考虑设置另一个 div：var $divs = $('.xxx');，但我不确定如何在此示例中使用它。

【问题讨论】：

“与自身发生碰撞”是指“防止重叠/重叠”吗？
Please recommend a JQuery plugin that handles collision detection for draggable elements的可能重复
w 可以看到它们与<div class="container"></div> 容器发生碰撞，我也想与它们自身发生碰撞

标签： jquery collision-detection

【解决方案1】：

完整的collision detection 和正确的collision response 不是一个容易解决的问题，除非在特殊情况下。

您现在的代码相当容易编写，因为您只有两个对象要比较（拖动的对象和容器），而且您的碰撞响应只是将 div 的位置限制在容器内。

要与所有 div 完全碰撞，您必须检查拖动的 div 与容器和所有其他 div 的对比。您的碰撞响应必须计算一个移动向量，并处理复杂的“滑动”逻辑，以确保您可以在其他对象周围移动，但要确保您的最终位置仍然在容器内。

我建议您首先重新检查您对全面碰撞检测的需求，因为它可能会导致性能严重且复杂。也许你只需要overlap detection，或者jQuery UI 的droppable？或者您可能需要 jQuery UI 的 draggable snapping 或 jQuery UI 的 sortable 之类的东西？

如果您确定确实需要完整的碰撞检测，我建议您获取一个已经处理碰撞检测的库，因为它很难实现。有关一些库选项，请参阅此问题的答案：

Please recommend a JQuery plugin that handles collision detection for draggable elements

如果你真的想自己实现，你应该查一下分离轴定理：

http://en.wikipedia.org/wiki/Separating_axis_theorem

然后我会阅读the N game 中有关实现碰撞检测和响应的文章：

如果您需要搜索更多信息，可以考虑将 div 设为Axis-Aligned Bounding Boxes (AABBs)。这可以为您带来巨大的性能提升和巨大的复杂性降低。检查AABB-to-AABB 碰撞的数学运算与重叠和碰撞检测一样简单（尽管碰撞响应仍然与任何其他类型的碰撞一样困难）。

【讨论】：