Workshop › Pong › Step 16 of 26

Serve again

What we are doing

When the ball gets past a paddle it is gone for good. Now a serve function puts a new ball in the middle and sends it toward the player who missed.

```js
let ball

function serve(direction) {
  ball = {
    x: canvas.width / 2 - BALL / 2,
    y: canvas.height / 2 - BALL / 2,
    vx: 4 * direction,
    vy: Math.random() < 0.5 ? -3 : 3,
  }
}

  if (ball.x + BALL < 0) serve(-1)
  else if (ball.x > canvas.width) serve(1)

serve(1)
```

What it means

• serve(direction) makes a new ball object in the middle. direction is 1 (to the right) or -1 (to the left).
• Math.random() < 0.5 ? -3 : 3 goes up or down, each half of the time.
• A ball fully past the left edge (ball.x + BALL < 0) means the left player missed: serve to the left (-1).
• serve(1) at the bottom makes the first ball.

Your turn

1. Change let ball = { ... } to just let ball.
2. Under clamp, write serve.
3. At the end of update, after an empty line, write the two out-of-bounds lines.
4. Call serve(1) right above requestAnimationFrame(loop) at the bottom.

Skills: Game states, Functions

← The paddles hit back Keep the score →

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