Workshop › Tower Defense › Step 12 of 42

Towers

What we are doing

Tower kinds live in a small table, TOWERS: what they cost, how far they reach, how hard they hit, how long they reload, and their color. For now there is one kind, arrow. Built towers go in a list and are drawn as squares.

```js
const TOWERS = {
  arrow: { cost: 50, range: 2.5, damage: 4, reload: 24, color: '#38bdf8' },
}

let towers

  towers = []

  for (const t of towers) {
    ctx.fillStyle = TOWERS[t.kind].color
    ctx.fillRect(t.col * TILE + 6, TOP + t.row * TILE + 6, TILE - 12, TILE - 12)
  }
```

What it means

TOWERS.arrow holds everything about arrow towers; a built tower only says which kind it is (kind: 'arrow') and where it stands.
TOWERS[t.kind] looks the kind up by a name held in a variable.
The square is 6 pixels smaller than the tile on each side.

Your turn

Under SPEED write TOWERS.
Under let enemies write let towers; in reset, under enemies = [], write towers = [].
In draw, above the enemies loop, write the towers loop and an empty line.

Skills: Game states, Drawing on a canvas

← Here they come From a click to a tile →

All steps