Workshop › Frogger-style Crossing › Step 10 of 22

Three lives

What we are doing

The frog has three lives. Each hit costs one; after the last, the game is over, nothing moves and a message covers the board.

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

function die() {
  lives -= 1
  if (lives > 0) {
    newFrog()
    return
  }
  state = 'over'
}

  if (state !== 'playing') return

  ctx.fillStyle = 'white'
  ctx.font = 'bold 18px sans-serif'
  ctx.textAlign = 'right'
  ctx.fillText('Lives: ' + lives, canvas.width - 10, 27)

  if (state === 'over') {
    ctx.fillStyle = 'rgba(15, 23, 42, 0.75)'
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    ctx.fillStyle = 'white'
    ctx.textAlign = 'center'
    ctx.font = 'bold 32px sans-serif'
    ctx.fillText('Game Over', canvas.width / 2, canvas.height / 2)
    ctx.font = '18px sans-serif'
    ctx.fillText('Press Space to play again', canvas.width / 2, canvas.height / 2 + 32)
  }
```

What it means

die takes a life; with lives left a new frog starts, otherwise the state becomes 'over'.
Both hop and update do nothing unless playing.
The lives are shown top right; at game over a see-through dark layer and a message cover everything.

Your turn

Under frog, write lives and state.
Replace the body of die.
Make the state check the first line of hop and of update.
At the end of draw, write the lives text and the game over block.

Skills: Game states

← Hit by a car Play again →

All steps