Atölye › 2048 › 2/26. adım

On altı hücre

Ne yapıyoruz

Tahtanın üstüne 16 boş hücre çizeceğiz. Önce bir soruyu cevaplayan iki küçük fonksiyon: "şu sütun / şu satır ekranda hangi piksele düşer?" Sonra iki iç içe döngüyle bütün hücreleri geziyoruz: satır satır, her satırda soldan sağa.

```js
function cellX(col) {
  return GAP + col * (CELL + GAP)
}

function cellY(row) {
  return TOP + GAP + row * (CELL + GAP)
}

  for (let row = 0; row < SIZE; row++) {
    for (let col = 0; col < SIZE; col++) {
      ctx.fillStyle = '#cdc1b4'
      ctx.fillRect(cellX(col), cellY(row), CELL, CELL)
    }
  }
```

Ne işe yarıyor

cellX(col) → soldan önce bir GAP, sonra her sütun için bir hücre ve bir boşluk (CELL + GAP = 97):
1. sütun 12, 1. sütun 109, 3. sütun 303. return sonucu geri verir.
cellY(row) → aynısı aşağı doğru; ama tahta TOP'tan başladığı için onu da ekler: 0. satır 72.
Dıştaki for 4 satırı, içteki for her satırın 4 sütununu gezer: 4 × 4 = 16 tur.
Her turda açık kahverengi ('#cdc1b4') bir kare, CELL × CELL boyunda.

Sıra sende

function draw() { satırının üstüne cellX ve cellY fonksiyonlarını yaz; aralarında ve altlarında birer boş satır kalsın.
draw içinde tahtayı boyayan ctx.fillRect(0, TOP, ...) satırının altında bir boş satır bırak ve iki döngüyü yaz.
Çalıştır: tahtada 4×4 boş hücre görmelisin.

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

← Tahta Sayılardan bir ızgara →

On altı hücre

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar