Workshop › Wordle-style Word Guess › Step 21 of 26

Tap a key

What we are doing

A tap finds the key under the pointer in the same keyRects() list and types it. A tap anywhere else after the game starts a new word.

```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
  const hit = keyRects().find((k) => x >= k.x && x < k.x + k.w && y >= k.y && y < k.y + k.h)
  if (hit) type(hit.key)
  else if (state !== 'playing') reset()
})
```

What it means

• pointerdown fires for a mouse button or a finger.
• The canvas may be shown at another size, so the position is scaled into canvas pixels.
• find returns the first key whose rectangle holds the point, or undefined.

Your turn

Above function draw() {, write the listener and leave an empty line. Press Run and tap the keys.

Skills: Keyboard and mouse input

← Draw the keyboard Enter and Delete keys →

All steps

1. The canvas and the pen
2. Paint the background
3. A function that draws
4. A row of five tiles
5. Six rows
6. Draw again and again
7. The typed letters
8. Type with the keyboard
9. Show the letters
10. Backspace
11. Leave shortcuts alone
12. A secret word
13. Right letter, right place
14. Right letter, wrong place
15. Enter sends the guess
16. Colour the guesses
17. Winning and losing
18. A message line
19. Where the keys go
20. Draw the keyboard
21. Tap a key
22. Enter and Delete keys
23. Keys that remember
24. Keep statistics
25. Show the statistics
26. Build it yourself: only real words