Workshop › Pong › Step 21 of 26

Play again

What we are doing

A reset function gathers everything a new match needs: paddles in place, scores at 0, playing, first serve. Space calls it after a match.

```js
let left
let right
let ball
let state // 'playing' or 'over'

function reset() {
  left = { x: 20, y: 160, score: 0 }
  right = { x: canvas.width - 20 - PADDLE_W, y: 160, score: 0 }
  state = 'playing'
  serve(1)
}

  if (event.key === ' ' && state === 'over') reset()

reset()
```

What it means

• The variables are declared at the top without values; reset gives them their starting values.
• Space only restarts when the match is over.
• reset() at the bottom starts the first match (it replaces the old serve(1)).

Your turn

1. Replace the four variable lines (left to state) with the plain declarations, and write reset under const keys = {}.
2. In the keydown listener, add the Space line.
3. Replace serve(1) at the bottom with reset().

Skills: Game states, Functions

← Who won? Aim with the paddle →

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