Workshop › Pong › Step 9 of 26

Move the paddles

What we are doing

Every game has two jobs: update (change the state) and draw (show it). update moves each paddle 6 pixels per frame while its keys are held: W/S for the left paddle, the arrows for the right one.

```js
const PADDLE_SPEED = 6

function update() {
  if (keys.w) left.y -= PADDLE_SPEED
  if (keys.s) left.y += PADDLE_SPEED
  if (keys.ArrowUp) right.y -= PADDLE_SPEED
  if (keys.ArrowDown) right.y += PADDLE_SPEED
}

function loop() {
  update()
  draw()
```

What it means

• Each if checks one held key; -= moves up (y gets smaller), += moves down.
• loop calls update() before draw(), so each frame first changes the state, then shows it.

Your turn

1. Under PADDLE_H, write PADDLE_SPEED.
2. Above function draw, write update and an empty line.
3. In loop, write update() above draw().

Skills: Keyboard and mouse input, Game states

← Remember held keys Stay on the court →

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