Workshop › Tower Defense › Step 17 of 42

Show before you click

What we are doing

The tile under the mouse lights up: white if you can build there, red if not. canBuild gives the answer we already use for clicks. Showing players what will happen before they click is a big part of a game feeling fair.

```js
let hover = null // the tile under the mouse

canvas.addEventListener('pointermove', (event) => {
  const p = tileAt(event)
  hover = p.row >= 0 && p.row < ROWS ? p : null
})
canvas.addEventListener('pointerleave', () => {
  hover = null
})

  if (hover) {
    ctx.fillStyle = canBuild(hover.col, hover.row) ? 'rgba(255, 255, 255, 0.25)' : 'rgba(239, 68, 68, 0.35)'
    ctx.fillRect(hover.col * TILE, TOP + hover.row * TILE, TILE, TILE)
  }
```

What it means

pointermove remembers the tile under the pointer, but only on the map's rows; pointerleave forgets it when the pointer leaves the canvas.
rgba(...) colors are see-through: the last number is how opaque (0 to 1), so the tile still shows underneath.

Your turn

Under let selected write let hover = null.
Right under the pointerdown listener's }), write the pointermove and pointerleave listeners.
In draw, after the tile loops and an empty line, write the if (hover) block.

Skills: Keyboard and mouse input

← Show the gold Show the range →

All steps