Workshop › Pong › Step 19 of 26

First to five

What we are doing

A match ends when a player reaches 5 points. The game keeps a state: 'playing' or 'over'; when it is over, nothing moves.

```js
const WIN_SCORE = 5
let state = 'playing' // 'playing' or 'over'

  if (winner.score >= WIN_SCORE) {
    state = 'over'
    return
  }

function update() {
  if (state !== 'playing') return
```

What it means

• WIN_SCORE names the target once.
• In point, reaching it ends the game and return skips the serve.
• update does nothing unless the game is being played.

Your turn

1. Under BALL, write WIN_SCORE; under let ball, write let state.
2. In point, write the check under winner.score += 1.
3. Make if (state !== 'playing') return the first line of update.

Skills: Game states

← Show the score Who won? →

All steps

1. Get the canvas and the pen
2. A black court
3. One dash of the net
4. The whole net
5. Two paddles
6. A function that draws
7. The game loop
8. Remember held keys
9. Move the paddles
10. Stay on the court
11. The ball
12. The ball moves
13. Bounce off the top and bottom
14. Does the ball touch a paddle?
15. The paddles hit back
16. Serve again
17. Keep the score
18. Show the score
19. First to five
20. Who won?
21. Play again
22. Aim with the paddle
23. Faster every hit
24. A computer opponent
25. One player or two
26. Build it yourself: a serve pause