Workshop › Bomberman-style Arena › Step 12 of 42

Walk

What we are doing

When the player is exactly on a tile and an arrow is held, the next tile that way becomes the target, if it is floor. Then the player slides towards it. Choosing and the first bit of sliding happen in the same frame, so there is no stutter at each tile.

```js
const walkable = (r, c) => grid[r][c] === ' '

// On a tile, the last arrow key held picks the next tile; then the player keeps sliding towards it.
function updatePlayer() {
  const dir = DIRS[held[held.length - 1]]
  if (!player.target && dir && walkable(player.y + dir[0], player.x + dir[1])) {
    player.target = { r: player.y + dir[0], c: player.x + dir[1] }
  }
  if (player.target) moveTo(player, SPEED)
}

function update() {
  updatePlayer()
}

function loop() {
  update()
  draw()
```

What it means

walkable(r, c) is true for floor.
held[held.length - 1] is the last key held; DIRS[...] its step, or undefined when no key is held.
A new target is chosen only with no target yet, a key held, and floor that way.
update holds the game's rules; the loop updates first, then draws.

Your turn

Above function reset() { write walkable.
Above the keydown listener write updatePlayer and update.
In loop, write update() above draw().

Skills: Keyboard and mouse input, Game states

← Slide towards a target Drop a bomb →

All steps