Workshop › Pong › Step 15 of 26

The paddles hit back

What we are doing

A ball moving left that touches the left paddle turns around, and is placed just outside the paddle so it does not touch it again next frame. The same on the right.

```js
if (ball.vx < 0 && touches(left)) {
  ball.vx = -ball.vx
  ball.x = left.x + PADDLE_W
}
if (ball.vx > 0 && touches(right)) {
  ball.vx = -ball.vx
  ball.x = right.x - BALL
}
```

What it means

• ball.vx < 0 means moving left; together with touches(left), the left paddle hits it.
• ball.vx = -ball.vx turns it around.
• left.x + PADDLE_W is the left paddle's right edge: the ball is put right next to it. For the right paddle, just before its left edge.

Your turn

At the end of update, under the wall bounce block, write the two paddle blocks.

Skills: Collision detection, Velocity and gravity

← Does the ball touch a paddle? Serve 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