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

所以让我们说你的画布是100px宽。如果船的x位置在100，默认情况下是在画布上绘制的图像的左侧（除非您有一些代码将其锚点更改为其中间或东西）。有关详细信息，请参阅MDN's page。因此画布将从那一点开始向右绘制，并且变为18px，这意味着该船将从100-118px绘制，这将是屏幕外的。

另外，你说太空船的宽度是18，我假设你的画布比18px宽，所以那个或语句的第二部分spaceShip.x < canvas.width被评估为{{1}在示例中，将始终为true，因此对于逻辑或。作为令人讨厌的副作用，它总是会将你的船撞到屏幕的右侧，因为它始终是真的。

解决方案可能类似于：

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;，以防万一发生意外。

Answer 2

两个问题：

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

spaceShip.x > canvas.width || spaceShip.x < canvas.width会的总是评估为真（除非spaceShip.x等于 canvas.width），所以你的宇宙飞船将被有效锁定在一个位置永远。
你的作业中有一个拼写错误：canvas.wdith应该是 canvas.width

你需要调整你的条件，以便它只捕获太空船离开画布右边缘的情况。不过，看起来你似乎正走在正确的轨道上。

在Javascript中创建玩家边界

2 个答案: