Workshop › Zelda-style Dungeon › Step 4 of 22

Walk

What we are doing

Holding an arrow walks the hero that way, 2.5 pixels a frame, and turns it to face that way. DIRS gives each arrow key its direction. Walls don't stop you yet.

```js
const SPEED = 2.5
const DIRS = { ArrowUp: [0, -1], ArrowDown: [0, 1], ArrowLeft: [-1, 0], ArrowRight: [1, 0] }
const held = {}

function move(body, dx, dy) {
  body.x += dx
  body.y += dy
}

document.addEventListener('keydown', (event) => {
  held[event.key] = true
  if (DIRS[event.key]) event.preventDefault()
})
document.addEventListener('keyup', (event) => {
  held[event.key] = false
})

function update() {
  let dir = null
  for (const key in DIRS) if (held[key]) dir = DIRS[key]
  if (dir) {
    player.dir = dir
    move(player, dir[0] * SPEED, dir[1] * SPEED)
  }
}

  update()
```

What it means

held remembers which keys are down.
for (const key in DIRS) visits the names of the four arrows; the last one held wins.
move takes any body (the hero now, enemies later) and moves it.

Your turn

Under SIZE, write SPEED; under ROWS, write DIRS; under player, write held.
Above draw, write move, the key listeners and update.
In loop, call update() before draw().

Skills: Keyboard and mouse input

← The game loop Walls →

All steps