Atölye › Candy Crush Tarzı Üçlü Eşleştirme › 2/29. adım

Damalı ızgara

Ne yapıyoruz

Şimdi 64 hücrenin her birini bir kare olarak çiziyoruz; satranç tahtası gibi, iki tonlu dama deseniyle.

64 kareyi tek tek yazmak yerine iç içe iki döngü: dıştaki satırları (r), içteki o satırın sütunlarını (c) gezer. Bir kitabı satır satır, her satırı soldan sağa okumak gibi.

```js
for (let r = 0; r < N; r++) {
  for (let c = 0; c < N; c++) {
    const x = LEFT + c * SIZE
    const y = TOP + r * SIZE
    ctx.fillStyle = (r + c) % 2 === 0 ? '#312e81' : '#3730a3'
    ctx.fillRect(x, y, SIZE, SIZE)
  }
}
```

Ne işe yarıyor

for (let r = 0; r < N; r++) { → sayan döngü: r 0'dan başlar, N'den (8) küçük olduğu sürece içi çalışır, her turdan sonra r++ ile 1 artar. İçindeki c döngüsü her satır için 0'dan 7'ye sayar: toplam 64 tur.
const x = LEFT + c * SIZE → c. sütunun sol kenarı; const y = TOP + r * SIZE → r. satırın üst kenarı.
(r + c) % 2 === 0 → % bölümden kalan: (r + c) % 2 satır + sütun çiftse 0, tekse 1. Komşu hücrelerde hep değişir: dama deseni.
koşul ? a : b → koşul doğruysa a, değilse b. Çiftse koyu, tekse biraz açık mor.
ctx.fillRect(x, y, SIZE, SIZE) → 48 × 48'lik kare.

Sıra sende

Dosyanın en sonuna, bir boş satırdan sonra iki döngüyü yaz.
Çalıştır: ortada damalı, 8 × 8'lik bir ızgara görmelisin.

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

← Tahtanın yeri Oyun döngüsü →

Damalı ızgara

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar