Atölye › Bomberman Tarzı Arena › 2/42. adım

Karelerden bir zemin

Ne yapıyoruz

Arenayı karelere bölüp her kareyi tek tek boyayacağız. 11 × 13 = 143 kare var; hepsini elle yazamayız. İç içe iki döngü bunu yapar: her satır için, o satırdaki her sütun. Bir kitabı satır satır, her satırı harf harf okumak gibi.

Şimdilik her kare yeşil zemin olacak.

```js
for (let r = 0; r < ROWS; r++) {
  for (let c = 0; c < COLS; c++) {
    const x = c * TILE
    const y = TOP + r * TILE
    ctx.fillStyle = '#3f6212'
    ctx.fillRect(x, y, TILE, TILE)
  }
}
```

Ne işe yarıyor

for (let r = 0; r < ROWS; r++) { → sayma döngüsü: r 0'dan başlar, ROWS'tan (11) küçük olduğu sürece devam eder, her turda 1 artar (r++). Yani r = 0, 1, ... 10: satır numarası.
İçindeki for (let c = 0; c < COLS; c++) { → her satır için c = 0, 1, ... 12: sütun numarası. İç döngü her satırda baştan başlar.
const x = c * TILE → karenin soldan uzaklığı (piksel): 3. sütun 96'dan başlar.
const y = TOP + r * TILE → yukarıdan uzaklığı: üstteki şerit kadar aşağıdan başlar.
ctx.fillRect(x, y, TILE, TILE) → 32 × 32'lik kare.
Sayma 0'dan başlar: ilk satır 0. satır, ilk sütun 0. sütun.

Sıra sende

Kodun en altına, bir boş satır bırakıp iki döngüyü yaz.
Çalıştır: üstte koyu bir şerit, altında yeşil bir alan görmelisin.

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

← Arenayı ölç Her karede çiz →

Karelerden bir zemin

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar