Workshop › Battleship › Step 12 of 35

Tap to fire

What we are doing

A tap on the enemy's sea fires at that square. The pointer's page position is turned into canvas pixels, then into a row and a column.

```js
canvas.addEventListener('pointerdown', (event) => {
  const rect = canvas.getBoundingClientRect()
  const x = ((event.clientX - rect.left) * canvas.width) / rect.width - SEA.x
  const y = ((event.clientY - rect.top) * canvas.height) / rect.height - SEA.y
  const r = Math.floor(y / BIG)
  const c = Math.floor(x / BIG)
  if (r >= 0 && r < N && c >= 0 && c < N) playerShoots(r, c)
})
```

What it means

rect is where and how big the canvas is shown; the first part of x and y turns page pixels into canvas pixels.
Subtracting SEA.x and SEA.y measures from the sea's corner; dividing by BIG and rounding down gives the square.
Only squares on the sea (0 to 9 both ways) are shot.

Your turn

Write the listener above function drawSea(, followed by an empty line.

Skills: Keyboard and mouse input

← Your shot A message line →

All steps