Atölye › Flappy tarzı kuş › 4/30. adım

Çizen bir fonksiyon

Ne yapıyoruz

Bir oyun, ekranı saniyede onlarca kez yeniden çizer. Her seferinde bu satırları tekrar yazamayız. Bu yüzden çizim satırlarını bir fonksiyonun içine koyup ona draw (çiz) adını veriyoruz. 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 = '#70c5ce'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  ctx.fillStyle = 'gold'
  ctx.beginPath()
  ctx.arc(bird.x, bird.y, bird.r, 0, Math.PI * 2)
  ctx.fill()
}

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ı gökyüzünü boyar: bu, eski resmi siler. Kuş 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

1. Gökyüzünü boyayan ctx.fillStyle = '#70c5ce' satırının üstüne function draw() { yaz.
2. Altındaki bütün çizim satırlarını iki boşluk içeri al (satırları seçip Tab'a basmak da olur).
3. En alta kapanan } yaz.
4. Bir boş satırdan sonra draw() yaz. Çalıştır: ekran aynı görünmeli.

Beceriler: Fonksiyonlar

← Kuşu çiz Hareket ettiren bir fonksiyon →

Tüm adımlar

1. Canvas'ı ve kalemi al
2. Gökyüzünü boya
3. Kuşu çiz
4. Çizen bir fonksiyon
5. Hareket ettiren bir fonksiyon
6. Oyun döngüsü
7. Yerçekimi
8. Kanat çırpış
9. Boşluk, yukarı ok ya da dokunuş
10. İlk çırpışı bekle
11. Yer ve gök
12. Oyuncuya söyle
13. Veri olarak boru
14. Boruları çiz
15. Kuş değil dünya kayar
16. Rastgele yükseklikte yeni boru
17. Her 90 karede bir boru
18. Geçilen boruları sil
19. Kuş borunun hizasında mı?
20. Açıklıktan geç
21. Her boruyu bir kez say
22. Skoru göster
23. Temiz başlangıç fonksiyonu
24. Tekrar dene
25. Oyunun bittiği tek yer
26. Rekoru hatırla
27. Rekoru göster
28. Her ekranda aynı hız
29. Aradan sonra telafi yok
30. Kendin yap: madalya