Workshop › Typing Rain › Step 32 of 33

Tap the keys

What we are doing

A tap on a key calls the same type(key) as the real keyboard, so every rule works the same on both. After the game, a tap plays again.

```js
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
  if (state === 'over') return reset()
  ROWS.forEach((keys, row) => {
    for (let i = 0; i < keys.length; i++) {
      const k = keyRect(row, i)
      if (x >= k.x && x < k.x + KEY_W && y >= k.y && y < k.y + KEY_H) type(keys[i])
    }
  })
})

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

What it means

pointerdown fires for a mouse button or a finger. getBoundingClientRect() gives the canvas's box on the page; the two formulas turn the page position into canvas pixels, even when the canvas is shown smaller on a phone.
The loops go over every key with the same keyRect; if the point is inside a key's box, its letter is typed.

Your turn

Above function draw() { write the pointerdown listener, with an empty line after it.
Change the last panel text to 'Press Enter or tap to play again'.

Skills: Keyboard and mouse input

← Light up the next key Build it yourself: change your mind →

All steps