Workshop › Space Invaders-style › Step 14 of 21

Lives

What we are doing

You have 3 lives. A bomb that touches the ship costs one, and clears the other bombs so you get a moment to breathe. Lives are shown top right.

```js
let lives = 3

function loseLife() {
  lives -= 1
  bombs = []
}

  if (bombs.some((bomb) => overlaps(bomb, ship))) loseLife()

  ctx.textAlign = 'right'
  ctx.fillText('LIVES ' + lives, canvas.width - 10, 24)
```

What it means

• some is true if at least one bomb overlaps the ship; the same overlaps as for bullets.
• textAlign = 'right' makes the text end at x = canvas width − 10.

Your turn

1. Under score, write lives; under dropBomb, write loseLife.
2. In update, under the bomb filter line, check the ship.
3. In draw, write the lives after the score.

Skills: Collision detection, Game states

← Bombs fall Game over →

All steps

1. The ship
2. The game loop
3. Move the ship
4. Stay on screen
5. Fire
6. Bullets fly
7. A short reload
8. The invaders
9. The march
10. Hit!
11. Score
12. They shoot back
13. Bombs fall
14. Lives
15. Game over
16. Best score
17. A wave in a function
18. Play again
19. Waves
20. Faster and faster
21. Build it yourself: an extra life