Question

此碰撞代码（从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;
}

但是，如果写成函数，它永远不会成立（没有任何反应）。

功能：

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和rect2实际上没有碰撞，但是x轴上的rect1仍在不断移动100个像素，所以我只能假设这不是函数的编写方式！）：

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

根据括号的位置，它要么经常执行要么根本不执行这一事实令人困惑（我正在学习语法）。当碰撞代码没有被编写为被调用的函数时，碰撞代码工作得很好，从而加剧了这种混乱。

然后，我的问题是关于编写函数的正确JavaScript语法。我似乎写错了（代码工作，否则没有在函数中），任何澄清都值得赞赏。

Answer 1

代码似乎有语法错误（或错误），导致什么也没发生。这是有问题的代码：

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专门用于内联

1 个答案: