Javascript无法读取未定义的属性 'x'？

Question

我正在制作游戏，当我将碰撞函数分配给变量时出现此错误。我想在另一个函数中调用我的函数，但出现此错误。我该如何摆脱它？错误是下面“let Collision”函数中的“x”:

var playerScore = 0;
let addScore = () => {
playerScore += 10;
document.getElementById("playerScore").innerHTML = playerScore;
};
let collision = (player, faller) => {
return player.x < faller.x + faller.width && player.x + player.width > faller.x &&
  player.y < faller.y + faller.height && player.y + player.height > faller.y
};

let draw = (millisecondsElapsed) => {
    game.clearRect(0, 0, canvas.width, canvas.height);
    fallers.forEach((faller) => {
        faller.draw();
        collision();
        //COLLISION FUNCTION!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
          if (collision === true) {
              game.clearRect(0, 0, canvas.width, canvas.height);
              addScore();
            };
        console.log(collision);
        faller.move(millisecondsElapsed);
    });

    player.draw();

    // Remove fallers that have hit the ground. You might have other reasons to remove fallers.
    fallers = fallers.filter((faller) => {
        return faller.y < canvas.height;
    });
};

Answer 1

您正在调用需要某些参数的碰撞函数:

let collision = (player, faller) => {

但您没有向其传递任何参数(最重要的是，您没有向其传递 player 参数):

collision();

因此，player 未定义，当您尝试执行以下操作时会收到错误:

player.x

因为没有undefined.x。

编辑

正如 zfrisch 在评论中建议的那样，解决此问题的一种方法是为 player 参数定义默认值。如果您这样做，那么即使您在不带参数的情况下调用collision，浏览器仍然会有一个值可用于player。

您可以通过添加 = 和默认值来指定默认值。例如，如果您执行了以下操作:

let collision = (player={x: 1}, faller) => {
    // ...
};
collision();

这将与您所做的完全相同:

collision({x: 1});