Workshop › Doodle Jump-style Climber › Step 15 of 24

Miss and fall

What we are doing

The floor goes away. Miss a platform and you fall; once you drop below the bottom of the screen, the game is over.

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

  if (state !== 'playing') return

  if (player.y > cameraY + canvas.height) {
    state = 'over'
  }

  if (state === 'over') {
    ctx.fillStyle = 'rgba(248, 250, 252, 0.85)'
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    ctx.fillStyle = '#0f172a'
    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

• FLOOR and the floor bounce are removed.
• When the player's top is below the bottom of the screen (cameraY + canvas.height), it is out of sight: game over.
• update stops while the game is over, and a see-through light layer with the message covers the picture.

Your turn

1. Delete the FLOOR line, and in update the floor block with its comment.
2. Under highest, write state; make the state check the first line of update.
3. At the end of update, write the fall check; at the end of draw, the game over screen.

Skills: Game states

← Endless platforms Play again →

All steps

1. The jumper
2. Draw again and again
3. Gravity
4. Bounce
5. Steer left and right
6. Through the sides
7. Half here, half there
8. Touch steering
9. Platforms
10. Land on platforms
11. A camera that follows
12. Lines on the wall
13. How hard should it be?
14. Endless platforms
15. Miss and fall
16. Play again
17. Tap to play again
18. Score is height
19. Best score
20. Kinds of platform
21. Moving platforms
22. Traps
23. It breaks!
24. Build it yourself: springs