Atölye › Space Invaders Tarzı › 8/21. adım
Beş sıra, her sırada dokuz istilacı; her sıranın kendi rengi var. Her istilacı hangi sırada olduğunu ve hâlâ yaşayıp yaşamadığını hatırlıyor; yalnız yaşayanlar çiziliyor. İç içe iki döngüyle 45 istilacıyı kuruyoruz.
```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)
}
```SPACING_X = 44, SPACING_Y = 36 → istilacıların aralıkları (kendi boyları + boşluk).for (let row ...) içinde for (let col ...) → 5 × 9 = 45 tur.x: 40 + col * SPACING_X → soldan 40 pikselden başlayıp her sütunda 44 piksel sağa.row → row: row'un kısası: istilacı sırasını hatırlar (rengi ve ileride puanı için).alive: true → yaşıyor. Vurulunca false olacak; listeden silmek yerine işaretliyoruz.alive() → yaşayanları filter ile verir.ROW_COLORS[invader.row] → sırasına göre renk.COOLDOWN satırının altına istilacı sabitlerini ve ROW_COLORS'u yaz.let lastShot satırının altına invaders listesini ve onu dolduran iç içe döngüleri yaz.shoot fonksiyonunun üstüne alive fonksiyonunu yaz; draw'da arka plandan sonra istilacı döngüsünü yaz.Beceriler: Diziler ve nesneler, Döngüler