Atölye › Conway'in Hayat Oyunu › 2/32. adım

Izgarayı ölç

Ne yapıyoruz

Dünyamız küçük karelerden oluşan bir ızgara: her hücre 8 piksel, yan yana 60 sütun, alt alta 48 satır. Üstte yazılar için 36 piksellik bir şerit bırakacağız.

Bu sayıları kodun her yerine tek tek yazmak yerine bir kez ad veriyoruz. Sonra ızgaranın kapladığı alanı biraz daha açık bir renkle boyuyoruz; hücreler bu alanda yaşayacak.

```js
const CELL = 8
const COLS = 60
const ROWS = 48
const TOP = 36

ctx.fillStyle = '#1e293b'
ctx.fillRect(0, TOP, COLS * CELL, ROWS * CELL)
```

Ne işe yarıyor

const CELL = 8 → bir hücrenin boyu: 8 piksel.
const COLS = 60 → sütun sayısı (columns). const ROWS = 48 → satır sayısı (rows).
const TOP = 36 → ızgaranın üstündeki boşluk. Oraya nesil sayısını yazacağız.
Adlar büyük harfle yazıldı: bu, "oyun boyunca hiç değişmeyen ayar" demenin alışılmış yolu.
ctx.fillStyle = '#1e293b' → biraz daha açık bir lacivert.
ctx.fillRect(0, TOP, COLS * CELL, ROWS * CELL) → ızgara alanı: sol kenardan (0), üstten TOP kadar aşağıdan başlar. * çarpma demek: genişlik 60 × 8 = 480, yükseklik 48 × 8 = 384 piksel.
Bu satırlar arka planın altına yazılır: canvas'ta sonra çizilen, öncekinin üstüne gelir.

Sıra sende

const ctx = ... satırının altında bir boş satır bırak ve dört sabiti (CELL, COLS, ROWS, TOP) yaz.
Dosyanın en sonuna, arka planı boyayan iki satırın hemen altına #1e293b ile başlayan iki satırı yaz.
Çalıştır: üstte ince koyu bir şerit, altında biraz daha açık renkli büyük bir alan görmelisin.

Beceriler: Canvas üzerine çizim

← Oyun tahtası Tek bir canlı hücre →

Izgarayı ölç

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar