Workshop › Scorched Earth-style Artillery › Step 13 of 23

Damage

What we are doing

A tank inside the blast loses health: 60 for a hit right on it, less the farther away, nothing at the edge. Each tank shows a health bar that turns red below 30.

```js
for (const t of tanks) {
  const d = Math.hypot(t.x - x, t.y - 6 - y)
  if (d < BLAST) t.hp = Math.max(0, Math.round(t.hp - (1 - d / BLAST) * 60))
}

  // Health bar
  ctx.fillStyle = '#0f172a'
  ctx.fillRect(t.x - 16, t.y - 22, 32, 4)
  ctx.fillStyle = t.hp > 30 ? '#22c55e' : '#ef4444'
  ctx.fillRect(t.x - 16, t.y - 22, (32 * t.hp) / 100, 4)
```

What it means

d is the distance from the blast to the tank's middle (6 pixels above its bottom).
1 - d / BLAST is 1 at the middle and 0 at the edge: the damage falls off with distance.
Health never goes below 0. The bar's green part is as long as the health.

Your turn

In explode, after digging, hurt the tanks nearby.
In the tank loop of draw, after the barrel, draw the health bar.

Skills: Collision detection, Game states

← Falling tanks Taking turns →

All steps