javascript - JavaScript仅内联工作

此冲突代码（从Mozilla逐字引用）起作用：

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

但是，如果将其编写为函数，则它永远不会响起true（什么都不会发生）。

功能：

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

调用函数：

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

尽管代码在函数/内联内写时仍有效，但是什么也没有发生！

如果像这样通过稍微移动方括号来更改函数调用，那么它就一直被称为true（rect1始终在x轴上移动100像素，尽管rect1和rect2实际上并不冲突，所以我只能假设这不是函数的编写方式！）：

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

它要么持续执行，要么根本不执行，这取决于括号的位置，这令人困惑（我正在学习语法）。当冲突代码没有被编写为被调用的函数时，冲突代码就可以正常工作，这加剧了这种混乱。

那么，我的问题是关于编写函数的正确JavaScript语法。我似乎在写这个错误（如果没有函数，代码可以正常工作），任何澄清都值得赞赏。

最佳答案

该代码似乎有语法错误（或错误），将导致什么都不会发生。这是有问题的代码：

rect1.x + 100;

会得出102的值，但实际上什么也没做。我的猜测是您想将rect1.x增加100，可通过以下方式完成：

rect1.x += 100;

这个小错误/错误是导致您看到其他问题的原因。也就是说，rect1.x + 100仅求和为102，而没有任何改变。对于rect1.x += 100，必须将代码更改为rect1，以使rect1.x被更新。

完成此修复后，我们可以添加一些控制台日志以查看发生了什么：

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')

如果运行代码，您将看到2个控制台日志，这些日志是由mozillaCollides(rect1, rect3)生成的（因为在这种情况下矩形会发生碰撞），显示rect1.x已更新为102（2 + 100）。

重申一下，使用您现有的代码，使用rect1.x + 100不会改变任何内容，因此您是正确的。如果我们将该语句更改为rect1.x += 100，则将看到对rect1的更改。

这是您发布的另一个示例，其中包含必要的更改：

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)

关于javascript - JavaScript仅内联工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47538741/