Atölye › Tuğla Kırma › 15/39. adım

Tuğlaları çiz

Ne yapıyoruz

Şimdi tuğlaları görelim. Oyun başlarken buildBricks()'i çağıracağız, draw içinde de listedeki her tuğlayı çizeceğiz. Ama yalnız ayakta olanları: kırılmış (alive: false) tuğlalar atlanacak.

Bu sefer başka bir döngü kullanıyoruz: for ... of. Sayaç tutmadan "listedeki her eleman için" der.

```js
  for (const brick of bricks) {
    if (!brick.alive) continue
    ctx.fillStyle = '#ef4444'
    ctx.fillRect(brick.x, brick.y, BRICK_W, BRICK_H)
  }

buildBricks()
```

Ne işe yarıyor

for (const brick of bricks) { → "bricks listesindeki her eleman için, sırayla, ona brick de ve içini çalıştır". 8 tuğla = 8 tur.
if (!brick.alive) continue → ! "değil" demek: !brick.alive = "ayakta değilse". continue → "bu elemanı bırak, sıradakine geç". Kırılmış tuğla çizilmez.
ctx.fillStyle = '#ef4444' → kırmızı. ctx.fillRect(brick.x, brick.y, BRICK_W, BRICK_H) → tuğlayı kendi yerine çizer.
Tuğlalar arka plandan hemen sonra çiziliyor; raket ve top daha sonra çizildiği için onların üstünde kalır.
buildBricks() → sırayı oyun başında bir kez kurar.

Sıra sende

draw içinde arka planı boyayan ctx.fillRect(0, 0, canvas.width, canvas.height) satırının altına bir boş satır bırak ve for döngüsünü yaz.
En alttaki resetBall() satırının üstüne buildBricks() yaz.
Çalıştır: üstte ortalanmış 8 kırmızı tuğla görmelisin.

Beceriler: Döngüler, Canvas üzerine çizim

← Bir sıra tuğla Koca bir duvar: döngü içinde döngü →

Tuğlaları çiz

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar