如何在一组Div元素之间实现碰撞检测？ [英] How do I implement collision detection between a set of Div elements?

问题描述

我在 jsfiddle

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

I have a var as being the collision element:

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相互碰撞？

This code implements collision detection of the child divs against the container div. How would I implement collision detection to make those 3 divs collide with each other?

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

I'm thinking to set up another div : var $divs = $('.xxx'); but im not sure how to use it within this example.

推荐答案

完整碰撞检测并更正碰撞响应并非是要解决的小问题，除非在特殊情况下。

Full collision detection and correct collision response isn't a trivial problem to solve, except in special cases.

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

The code you have now is fairly easy to write because you only have two objects to compare (the dragged object and the container), and because your collision response was simply to restrict the div's position to be inside the container.

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

For full collision against all the divs, you'll have to check the dragged div against the container and all other divs. Your collision response will have to calculate a movement vector, and handle complex "sliding" logic to make sure you can move around other objects, but ensure that your final position will still be inside the container.

我建议您首先重新检查对完整碰撞检测的需求，因为它可能会很麻烦并且很复杂。也许您只需要 重叠检测 ，即jQuery UI的< a href = http://jqueryui.com/demos/droppable/ rel = nofollow noreferrer> 可放下 ？或许您需要类似jQuery UI的 可拖动捕捉，或jQuery UI的 可排序 ？

I'd suggest you first reexamine your need for full collision detection, as it can be perf-heavy and complicated. Maybe you just need overlap detection, ala jQuery UI's droppable? Or maybe you need something like jQuery UI's draggable snapping, or jQuery UI's sortable?

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

If you determine you actually need full collision detection, I suggest you grab a library that already handles collision detection since it is hard to implement. See answers on this question for a few library options:

• 请推荐一个可处理可拖动元素碰撞检测的JQuery插件

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

如果您真的想自己实现它，则应查找分离轴定理：

If you really want to implement it yourself, you should look up the Separating Axis Theorem:

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

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

然后我阅读了有关实现冲突检测和响应的文章，如 N 游戏：

I'd then read the articles on implementing collision detection and response as seen in the N game:

• http://www.metanetsoftware.com/technique/tutorialA.html


• http：//www.metanetsoftware。 com / technique / tutorialB.html

• http://www.metanetsoftware.com/technique/tutorialA.html
• http://www.metanetsoftware.com/technique/tutorialB.html

如果需要搜索更多信息，可以将divs定义为< a href = http://en.wikipedia.org/wiki/Bounding_volume rel = nofollow noreferrer> 轴对齐边界框 （ AABB s）。这可以使您的性能大幅提高，而复杂度却大大降低。用于检查 AABB -to- AABB 碰撞的数学方法与重叠和碰撞检测一样简单（尽管碰撞响应仍然像其他类型的碰撞一样困难。）

If you need to search for more info, you can consider divs to be Axis-Aligned Bounding Boxes (AABBs). This can give you huge perf increases and huge complexity reductions. The math for checking AABB-to-AABB collision is about as easy as it gets for overlap and collision detection (though collision response is still as hard as with any other type of collision).

这篇关于如何在一组Div元素之间实现碰撞检测？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！