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

Touch steering

What we are doing

On a phone: holding a finger on the left half steers left, on the right half steers right. The touch simply "holds" the matching arrow key in keys, so update needs no change.

```js
// Touch: hold the left or right half of the game to steer.
canvas.addEventListener('pointerdown', (event) => {
  const rect = canvas.getBoundingClientRect()
  const left = event.clientX - rect.left < rect.width / 2
  keys[left ? 'ArrowLeft' : 'ArrowRight'] = true
})
function stopSteering() {
  keys.ArrowLeft = false
  keys.ArrowRight = false
}
canvas.addEventListener('pointerup', stopSteering)
canvas.addEventListener('pointercancel', stopSteering)
```

What it means

left is true when the touch is in the left half of the canvas as shown on screen.
Lifting the finger (or the browser cancelling the touch) lets go of both arrows.

Your turn

Under the keyup listener, write the touch listeners.

Skills: Keyboard and mouse input

← Half here, half there Platforms →

All steps