Atölye › Yılan › 6/28. adım

Çizen bir fonksiyon

Ne yapıyoruz

Bir oyun, ekranı saniyede onlarca kez yeniden çizer. Her seferinde dört satırı tekrar yazamayız. Bu yüzden çizim satırlarını bir fonksiyonun içine koyup ona draw (çiz) adını vereceğiz. Sonra tek kelimeyle: draw(), bütün resmi yeniden çizeriz.

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 = '#111'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  ctx.fillStyle = 'lime'
  ctx.fillRect(head.x * CELL, head.y * CELL, CELL, CELL)
}

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övdenin ilk iki satırı arka planı boyar: bu, eski resmi siler. Kare hareket edince eski yerinde iz kalmamasının sebebi bu.
draw() → fonksiyonu çağırır: tarifi şimdi uygula. Sondaki () "çalıştır" demektir.

Sıra sende

Dört çizim satırının (arka plan + yeşil kare) üstüne function draw() { yaz.
Dört satırı iki boşluk içeri al (satır başında Tab da olur).
Altlarına kapanan } yaz.
Bir boş satırdan sonra draw() yaz. Çalıştır: ekran aynı görünmeli.

Beceriler: Fonksiyonlar

← Yeri bir değişkende tut Hareket ettiren bir fonksiyon →

Çizen bir fonksiyon

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar