Atölye › Satranç › 3/48. adım

64 karenin hepsi

Ne yapıyoruz

Bir sırayı çizebiliyoruz; şimdi 8 sırayı. Sıra döngüsünü, sıraları sayan ikinci bir döngünün içine koyacağız: dıştaki döngü sırayı (r, row), içteki sütunu (c) sayar. 8 × 8 = 64 tur.

Renk için tek başına c artık yetmez: her sıra bir öncekinin tersi renkle başlamalı. Bunun için satır ve sütunu toplayacağız.

```js
  for (let r = 0; r < 8; r++) {
    for (let c = 0; c < 8; c++) {
      const x = LEFT + c * SQ
      const y = TOP + r * SQ
      ctx.fillStyle = (r + c) % 2 === 0 ? '#e7d8b8' : '#b58863'
      ctx.fillRect(x, y, SQ, SQ)
    }
  }
```

Ne işe yarıyor

for (let r = 0; r < 8; r++) { → dış döngü: sıra numarası r, 0'dan 7'ye. Her sıra için içteki döngünün tamamı (8 tur) çalışır. Buna iç içe döngü denir.
const y = TOP + r * SQ → r bir artınca kare 56 piksel aşağı iner.
(r + c) % 2 → satır ve sütunun toplamı çiftse açık, tekse koyu. Sağa ya da aşağı bir kare gidince toplam 1 değişir; bu yüzden yan yana iki kare hiç aynı renk olmaz. Sol üst köşe (0 + 0 = 0) açık kalır.
İçteki satırlar iki boşluk daha içeri kaydı; okunaklı olsun diye.

Sıra sende

for (let c = 0; ...) satırının üstüne for (let r = 0; r < 8; r++) { yaz.
Eski döngünün satırlarını iki boşluk içeri al ve altına kapanan } ekle.
const y = TOP satırını const y = TOP + r * SQ yap; renk satırında c % 2 yerine (r + c) % 2 yaz.
Çalıştır: dama gibi 8 × 8 bir tahta görmelisin, sol üst köşesi açık renk.

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

← Bir sıra kare Metin olarak başlangıç dizilişi →

64 karenin hepsi

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar