Workshop › Tower Defense › Step 40 of 42

Tower buttons

What we are doing

Keys work, but a player should see the choice. Two buttons in the top bar show each tower's price; the chosen one is lit in its own color, and a click picks it.

```js
const BUTTONS = [
  { kind: 'arrow', x: 250, w: 110 },
  { kind: 'cannon', x: 364, w: 110 },
]

  if (p.y < TOP) {
    const button = BUTTONS.find((b) => p.x >= b.x && p.x < b.x + b.w)
    if (button) selected = button.kind
    return
  }

  for (const b of BUTTONS) {
    const kind = TOWERS[b.kind]
    ctx.fillStyle = b.kind === selected ? kind.color : '#334155'
    ctx.fillRect(b.x, 6, b.w, 28)
    ctx.fillStyle = b.kind === selected ? '#0f172a' : 'white'
    ctx.fillText(b.kind + ' ' + kind.cost, b.x + b.w / 2, 26)
  }
```

What it means

BUTTONS lists each button's tower kind, left edge and width.
find returns the first button the click is inside, or undefined.
condition ? a : b picks the lit color for the chosen button and grey for the other.

Your turn

Under the comment above START, write BUTTONS.
In pointerdown, write the top-bar block right above if (p.y >= BAR).
In draw, write the for loop right under ctx.textAlign = 'center' (the one after the Gold line).

Skills: Keyboard and mouse input, Drawing on a canvas

← A second tower: the cannon Splash damage →

All steps