javascript - 在 Javascript 中创建玩家边界

Question

我目前面临一个问题，即在不设置边界的情况下，我的玩家或其他称为大炮的玩家可以移出屏幕。我尝试过实现一些边界，但我无法弄清楚其中的逻辑，而且目前不起作用。

为了澄清，我希望做到一旦大炮到达两侧的墙壁(它只能从左到右移动)，就不允许超出游戏的边界。

我当前的边界函数。

function playerBounds() {
    //This will check the position of the spaceship and if it hits the boundaries of the canvas will not let it go further.

    if (spaceShip.x < 0) {
        spaceShip.x = 0;
    }
    else if (spaceShip.x > canvas.width || spaceShip.x < canvas.width  ) {
        spaceship.x = canvas.wdith - spaceShip.width;
    }

}

Answer 1

有一个问题是这句话的逻辑

    else if (spaceShip.x > canvas.width || spaceShip.x < canvas.width  ) {
         spaceship.x = canvas.wdith - spaceShip.width;
    }

假设您的 Canvas 宽 100 像素。如果船的x位置是 100 ，默认情况下，这是要在 Canvas 上绘制的图像的左侧(除非您有一些代码将其 anchor 更改为中间或其他位置)。请参阅MDN's page了解更多信息。因此 Canvas 将从该点开始向右绘制，并移动 18 像素，这意味着船舶将从 100-118 像素绘制，这将位于屏幕外。

另外，你说宇宙飞船的宽度是 18，我假设你的 Canvas 比 18px 宽，所以该语句的第二部分 spaceShip.x < canvas.width ，评估为18 < 100在示例中， 始终为真，因此对于逻辑或来说是不必要的。作为一个令人讨厌的副作用，它也总是会将你的飞船捕捉到屏幕的右侧，因为它总是正确的。

解决方案可能是这样的:

// outside of playerBounds function
// stored in a variable so this doesn't have to be recalculated every time
var rightBorder = canvas.width - spaceShip.width;

function playerBounds() {
    if (spaceShip.x < 0) {
        spaceShip.x = 0;
    }

    if (spaceShip.x > rightBorder) {
        spaceship.x = rightBorder;
    }
}

还有一件事，你声明var Time;在顶部，但您引用 time其他地方，以防万一发生意外。