Collisions in roguelike movement, problem with two arrows pressed at once

[Kacper Pietrzak]

Hey guys!

I am coding simple roguelike dungeon crawler: Live version. I have this issue with collisions, whenever a player is positioned like this:

( the lighter tiles are floor tiles and the darker walls obviously )

When he presses down arrow and left arrow at once, he can move on wall tile.

This is how I handle input:

onKeyDown( event ){
		switch ( event.key ){
		case 'ArrowUp':
			this.nextStep( 0, -1 );
			break;
		case 'ArrowDown':
			this.nextStep( 0, 1 );
			break;
		case 'ArrowLeft':
			this.nextStep( -1, 0 );
			break;
		case 'ArrowRight':
			this.nextStep( 1, 0 );
		}
	}
	nextStep( playerDirectionX, playerDirectionY ){
		if ( !this.canMove( this.player, playerDirectionX, playerDirectionY ) ){
			return;
		}
		this.player.x += playerDirectionX * TILE_SIZE;
		this.player.y += playerDirectionY * TILE_SIZE;
	}
	canMove( unit, dirX, dirY ){
		const targetTileX = ( unit.body.x / TILE_SIZE ) + dirX;
		const targetTileY = ( unit.body.y / TILE_SIZE ) + dirY;

		return ( this.map.isInBounds( targetTileX, targetTileY ) && !this.map.isWall( targetTileX, targetTileY ) );
}

Here's the whole project's code: https://github.com/pietrzakacper/Roguelike-Dungeon-Crawler/tree/master/src/Game

Can somebody help me please ?

[squilibob]

To make it more atomic you could make your function calls from the update function. You could try something like

update() {
  this.playerNextStep( this.playerDirectionX, this.playerDirectionY );
  this.playerDirectionX = 0;
  this.playerDirectionY = 0;
  }
  onKeyDown( event ){
    switch ( event.key ){
    case 'ArrowUp':
      this.playerDirectionY =  -1;
      break;
    case 'ArrowDown':
      this.playerDirectionY =  1;
      break;
    case 'ArrowLeft':
      this.playerDirectionX =  -1;
      break;
    case 'ArrowRight':
      this.playerDirectionX =  1;
    }
  }

 

[Kacper Pietrzak]

It actually worked! Thank you