Workshop › Hangman › Step 35 of 36

Tap a key

What we are doing

Clicking or tapping a key guesses its letter. We turn the pointer position into canvas pixels and ask each key whether the point is inside it.

```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 !== 'playing') {
    newWord()
    return
  }
  for (let i = 0; i < LETTERS.length; i++) {
    const k = keyRect(i)
    if (x >= k.x && x < k.x + KEY_W && y >= k.y && y < k.y + KEY_H) guess(LETTERS[i])
  }
})
```

What it means

getBoundingClientRect() tells where the canvas is on the screen and how big it looks. The canvas may be shown smaller or larger than 480 pixels, so we scale the pointer position into canvas pixels.
After the game, a click still starts a new word.
A point is inside a key when it is between its left and right edges and between its top and bottom. The gaps belong to no key.

Your turn

Replace the whole pointerdown listener with the new one. Press Run and play with the mouse only.

Skills: Keyboard and mouse input

← Keys that remember Build it yourself: a hint button →

All steps