Workshop › Breakout › Step 9 of 39

Bounce off the side walls

What we are doing

When the ball's left or right edge passes a wall, we flip its horizontal velocity and put it back inside.

```js
if (ball.x - BALL_R < 0 || ball.x + BALL_R > canvas.width) {
  ball.vx = -ball.vx
  ball.x = clamp(ball.x, BALL_R, canvas.width - BALL_R)
}
```

|| means "or": the if runs when either edge is past a wall.
ball.vx = -ball.vx flips the direction: 3 becomes -3.
clamp puts the ball back inside the walls, so it cannot get stuck and flip again on the next frame.

In update, leave an empty line under ball.y += ball.vy and write the if.

Skills: Collision detection, Velocity and gravity