如何檢測兩個div是否碰到jquery？

Question

我只是在開發一個帶有兩個div的簡單氣球遊戲。問題是，當兩個div彼此接觸時，我無法觸發某個功能。

Answer 1

您正在尋找邊界框碰撞檢測。如果你想要舉辦一個活動，你必須反覆測試，但最好是從你的遊戲循環中運行所有遊戲對象的功能。沙箱是http://jsfiddle.net/nGRwt/7/

function collision($div1, $div2) { 
     var x1 = $div1.offset().left; 
     var y1 = $div1.offset().top; 
     var h1 = $div1.outerHeight(true); 
     var w1 = $div1.outerWidth(true); 
     var b1 = y1 + h1; 
     var r1 = x1 + w1; 
     var x2 = $div2.offset().left; 
     var y2 = $div2.offset().top; 
     var h2 = $div2.outerHeight(true); 
     var w2 = $div2.outerWidth(true); 
     var b2 = y2 + h2; 
     var r2 = x2 + w2; 

     if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false; 
     return true; 
    } 

Answer 2

您可以嘗試jquery-collision加jquery-ui-draggable-collision。全面披露：我剛剛在sourceforge上撰寫併發布了這些內容。

第一個允許這樣的：

var hit_list = $("#collider").collision(".obstacle"); 

這是所有 「.obstacle」 重疊 「#collider」 的名單。

第二種允許：

$("#collider").draggable({ obstacle: ".obstacle" }); 

它給你（除其他事項外）， 「衝突」 事件綁定到：

$("#collider").bind("collision", function(event,ui){...}); 

而且你甚至可以設置：

$("#collider").draggable({ obstacle: ".obstacle", preventCollision: true }); 

防止「#collider」在拖動時與任何「。障礙物」重疊。