Workshop › Pong › Step 20 of 26

Who won?

What we are doing

When the game is over, the ball disappears and the winner is announced in the middle.

```js
if (state === 'playing') ctx.fillRect(ball.x, ball.y, BALL, BALL)

if (state === 'over') {
  const winner = left.score >= WIN_SCORE ? 'Left' : 'Right'
  ctx.font = 'bold 32px sans-serif'
  ctx.fillText(winner + ' player wins!', canvas.width / 2, canvas.height / 2)
  ctx.font = '16px sans-serif'
  ctx.fillText('Press Space to play again', canvas.width / 2, canvas.height / 2 + 32)
}
```

What it means

• The ball is drawn only while playing.
• The winner is whoever reached WIN_SCORE; the text is centered (the alignment was set for the scores).

Your turn

1. Put if (state === 'playing') in front of the ball's fillRect.
2. At the end of draw, under the scores, write the if (state === 'over') block.

Skills: Drawing on a canvas

← First to five Play again →

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