Atölye › Kule Savunması › 2/42. adım

Karelerden bir harita

Ne yapıyoruz

Haritayı karelere bölüp her kareyi tek tek boyayacağız: 9 × 12 = 108 kare. İç içe iki döngü bunu yapar: her satır için, o satırdaki her sütun. Şimdilik hepsi yeşil çimen.

```js
for (let row = 0; row < ROWS; row++) {
  for (let col = 0; col < COLS; col++) {
    ctx.fillStyle = '#3f6212'
    ctx.fillRect(col * TILE, TOP + row * TILE, TILE, TILE)
  }
}
```

Ne işe yarıyor

for (let row = 0; row < ROWS; row++) { → sayma döngüsü: row 0'dan başlar, ROWS'tan (9) küçükken sürer, her turda 1 artar (row++). Satır numaraları: 0, 1, ... 8.
İçindeki for (let col = 0; col < COLS; col++) { → her satır için sütunlar: 0, 1, ... 11.
ctx.fillRect(col * TILE, TOP + row * TILE, TILE, TILE) → o karenin 40 × 40'lık dikdörtgeni. Soldan col * 40, yukarıdan üst şerit kadar aşağıdan başlayarak row * 40.

Sıra sende

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

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

← Haritayı ölç Her karede çiz →

Karelerden bir harita

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar