碰撞檢測函數總是返回true

Question

我可能錯過了一些非常簡單的東西，但我不明白爲什麼此函數總是返回true，並且即使兩個對象彼此不接近時也會記錄這兩個對象。 我的代碼：

var collideRect=function(obj1, obj2){ 
    var x1=obj1.x,y1=obj1.y,x2=obj2.x, y2=obj2.y; 
    var b1=obj1.breadth,h1=obj1.height; 
    var b2=obj2.breadth,h2=obj2.height; 
    var xCollide, yCollide; 
// determine if the x values are closer than half the breadth of each rectangle to each other 
    if(x1+b1/2>x2-b2/2||x1-b1/2<x2+b2/2){xCollide=true}; 
// determine if the y values are closer than half their heights from one another 
    if(y1+h1/2>y2-h2/2||y1-h1/2<y2+h2/2){yCollide=true}; 
    if(xCollide&&yCollide){ 
    console.log(JSON.stringify(obj1)+". "+JSON.stringify(obj2)) ; 
    return true; 
    }; 
} 

這些值都不是0。該功能需要具有以下屬性的對象： 寬度， 高度， x， y。 這些都是正數。我已經檢查了每個聲明的操作順序，它們都很好。

Answer 1

您的if語句不正確。請參閱下面的調整算法和基本控制檯聲明。

基本上，您需要檢測任何邊緣之間是否沒有空間。如果沒有空間，則說明發生了碰撞。

分解如下：

Step1。

檢查矩形1的左邊緣。

如果矩形1的左邊緣小於矩形2的右邊緣（x2 + b2），矩形1的左邊緣和矩形2的右邊緣可能會出現交叉。

Step2。

檢查矩形1的右側。

如果rectangle1的右側大於rectangle2的左側，則rectangle1與rectangle2左側的rectangle2相交。我們使用& &檢測到這兩個條件均爲真，以確保發生了碰撞。

我們做兩個矩形的y座標完全相同的檢查，以達到檢測矩形是否相交在y平面..

var collideRect = function (obj1, obj2) { 
 
\t var collision = false; 
 

 
\t var x1 = obj1.x, 
 
\t y1 = obj1.y, 
 
\t x2 = obj2.x, 
 
\t y2 = obj2.y; 
 

 
\t var b1 = obj1.breadth, 
 
\t h1 = obj1.height; 
 

 
\t var b2 = obj2.breadth, 
 
\t h2 = obj2.height; 
 

 
\t var xCollide, 
 
\t yCollide; 
 
     // if left edge of rect1 is left of the left edge of rect2 plus its 
 
     // width AND left edge of rect1 plus rect1's width is greater than 
 
     // the left edge of rect2, we have an x-coordinate collision. 
 
     // if either set of conditions is false, the rects don't overlap. 
 
\t if (x1 < x2 + b2 && x1 + b1 > x2) { 
 
\t \t xCollide = true; 
 
\t } 
 
    // same as the x check but on the y plane 
 
\t if (y1 < y2 + h2 && h1 + y1 > y2) { 
 
\t \t yCollide = true; 
 
\t } 
 

 
\t if (xCollide && yCollide) { 
 
\t \t console.log(JSON.stringify(obj1) + ". " + JSON.stringify(obj2)); 
 
\t \t collision = true; 
 
\t } 
 
\t return collision; 
 
} 
 

 
// test 
 
var rect1 = { 
 
\t x: 5, 
 
\t y: 5, 
 
\t breadth: 50, 
 
\t height: 50 
 
}; 
 
var rect2 = { 
 
\t x: 20, 
 
\t y: 10, 
 
\t breadth: 10, 
 
\t height: 10 
 
}; 
 

 
console.assert(collideRect(rect1, rect2) === true); // collision 
 

 
var rect3 = { 
 
\t x: 55, 
 
\t y: 55, 
 
\t breadth: 50, 
 
\t height: 50 
 
}; 
 
var rect4 = { 
 
\t x: 20, 
 
\t y: 10, 
 
\t breadth: 10, 
 
\t height: 10 
 
}; 
 

 
console.assert(collideRect(rect3, rect4) === false); // no collision