Workshop › Space Invaders-style › Step 15 of 21

Game over

What we are doing

The game ends when the last life is lost, or when an invader reaches the ship's height. Then everything stops and a dark band says GAME OVER.

```js
let state = 'playing' // 'playing' or 'over'

  if (lives <= 0) endGame()
}

function endGame() {
  state = 'over'
}

  if (state !== 'playing') return

  if (state !== 'playing') return

  if (alive().some((invader) => invader.y + invader.h >= SHIP_Y)) endGame()

  if (state === 'over') {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'
    ctx.fillRect(0, 200, canvas.width, 120)
    ctx.fillStyle = 'white'
    ctx.textAlign = 'center'
    ctx.font = 'bold 32px monospace'
    ctx.fillText('GAME OVER', canvas.width / 2, 250)
  }
```

What it means

update does nothing once the game is over, so nothing moves.
The second check stops the frame right after the last life is lost.
An invader whose bottom reaches SHIP_Y has landed: the game ends.

Your turn

Under lives, write state; in loseLife, end the game on the last life, and write endGame below it.
At the top of update, and under the ship check, write the stop line.
At the end of update, end the game when an invader lands.
At the end of draw, draw the GAME OVER band.

Skills: Game states

← Lives Best score →

All steps