Atölye › Missile Command Tarzı Savunma › 17/35. adım

Patlamaları çiz

Ne yapıyoruz

Patlamaları görelim: her biri o anki yarıçapında, içi dolu bir daire. Canlı görünsün diye her üç karede bir sarı ile turuncu arasında titreyecek.

```js
for (const b of blasts) {
  ctx.fillStyle = b.age % 6 < 3 ? '#fde047' : '#fb923c'
  ctx.beginPath()
  ctx.arc(b.x, b.y, radius(b), 0, Math.PI * 2)
  ctx.fill()
}
```

Ne işe yarıyor

b.age % 6 → % bölümden kalan: yaş 6'ya bölününce kalan. 0, 1, 2, 3, 4, 5, 0, 1, 2... diye tekrar eder.
b.age % 6 < 3 ? '#fde047' : '#fb923c' → kalan 0–2 ise sarı, 3–5 ise turuncu: renk üç karede bir değişir.
ctx.beginPath() → yeni bir şekle başla.
ctx.arc(b.x, b.y, radius(b), 0, Math.PI * 2) → merkezi patlamanın yeri, yarıçapı radius(b) olan bir daire. Açılar radyanla: 0'dan Math.PI * 2'ye tam bir tur.
ctx.fill() → daireyi boya.

Sıra sende

draw içinde önleyici çizgilerini çizen döngünün kapanış }'inin hemen altına patlama döngüsünü yaz. Çalıştır ve gökyüzüne tıkla: tıkladığın yerde büyüyüp küçülen, titreyen bir patlama görmelisin.

Beceriler: Canvas üzerine çizim

← Varınca patla Yere düşen de patlar →

Tüm adımlar