Atölye › Ritim Şeritleri › 5/35. adım

Çizen bir fonksiyon

Ne yapıyoruz

Notalar hareket edecek, yani resim saniyede birçok kez yeniden çizilecek. Bütün çizim satırlarını her seferinde tekrar yazamayız. 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)
  for (let lane = 0; lane < LANES; lane++) {
    const x = LEFT + lane * LANE_W
    ctx.fillStyle = '#1e293b'
    ctx.fillRect(x + 2, 0, LANE_W - 4, canvas.height)
    ctx.fillStyle = COLORS[lane]
    ctx.fillRect(x + 6, HIT_Y - 4, LANE_W - 12, 8)
  }
}

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; iki boşluk daha içeriden yazılır. Döngü aynen kalır, sadece iki boşluk içeri kayar.
Gövde önce arka planı boyar: bu, eski resmi siler.
draw() → fonksiyonu çağırır: tarifi şimdi uygula. Sondaki () "çalıştır" demektir.

Sıra sende

ctx.fillStyle = '#0f172a' satırının üstüne function draw() { yaz.
Altındaki bütün satırları (arka plan ve döngü) iki boşluk içeri al.
En sona kapanan } yaz; bir boş satırdan sonra draw() yaz.
Çalıştır: ekran aynı görünmeli.

Beceriler: Fonksiyonlar

← Vuruş çizgisi Yazı olarak şarkı →

Çizen bir fonksiyon

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar