Atölye › Tetris Tarzı Bloklar › 4/32. adım

Bütün tahtayı çiz

Ne yapıyoruz

Şimdi deneme çağrısının yerine asıl işi yapıyoruz: draw() kuyuyu boyayacak, sonra board'daki her dolu hücreyi çizecek.

200 hücreye tek tek bakmak için iç içe iki döngü kullanıyoruz: dıştaki satırları, içteki o satırdaki sütunları gezer. Bir kitabı satır satır, her satırı soldan sağa okumak gibi. Tahta şu an boş olduğu için yalnız kuyu görünecek.

```js
function draw() {
  ctx.fillStyle = '#0f172a'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = '#1e293b'
  ctx.fillRect(0, 0, COLS * CELL, ROWS * CELL)

  for (let row = 0; row < ROWS; row++) {
    for (let col = 0; col < COLS; col++) {
      if (board[row][col]) drawCell(col, row, '#94a3b8')
    }
  }
}

draw()
```

Ne işe yarıyor

function draw() { → arka planı ve kuyuyu boyayan dört satır artık bu fonksiyonun içinde.
for (let row = 0; row < ROWS; row++) { → sayan döngü: row 0'dan başlar, 20'den küçük olduğu sürece içi çalışır, her turun sonunda row++ ile 1 artar.
İçindeki for (let col = 0; ...) → aynı satırın 10 sütununu gezer. İkisi birlikte 20 × 10 = 200 hücreye bakar.
if (board[row][col]) drawCell(col, row, '#94a3b8') → hücre 0 değilse (doluysa) çiz. if içinde 0 "yok", başka her sayı "var" sayılır.
draw() → fonksiyonu çağırır. Deneme çağrısının yerini alıyor.

Sıra sende

Dört boyama satırının üstüne function draw() { yaz ve dört satırı iki boşluk içeri al.
Altlarına bir boş satır bırakıp iki döngüyü yaz; en sona draw'ı kapatan } gelsin.
En alttaki drawCell(0, 19, '#94a3b8') satırını sil; yerine draw() yaz.
Çalıştır: yalnız kuyu görünmeli (tahta boş).

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

← Bir hücre çiz Sayı renktir →

Bütün tahtayı çiz

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar