Vertical movement along border is blocked while pushing left or right

[TcMikjaer]

I've created a tilemap and a character to walk around it, and almost everything is working fine.

However I can see that when I move vertically along the border of the map, I'm prevented from moving further just before I enter a new tile if I also push left or right accordingly.

Any idea why that is?

Also any recommendations on my code is -very- welcome.

class GameScene extends Phaser.Scene
{
  constructor()
  {
    super({key:'GameScene'});
    this.player = undefined;
    this.map = undefined;
  }

  create()
  {
    this.map = new TileMap(this);
    this.player = new Player(this);
    this.physics.add.collider(this.player.sprite, this.map.impasable);
    this.cameras.main.startFollow(this.player.sprite);
  }

  update()
  {
    this.player.update();
  }
}



class TileMap
{
  constructor(scene)
  {
    this.tileWidth = 64;
    this.tileHeight = 64;
    this.impasable = scene.physics.add.staticGroup();
    this.tiles = [
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
      [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
      [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
      [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
      [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
      [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
      [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
      [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
      [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
      [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
      [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
      [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
      [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    ];

    for (var y = 0; y < this.tiles.length; y++) {
      for (var x = 0; x < this.tiles[y].length; x++) {
        switch (this.tiles[y][x]) {
          case 0:
            this.impasable.create(x * this.tileWidth, y * this.tileHeight, 'water');
            break;
          case 1:
            scene.add.sprite(x * this.tileWidth, y * this.tileHeight, "grass");
            break;
        }
      }
    }
  }
}

class Player
{
  constructor(scene)
  {
    this.sprite = scene.physics.add.sprite(scene.game.renderer.width / 2, scene.game.renderer.height / 2, "player");

    scene.anims.create({
      key: "PlayerWalkLeft",
      frameRate: 4,
      repeat: -1,
      frames: scene.anims.generateFrameNumbers("player" , {
        frames : [1, 5, 9, 13]
      })
    });
    scene.anims.create({
      key: "PlayerWalkRight",
      frameRate: 4,
      repeat: -1,
      frames: scene.anims.generateFrameNumbers("player" , {
        frames : [3, 7, 11, 15]
      })
    });
    scene.anims.create({
      key: "PlayerWalkUp",
      frameRate: 4,
      repeat: -1,
      frames: scene.anims.generateFrameNumbers("player" , {
        frames : [2, 6, 10, 14]
      })
    });
    scene.anims.create({
      key: "PlayerWalkDown",
      frameRate: 4,
      repeat: -1,
      frames: scene.anims.generateFrameNumbers("player" , {
        frames : [0, 4, 8, 12]
      })
    });

    this.cursors = scene.input.keyboard.createCursorKeys();
  }

  update()
  {
    var velX = 0;
    var velY = 0;
    var speed = 200;
    if (this.cursors.left.isDown) { velX -= speed; }
    if (this.cursors.right.isDown) { velX += speed; }
    if (this.cursors.up.isDown) { velY -= speed; }
    if (this.cursors.down.isDown) { velY += speed; }
    this.sprite.setVelocityX(velX);
    this.sprite.setVelocityY(velY);

    if (velY > 0 && velX == 0) {
      this.sprite.anims.play("PlayerWalkDown", true);
    } else if (velY < 0 && velX == 0) {
      this.sprite.anims.play("PlayerWalkUp", true);
    } else if (velX > 0) {
      this.sprite.anims.play("PlayerWalkRight", true);
    } else if (velX < 0) {
      this.sprite.anims.play("PlayerWalkLeft", true);
    } else {
      this.sprite.anims.stop();
    }
  }
}