Workshop › Pong › Step 5 of 26

Two paddles

What we are doing

Each paddle is a 10×80 rectangle. We keep each paddle's position in an object (left, right), 20 pixels in from its side, and draw both from those objects.

```js
const PADDLE_W = 10
const PADDLE_H = 80

let left = { x: 20, y: 160 }
let right = { x: canvas.width - 20 - PADDLE_W, y: 160 }

ctx.fillRect(left.x, left.y, PADDLE_W, PADDLE_H)
ctx.fillRect(right.x, right.y, PADDLE_W, PADDLE_H)
```

What it means

• PADDLE_W and PADDLE_H are the paddle's width and height.
• { x: 20, y: 160 } is an object: two named values in one package. left.x reads the x inside left.
• The right paddle's x is 600 - 20 - 10 = 570, so it is 20 pixels from the right edge.
• y: 160 centers an 80 pixel paddle on a 400 pixel court.
• The pen is still white from the net, so no new color.

Your turn

1. Under const ctx = ..., leave an empty line and write the two sizes, then after an empty line the two paddles.
2. At the very end, leave an empty line and write the two fillRect lines. Press Run.

Skills: Drawing on a canvas, Game states

← The whole net A function that draws →

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