Workshop › Tower Defense › Step 20 of 42

Fire!

What we are doing

Towers do not shoot every frame. Each has a cooldown that counts down; at zero, if it has a target, it fires a bullet and the cooldown starts again at the kind's reload. A timer per thing, counted down in update: the same idea runs every weapon and spell in games.

```js
let bullets

  bullets = []

  for (const t of towers) {
    t.cooldown -= 1
    if (t.cooldown > 0) continue
    const target = targetFor(t)
    if (!target) continue
    bullets.push({ x: t.col, y: t.row, target, kind: t.kind })
    t.cooldown = TOWERS[t.kind].reload
  }

  ctx.fillStyle = '#fef08a'
  for (const b of bullets) {
    ctx.beginPath()
    ctx.arc((b.x + 0.5) * TILE, TOP + (b.y + 0.5) * TILE, 4, 0, Math.PI * 2)
    ctx.fill()
  }
```

What it means

continue skips the rest of the loop for this tower and goes on to the next one.
A bullet starts on the tower's tile, remembers its target enemy and the tower's kind.
Bullets are small yellow circles, drawn after the enemies.

Your turn

Under let towers write let bullets; in reset, under towers = [], write bullets = [].
At the end of update, after an empty line, write the towers loop.
In draw, after the enemies loop and an empty line, write the bullets.

Skills: Game states, The game loop

← Pick a target A hit hurts →

All steps