Workshop › Pinball › Step 17 of 42

The ball meets a bumper

What we are doing

A ball touches a bumper when the distance between their centres is less than the two radii together. Then we push it out along the line from the bumper's centre, like with the walls.

```js
function hitBumper(b) {
  const dx = ball.x - b.x
  const dy = ball.y - b.y
  const d = Math.hypot(dx, dy)
  if (d >= b.r + R) return
  const nx = dx / d
  const ny = dy / d
  ball.x = b.x + nx * (b.r + R)
  ball.y = b.y + ny * (b.r + R)
}

  BUMPERS.forEach(hitBumper)
```

What it means

dx, dy go from the bumper's centre to the ball's; d is the distance.
If d is at least b.r + R they do not touch.
Otherwise (nx, ny) is that direction made one pixel long, and the ball is put exactly b.r + R away from the centre.
BUMPERS.forEach(hitBumper) in step checks every bumper in every small step.

Your turn

Write hitBumper above function step() {, with an empty line after it.
In step, under the walls line, write BUMPERS.forEach(hitBumper).

Skills: Collision detection

← Three bumpers A bumper kicks →

All steps