Creating player boundaries in Javascript

Question

I am currently facing an issue where without setting boundaries my player or otherwise referred to as cannon is allowed to move off the screen. I have tried implementing some boundaries but I am unable to figure out the logic and it currently does not work.

To clarify I'm looking to make it so once the cannon reaches the wall on either side (It can only move left to right) it is not allowed to exceed the boundaries of the game.

my current boundaries function.

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

One problem is the logic in this statement

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

So let's say your canvas is 100px wide. If the ship's x position is at 100, by default that's the lefthand side of an image to draw on the canvas (unless you've got some code to change its anchor point to the middle of it or something). See MDN's page for more info. So the canvas will start drawing to the right from that point, and go 18px, meaning the ship will be drawn from 100-118px, which would be offscreen.

Also, you say the width of the spaceship is 18, and I'm going to assume your canvas is wider than 18px, so the second part of that or statement, spaceShip.x < canvas.width, evaluated as 18 < 100 in the example, will always be true and thus unnecessary for a logical or. As a nasty side effect, it will also always snap your ship to the right side of the screen since it's always true.

The solution could be something like:

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

One more thing, you declare var Time; at the top, but you reference time everywhere else, just in case that was an accident.

Answer 2

Two issues:

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

1. spaceShip.x > canvas.width || spaceShip.x < canvas.width will always evaluate to true (unless spaceShip.x is equal to canvas.width), so your spaceship will effectively be locked in one position forever.
2. You have a typo in your assignment: canvas.wdith should be canvas.width

You need to adjust your conditional so that it only catches the case where the spaceship goes off the right edge of the canvas. It looks like you're on the right track, though.