JavaScript works exclusively inline

Question

This collision code (referenced verbatim from Mozilla) works:

if (rect1.x < rect2.x + rect2.width &&
   rect1.x + rect1.width > rect2.x &&
   rect1.y < rect2.y + rect2.height &&
   rect1.height + rect1.y > rect2.y) {
    // collision detect!
    //do something, like this...
    rect1.x + 100;
}

However, if written as a function, it never rings true (nothing happens).

Function:

function MozillaCollision(ObjectA, ObjectB) {
    if (ObjectA.x < ObjectB.x + ObjectB.width && ObjectA.x + ObjectA.width > ObjectB.x && ObjectA.y < ObjectB.y + ObjectB.height && ObjectA.height + ObjectA.y > ObjectB.y) {
        // collision detected!
        return true;
    }
    else {
        return false;
    }
}

Calling the function:

if (MozillaCollision(rect1, rect2))
{
    //do something, like this...
    rect1.x + 100;
}

Nothing ever happens, despite the code working when it's outside of a function/written inline!

If I change the function call by moving its brackets slightly, like this, then it is constantly being called true (rect1 is constantly moving by 100 pixels on the x axis, despite the fact that rect1 and rect2 aren't actually colliding, so I can only assume that this is not how functions are written!):

if (MozillaCollision)(rect1, rect2)
{
    //do something, like this...
    rect1.x + 100;
}

The fact that it either executes constantly or not at all depending upon placement of brackets is confusing (I'm learning the syntax). This confusion is exacerbated by the fact that the collision code works just fine when it is not written as a function that is being called.

My question, then, is about the correct JavaScript syntax for writing functions. I'm seemingly writing this wrong (code works otherwise sans being in a function), and any clarification's appreciated.

Answer 1

The code appears to have a syntax error (or mistake) that would result in nothing happening. Here's the code in question:

rect1.x + 100;

which would evaluate to 102 but not actually do anything. My guess is you want to increment rect1.x by 100, which would be done with:

rect1.x += 100;

This minor error/mistake is the cause of the remaining issues you're seeing. That is, rect1.x + 100 merely evaluates to 102 but doesn't change anything. The code would have to be changed to rect1.x += 100 for rect1 to cause rect1.x to be updated.

Once we made this fix we can add some console logs to see what's happening:

function mozillaCollides(object1, object2) {
  if (object1.x < object2.x + object2.width &&
    object1.x + object1.width > object2.x &&
    object1.y < object2.y + object2.height &&
    object1.height + object1.y > object2.y) {
    // collision detect!
    //do something, like this...
    rect1.x += 100;
    console.log(rect1, 'inside the mozillaCollides function');
  }
}

const rect1 = {
  x: 2,
  y: 2, 
  height: 2,
  width: 2
}

const rect2 = {
  x: 5,
  y: 5, 
  height: 2,
  width: 2
}

const rect3 = {
  x: 3,
  y: 3, 
  height: 2,
  width: 2
}

mozillaCollides(rect1, rect2);
mozillaCollides(rect1, rect3);

console.log(rect1, 'outside the mozillaCollides function')

If you run the code you'll see 2 console logs, resulting from mozillaCollides(rect1, rect3) (since the rectangles collide in that case), showing that rect1.x has been updated to 102 (2 + 100).

To reiterate, with your existing code, using rect1.x + 100, nothing would change, so you were correct about that. If we change that statement to rect1.x += 100 we then see a change to rect1.

Here's the other example you posted with the necessary change:

function mozillaCollides(object1, object2) {
  if (object1.x < object2.x + object2.width &&
    object1.x + object1.width > object2.x &&
    object1.y < object2.y + object2.height &&
    object1.height + object1.y > object2.y) 
  {
    return true;
  } else {
    return false;
  }
}

const rect1 = {
  x: 2,
  y: 2, 
  height: 2,
  width: 2
}

const rect2 = {
  x: 5,
  y: 5, 
  height: 2,
  width: 2
}

const rect3 = {
  x: 3,
  y: 3, 
  height: 2,
  width: 2
}

if (mozillaCollides(rect1, rect3)) {
  rect1.x += 100;
};

console.log(rect1)