如何在一組Div元素之間實現碰撞檢測？

我有一個變種作爲碰撞元件：

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');但我不知道如何在此示例中使用它。

來源

2011-12-25 Patrioticcow

通過「與自己相撞」，你的意思是「防止過度/不足」？ – 2011-12-25 05:41:22

可能的重複[請推薦一個處理可拖動元素的碰撞檢測的JQuery插件]（http://stackoverflow.com/questions/773717/please-recommend-a-jquery-plugin-that-handles-collision-detection-for -draggable） – 2011-12-25 05:43:02

w可以看到它們與'

'容器相撞，我也想與它們自己碰撞 – Patrioticcow 2011-12-25 05:48:06

完整的collision detection和正確的collision response不是一個小問題來解決，除了在特殊情況下。

您現在擁有的代碼相當容易編寫，因爲您只需要比較兩個對象（拖動的對象和容器），並且因爲您的碰撞響應只是將div的位置限制在容器內部。

對於所有的div完全碰撞，你必須檢查容器和所有其他div的拖動div。你的碰撞響應必須計算一個運動矢量，並處理複雜的「滑動」邏輯，以確保你可以在其他物體上移動，但是確保你的最終位置仍然在容器內。

我建議你首先重新檢查一下你對完整碰撞檢測的需求，因爲它可能會很重並且很複雜。也許你只需要overlap detection，ala jQuery UI的droppable？或者，也許你需要像jQuery UI的draggable snapping或jQuery UI的？

如果您確定實際上需要完全碰撞檢測，我建議您抓取一個已經處理碰撞檢測的庫，因爲它很難實現。看到這個問題的答案的幾個庫選項：

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

如果你真的想實現它自己，你應該看看了分離軸定理：

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

然後，我會閱讀有關實施碰撞檢測和重新研究的文章sponse如被看見在the N game：

如果您需要尋找更多的信息，你可以考慮的div是Axis-Aligned Bounding Boxes（AABB S）。這可以爲您提供巨大的性能提升和巨大的複雜性降低。用於檢查碰撞的數學運算幾乎與重疊和碰撞檢測一樣容易（儘管碰撞響應仍像其他類型的碰撞一樣困難）。

來源

2011-12-25 12:43:40

如何在一組Div元素之間實現碰撞檢測？

回答

相關問題