Workshop › Space Invaders-style › Step 10 of 21

Hit!

What we are doing

A bullet that overlaps a living invader destroys it and is used up. overlaps is the classic check for two boxes.

```js
function overlaps(a, b) {
  return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y
}

  for (const bullet of bullets) {
    const hit = invaders.find((invader) => invader.alive && overlaps(bullet, invader))
    if (hit) {
      hit.alive = false
      bullet.y = -100 // used up; removed below
    }
  }
```

What it means

Two boxes overlap when each starts before the other ends, both sideways and up/down.
find gives the first living invader the bullet touches.
The hit invader is marked dead; the bullet is moved off the screen, so the filter below drops it.

Your turn

Above alive, write overlaps.
In update, between moving and filtering the bullets, write the hits loop.

Skills: Collision detection

← The march Score →

All steps