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

Çizen bir fonksiyon

Ne yapıyoruz

Dünyamız saniyede birçok kez değişecek ve her seferinde bütün resim yeniden çizilecek. Bütün çizim satırlarını her seferinde tekrar yazamayız. Bu yüzden onları bir fonksiyonun içine koyup ona draw (çiz) adını veriyoruz.

Fonksiyon bir yemek tarifi gibidir: tarifi bir kez yazarsın, istediğin kadar pişirirsin. Ekran yine aynı görünecek.

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

  ctx.fillStyle = '#4ade80'
  ctx.fillRect(3 * CELL, TOP + 2 * CELL, CELL - 1, CELL - 1)
}

draw()
```

Ne işe yarıyor

function draw() { → fonksiyon tanımlar: "draw deyince şunları yap". Bu satır tek başına bir şey çizmez, sadece tarifi yazar.
{ ile } arasındaki satırlar fonksiyonun gövdesi. Okunaklı olsun diye iki boşluk içeriden yazılır.
Gövde önce arka planı boyar: bu, eski resmi siler. Sonra ızgarayı ve hücreyi çizer.
draw() → fonksiyonu çağırır: tarifi şimdi uygula. Sondaki () "çalıştır" demektir.

Sıra sende

İlk çizim satırının (ctx.fillStyle = '#0f172a') üstüne function draw() { yaz.
Altındaki bütün çizim satırlarını iki boşluk içeri al (satır başında Tab da olur).
En sona kapanan } yaz.
Bir boş satırdan sonra draw() yaz. Çalıştır: ekran aynı görünmeli.

Beceriler: Fonksiyonlar

← Tek bir canlı hücre Hafızadaki dünya →

Çizen bir fonksiyon

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar