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

Touch controls

What we are doing

On a phone there are no arrow keys. Holding the left third of the screen turns left, the right third turns right, the middle walks. A tap after winning plays again.

```js
// Touch: hold the left third to turn left, the right third to turn right, the middle to walk.
canvas.addEventListener('pointerdown', (event) => {
  if (state === 'won') {
    reset()
    return
  }
  const rect = canvas.getBoundingClientRect()
  const third = ((event.clientX - rect.left) / rect.width) * 3
  keys[third < 1 ? 'ArrowLeft' : third < 2 ? 'ArrowUp' : 'ArrowRight'] = true
})
function stopTouch() {
  keys.ArrowLeft = false
  keys.ArrowUp = false
  keys.ArrowRight = false
}
canvas.addEventListener('pointerup', stopTouch)
canvas.addEventListener('pointercancel', stopTouch)
```

What it means

third is between 0 and 3: which third of the canvas was touched (the canvas may be shown bigger or smaller).
The touch presses a pretend key; lifting the finger releases all three.
pointercancel happens when the browser takes over the touch, e.g. for scrolling.

Your turn

Above update, write the touch listeners.

Skills: Keyboard and mouse input

← Best time Build it yourself: run →

All steps