Workshop › Space Invaders-style › Step 8 of 21

The invaders

What we are doing

Five rows of nine invaders, each row with its own color. Each invader remembers its row and whether it is still alive; only the living ones are drawn.

```js
const ROWS = 5
const COLS = 9
const INVADER_W = 28
const INVADER_H = 20
const SPACING_X = 44
const SPACING_Y = 36
const ROW_COLORS = ['#f472b6', '#a78bfa', '#a78bfa', '#34d399', '#34d399']

let invaders = []
for (let row = 0; row < ROWS; row++) {
  for (let col = 0; col < COLS; col++) {
    invaders.push({ x: 40 + col * SPACING_X, y: 60 + row * SPACING_Y, w: INVADER_W, h: INVADER_H, row, alive: true })
  }
}

function alive() {
  return invaders.filter((invader) => invader.alive)
}

  for (const invader of alive()) {
    ctx.fillStyle = ROW_COLORS[invader.row]
    ctx.fillRect(invader.x, invader.y, invader.w, invader.h)
  }
```

What it means

Each invader is placed SPACING_X apart sideways and SPACING_Y apart downward, starting at (40, 60).
row (short for row: row) remembers its row, used for its color and later its points.
alive() gives the invaders still alive.

Your turn

Under COOLDOWN, write the invader constants and ROW_COLORS.
Under lastShot, build invaders.
Above shoot, write alive; in draw, draw the living invaders after the background.

Skills: Arrays and objects, Loops

← A short reload The march →

All steps