Workshop › Zelda-style Dungeon › Step 6 of 22

A touch pad

What we are doing

On a phone, a faint circle in the bottom-left corner is a pad: hold a side of it to walk that way. Whichever is farther from the middle, across or down, decides the direction. (A tap elsewhere will swing the sword, soon.)

```js
// Touch: the pad in the corner moves, a tap anywhere else swings the sword.
const PAD = { x: 70, y: 330, r: 60 }
let padDir = null
canvas.addEventListener('pointerdown', (event) => {
  const rect = canvas.getBoundingClientRect()
  const x = ((event.clientX - rect.left) * canvas.width) / rect.width
  const y = ((event.clientY - rect.top) * canvas.height) / rect.height
  const dx = x - PAD.x
  const dy = y - PAD.y
  if (Math.hypot(dx, dy) < PAD.r) padDir = Math.abs(dx) > Math.abs(dy) ? [Math.sign(dx), 0] : [0, Math.sign(dy)]
})
canvas.addEventListener('pointerup', () => {
  padDir = null
})

  let dir = padDir

  // The touch pad, faint, in the corner.
  ctx.strokeStyle = 'rgba(255, 255, 255, 0.25)'
  ctx.lineWidth = 2
  ctx.beginPath()
  ctx.arc(PAD.x, PAD.y, PAD.r, 0, Math.PI * 2)
  ctx.stroke()
```

What it means

The touch position is scaled to canvas pixels, in case the canvas is shown bigger or smaller.
Inside the circle, Math.sign turns the longer of dx, dy into −1 or 1: one of the four directions.
update starts from padDir; a held arrow key still wins.

Your turn

Under the key listeners, write the pad and its two listeners.
In update, start dir from padDir.
At the end of draw, draw the pad.

Skills: Keyboard and mouse input

← Walls Next room →

All steps