Workshop › Pong › Step 11 of 26

The ball

What we are doing

In the original Pong the ball is a small square. We keep its position in an object ball, in the middle of the court, and draw it as a white 10×10 square.

```js
const BALL = 10 // the ball is a BALL×BALL square

let ball = { x: 295, y: 195 }

  ctx.fillRect(ball.x, ball.y, BALL, BALL)
```

What it means

• BALL is the ball's size.
• (295, 195) is its top-left corner: 300 - 5 and 200 - 5, so its center is the middle of the court.
• The ball is drawn right after the paddles, in draw.

Your turn

1. Under PADDLE_SPEED, write BALL.
2. Under the right line, write ball.
3. In draw, under the right paddle's fillRect, write the ball's fillRect.

Skills: Drawing on a canvas, Game states

← Stay on the court The ball moves →

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