Workshop › Wolfenstein-style 3D Maze › Step 4 of 18

Turn around

What we are doing

Left and right (or A and D) turn the player: the angle changes a little every frame while the key is held.

```js
const TURN = 0.04 // radians per frame
const keys = {}

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

function update() {
  if (keys.ArrowLeft || keys.a) player.angle -= TURN
  if (keys.ArrowRight || keys.d) player.angle += TURN
}

  update()
```

What it means

keys remembers which keys are held.
preventDefault stops the arrows from scrolling the page.
A bigger angle turns clockwise on screen (y grows downward), so Right adds.

Your turn

Above MINI, write TURN; under player, write keys.
Above draw, write the key listeners and update.
In loop, call update() before draw().

Skills: Keyboard and mouse input

← Ceiling, floor and a loop Walk →

All steps