Workshop › Doodle Jump-style Climber › Step 5 of 24

Steer left and right

What we are doing

While bouncing, the arrow keys move the player sideways. A keys object remembers which keys are held down, and every frame the player moves 5 pixels toward the held arrow.

```js
const SPEED = 5 // sideways pixels per frame

const keys = {}

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

  const direction = (keys.ArrowRight ? 1 : 0) - (keys.ArrowLeft ? 1 : 0)
  player.x += direction * SPEED
```

What it means

keys[event.key] = true on press and false on release: keys.ArrowLeft says whether that key is held right now.
direction is 1 for right, -1 for left, 0 for none or both.
preventDefault stops the arrows from scrolling the page.

Your turn

Under JUMP, write SPEED.
Under player, write keys and the two key listeners.
At the top of update, write the two steering lines.

Skills: Keyboard and mouse input

← Bounce Through the sides →

All steps