Function for colision detection always returns true

Question

I am probably missing something really simple but I do not understand why this function always returns true and logs the two objects even when they are not near one another. My code:

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;
   }; 
}

None of the values are ever0. The function takes to objects each with properties: breadth, height, x, y. These are all positive numbers. I have checked the order of operations of each of statement and they are all fine.

Answer 1

Your if statements are incorrect. See below for adjusted algorithm and basic console assertions.

Essentially you need to detect if there's no space between any of the edges. If there is no space you know a collision has occurred.

A break down is as follows:

Step1.

Check the left edge of rectangle1.

If the left edge of rectangle1 is less than the right edge of rectangle2 (x2 + b2) there may be an intersection of the left side of rectangle1 and the right side of rectangle2.

Step2.

Check the right side of rectangle1.

If the right side of rectangle1 is greater than the left side of rectangle2, rectangle1 intersects with rectangle2 at the left side of rectangle2. We detect that both of these conditions are true using && to ensure that a collision has occurred.

We do the exact same checks for the y coordinates of both rectangles to achieve detect whether the rectangles intersect on the y plane..

 var collideRect = function (obj1, obj2) { var collision = false; 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; // 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. if (x1 < x2 + b2 && x1 + b1 > x2) { xCollide = true; } // same as the x check but on the y plane if (y1 < y2 + h2 && h1 + y1 > y2) { yCollide = true; } if (xCollide && yCollide) { console.log(JSON.stringify(obj1) + ". " + JSON.stringify(obj2)); collision = true; } return collision; } // test var rect1 = { x: 5, y: 5, breadth: 50, height: 50 }; var rect2 = { x: 20, y: 10, breadth: 10, height: 10 }; console.assert(collideRect(rect1, rect2) === true); // collision var rect3 = { x: 55, y: 55, breadth: 50, height: 50 }; var rect4 = { x: 20, y: 10, breadth: 10, height: 10 }; console.assert(collideRect(rect3, rect4) === false); // no collision