Workshop › 15 Puzzle › Step 14 of 27

Click a tile

What we are doing

A click (or a tap) finds the square under the pointer and moves it. We turn the pointer position into board pixels, then divide by the width of a square plus its gap.

```js
canvas.addEventListener('pointerdown', (event) => {
  const rect = canvas.getBoundingClientRect()
  const x = ((event.clientX - rect.left) * canvas.width) / rect.width - LEFT
  const y = ((event.clientY - rect.top) * canvas.height) / rect.height - TOP
  const col = Math.floor(x / (SIZE + GAP))
  const row = Math.floor(y / (SIZE + GAP))
  if (col >= 0 && col < N && row >= 0 && row < N) move(row * N + col)
})
```

What it means

pointerdown fires when a mouse button or a finger goes down on the canvas.
The canvas can be shown bigger or smaller than 400 pixels, so the position is scaled into canvas pixels; subtracting LEFT and TOP measures from the board's corner.
Dividing by SIZE + GAP and rounding down gives the column and row.
Only clicks on the board count; the position is row * N + col.

Your turn

Above function squareX(i), write the listener and leave an empty line. Press Run and click tiles next to the gap.

Skills: Keyboard and mouse input

← Slide a tile Arrow keys →

All steps