Atölye › Pong › 6/26. 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.

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

  ctx.fillStyle = 'white'
  for (let y = 0; y < canvas.height; y += 30) {
    ctx.fillRect(canvas.width / 2 - 2, y, 4, 15)
  }

  ctx.fillRect(left.x, left.y, PADDLE_W, PADDLE_H)
  ctx.fillRect(right.x, right.y, PADDLE_W, PADDLE_H)
}

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 dört boşluk içeride kalır.
• Gövdenin ilk iki satırı sahayı siyaha boyar: bu, eski resmi siler. Raket hareket edince eski yerinde iz kalmaz.
• draw() → fonksiyonu çağırır: tarifi şimdi uygula. Sondaki () "çalıştır" demektir.

Sıra sende

1. Siyah boyayan ctx.fillStyle = 'black' 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

← İki raket Oyun döngüsü →

Tüm adımlar

1. Canvas'ı ve kalemi al
2. Siyah saha
3. Filenin bir parçası
4. Bütün file
5. İki raket
6. Çizen bir fonksiyon
7. Oyun döngüsü
8. Basılı tuşları hatırla
9. Raketleri oynat
10. Sahada kal
11. Top
12. Top hareket eder
13. Üstten ve alttan sek
14. Top rakete değiyor mu?
15. Raketler geri vurur
16. Yeniden servis
17. Skoru tut
18. Skoru göster
19. Beşe ilk ulaşan
20. Kim kazandı?
21. Yeniden oyna
22. Raketle nişan al
23. Her vuruşta hızlan
24. Bilgisayar rakip
25. Tek ya da iki oyuncu
26. Kendin yap: servis beklemesi