Workshop › Pong › Step 14 of 26

Does the ball touch a paddle?

What we are doing

Two rectangles overlap when they overlap horizontally and vertically. touches(paddle) checks the four edges and answers true or false.

```js
function touches(paddle) {
  return (
    ball.x < paddle.x + PADDLE_W &&
    ball.x + BALL > paddle.x &&
    ball.y < paddle.y + PADDLE_H &&
    ball.y + BALL > paddle.y
  )
}
```

What it means

• Line 1: the ball's left edge is before the paddle's right edge. Line 2: the ball's right edge is past the paddle's left edge. Together: they overlap horizontally.
• Lines 3 and 4 do the same vertically. && means "and": all four must be true.
• The parentheses let one return span several lines.

Your turn

Under clamp, leave an empty line and write touches. Press Run.

Skills: Collision detection

← Bounce off the top and bottom The paddles hit back →

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