Workshop › Space Invaders-style › Step 12 of 21

They shoot back

What we are doing

Now the invaders drop bombs. On some march steps (35% of them) a random column fires. Only the lowest invader in that column may fire, so a bomb never passes through its friends.

```js
let bombs = []

// Only the lowest invader in a column can fire, so bombs never pass through other invaders.
function dropBomb() {
  const living = alive()
  const shooter = living[Math.floor(Math.random() * living.length)]
  const lowest = living.filter((invader) => invader.x === shooter.x).reduce((a, b) => (b.y > a.y ? b : a))
  bombs.push({ x: lowest.x + INVADER_W / 2 - 2, y: lowest.y + INVADER_H, w: 4, h: 10 })
}

    if (Math.random() < 0.35) dropBomb()

  ctx.fillStyle = '#fb923c'
  for (const bomb of bombs) ctx.fillRect(bomb.x, bomb.y, bomb.w, bomb.h)
```

What it means

A random living invader picks the column; the ones with the same x are that column.
reduce walks the column keeping the one with the biggest y (the lowest on screen).
The bomb starts under that invader, centered.

Your turn

Above dir, write let bombs = [].
Under march, write dropBomb; after march() in update, maybe drop a bomb.
In draw, draw the bombs right under the bullets.

Skills: Arrays and objects, Game states

← Score Bombs fall →

All steps