Workshop › Bomberman-style Arena › Step 39 of 42

Play with a finger

What we are doing

Touch fills the same held list the keyboard fills: ['ArrowRight'] while the finger is to the right, [] when it lifts. A tap on the player drops a bomb, and a tap after the end starts again.

```js
canvas.addEventListener('pointerdown', (event) => {
  if (state !== 'playing') return reset()
  const dir = touch(event)
  if (dir) held = [dir]
  else dropBomb()
})

canvas.addEventListener('pointermove', (event) => {
  if (held.length === 0) return
  const dir = touch(event)
  if (dir) held = [dir]
})

document.addEventListener('pointerup', () => {
  held = []
})

    ctx.fillText('Press Enter or tap to play again', canvas.width / 2, 222)
```

What it means

pointerdown: after the end, return reset() starts again and stops there. Otherwise a direction replaces held, and a tap on the player drops a bomb.
pointermove only changes the way while walking (held not empty).
pointerup is on the whole document, so lifting the finger outside the canvas stops too.

Your turn

Above function drawCircle( write the three listeners.
In the panel, change the last text to 'Press Enter or tap to play again'.

Skills: Keyboard and mouse input

← Which way is the finger? A clock →

All steps