Atölye › XOX › 7/33. adım

Çizen bir fonksiyon

Ne yapıyoruz

Her X ya da O konduğunda tahtanın baştan çizilmesi gerekecek. Ç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 = '#1e1e2e'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  ctx.fillStyle = '#585b70'
  for (let i = 1; i < 3; i++) {
    ctx.fillRect(i * CELL - 2, 0, 4, canvas.height)
    ctx.fillRect(0, i * CELL - 2, canvas.width, 4)
  }
}

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. İki boşluk içeriden yazılır; döngünün içi ise dört boşluk içeride kalır.
Gövdenin ilk iki satırı arka planı boyar: bu, eski resmi siler. Yeniden çizince eski çizimin izi kalmaz.
draw() → fonksiyonu çağırır: tarifi şimdi uygula. Sondaki () "çalıştır" demektir.

Sıra sende

Arka planı boyayan ctx.fillStyle = '#1e1e2e' satırının üstüne function draw() { yaz.
Ondan döngünün kapanan } işaretine kadar bütün satırları iki boşluk içeri al (satırları seçip Tab'a basmak da olur).
En alta kapanan } yaz.
Bir boş satırdan sonra draw() yaz. Çalıştır: ekran aynı görünmeli.

Beceriler: Fonksiyonlar

← Liste olarak tahta Bir X yaz →

Çizen bir fonksiyon

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar