Tile-based movement with Lance game engine?

Question

I'm using Lance for a game where the gameplay area is a tiled map. When a player presses the left-arrow key, their character should move one tile to the left, etc. I tried two approaches, see below, but got neither to work.

Could either approach be modified to work with tile-based movement? Or is a third approach needed? Or is Lance not suited to this kind of game?

Approach 1: Adjust the player's position directly when a key is pressed. From my GameEngine class:

if (inputData.input == 'left') {
  player.position.x -= 32;
  player.angle = 180;
}

While this works well for a single player, it doesn't in multiplayer. When player A moves, their position is not updated on player B's screen.

Approach 2: Set the player's state when a key is pressed:

if (inputData.input == 'left') {
  player.state = 'walkLeft';
}

Then add a postStep handler in the common GameEngine class. (Adding it to Player didn't work). This code turns the player (over many steps) to face 180 degrees and then accelerates the player in that direction:

onPostStep(event) {
  let players = this.world.queryObjects({instanceType: Player});
  players.forEach(player => {
    if (player.state == 'walkLeft') {
      if (Math.abs(player.angle - 180) > 2)
        player.turnLeft(2);
      }
      else {
        player.accelerate(1);
        player.state = '';
      }
    }
  })
}

With this approach, if a player presses the left arrow key, their angle changes as expected at first, but the acceleration and movement is erratic. Also, Player A's position appears different on their screen vs the screen of Player B.

The Spaaace demo is the base for my project, so my project uses the same bending, physics engine, etc.

Answer 1

The first approach is better. The Brawler game in the sample collection does exactly what you describe. You can look at the BrawlerGameEngine.js code in https://github.com/lance-gg/tinygames/tree/master/brawler

Make sure that the action is processed in the method GameEngine::processInput(inputData, playerId)