TypeScript Space Shooter movement

Question

I'm trying to create a simple space shooter game using typescript and i've got kind of stuck at checking the movement.The thing is that if i only press one key it works fine but if i press 2 keys at the same time it won't check for collisions with margins.Do i have to check for every case if i press multiple buttons or there's another way to do it? Here's the code:

update(canvas) {
        if (Game.keysPressed[KeyBindings.LEFT]) {
            this.xVel = -1;
            if (this.x <= 20) {
                this.xVel = 0
            }
        } else if (Game.keysPressed[KeyBindings.RIGHT]) {
            this.xVel = 1;
            if (this.x + this.width >= canvas.width - 20) {
                this.xVel = 0;
            }
        } else if (Game.keysPressed[KeyBindings.UP]) {
            this.yVel = -1;
            if (this.y + this.height <= 500) {
                this.yVel = 0;
            }

        } else if (Game.keysPressed[KeyBindings.DOWN]) {
            this.yVel = 1;
            if (this.y + this.height >= 880) {
                this.yVel = 0;
            }
        }

        else {
            this.xVel = 0;
            this.yVel = 0;
        }

        this.x += this.xVel * this.speed;
        this.y += this.yVel * this.speed;

    }

Thanks for helping!

Answer 1

I recommend trying to put the collision check outside of the if-statements of movements, because none of the collisions would have trouble been placed together.
If you put it outside them, they'll keep checking all boundaries at once. which seems to be better in your case.

Explained in code:

update(canvas) { 
    //movement
    if (Game.keysPressed[KeyBindings.LEFT]) {
        this.xVel = -1;
    } 
    else if (Game.keysPressed[KeyBindings.RIGHT]) {
        this.xVel = 1;     
    }
    else {
        this.xVel = 0;
    }
    if (Game.keysPressed[KeyBindings.UP]) {
        this.yVel = -1;
    } 
    else if (Game.keysPressed[KeyBindings.DOWN]) {
        this.yVel = 1; 
    }
    else {
        this.yVel = 0;
    }

    //collision
    if (this.x <= 20) {
        this.xVel = 0
    }
    if (this.x + this.width >= canvas.width - 20) {
        this.xVel = 0;
    }
    if (this.y + this.height <= 500) {
        this.yVel = 0;
    }
    if (this.y + this.height >= 880) {
        this.yVel = 0;
    }

    this.x += this.xVel * this.speed;
    this.y += this.yVel * this.speed;
}

I've also changed your movement if-else-statements, so the else-statement will trigger correctly.

Answer 2

Not 100% sure about it but you don't have to put else everywhere, juste make a condition so that you can't press left if right is pressed, you can't press up if down is pressed (and vice versa)

This way if they press both the player won't move, and if only two on different axes are pressed the player will move diagonally

Also something else you can do is just say that if the player is on the margin the key press won't be accepted

Well, might be a bad solution but I use a lot of "&&" in my conditions, that's a huge gain of space, but not always readability

Answer 3

Here's what I've modified and now it works a little bit better but still has some moments when the ship goes out of the screen :(

update(canvas) {

        if (Game.keysPressed[KeyBindings.LEFT]) {
                this.xVel = -1;
                if (this.x <= 20) {
                    this.xVel = 0
                }
            } 

            if (Game.keysPressed[KeyBindings.RIGHT]) {
                this.xVel = 1;
                if (this.x + this.width >= canvas.width - 20) {
                    this.xVel = 0;
                }
            } 

            if (Game.keysPressed[KeyBindings.UP]) {
                this.yVel = -1;
                if (this.y + this.height <= 500) {
                    this.yVel = 0;
                }

            } 

            if (Game.keysPressed[KeyBindings.DOWN]) {
                this.yVel = 1;
                if (this.y + this.height >= 880) {
                    this.yVel = 0;
                }
            }
            if (!(Game.keysPressed[KeyBindings.DOWN] || Game.keysPressed[KeyBindings.UP] || Game.keysPressed[KeyBindings.LEFT] || Game.keysPressed[KeyBindings.RIGHT])) {
                this.xVel = 0;
                this.yVel = 0;
            }

            this.x += this.xVel * this.speed;
            this.y += this.yVel * this.speed;
        }
    }