Workshop › Pong › Step 24 of 26

A computer opponent

What we are doing

Playing alone? The computer takes the right paddle: when the ball comes toward it, it moves to meet it, but a bit slower than you, so it can be beaten.

```js
const AI_SPEED = 4 // slower than the player, so the computer can be beaten
let twoPlayers = false

  if (twoPlayers) {
    if (keys.ArrowUp) right.y -= PADDLE_SPEED
    if (keys.ArrowDown) right.y += PADDLE_SPEED
  } else if (ball.vx > 0) {
    const target = ball.y + BALL / 2 - PADDLE_H / 2
    right.y += clamp(target - right.y, -AI_SPEED, AI_SPEED)
  }
```

What it means

• With two players the arrow keys move the right paddle as before; otherwise the computer does, only while the ball comes toward it (vx > 0).
• target is where the paddle's top should be so its middle meets the ball.
• clamp(..., -AI_SPEED, AI_SPEED) limits each move to 4 pixels, slower than your 6.

Your turn

1. Under PADDLE_SPEED, write AI_SPEED; under let state, write let twoPlayers = false.
2. In update, replace the two arrow-key lines with the if (twoPlayers) ... else if ... block.

Skills: Game states

← Faster every hit One player or two →

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