Atölye › Pong › 7/26. adım

Oyun döngüsü

Ne yapıyoruz

Oyunlar bir döngü ile çalışır: çiz → tekrar → çiz... Çizgi filmin kareleri gibi, her turda resim biraz değişir ve hareket görünür. Her resme kare (frame) denir.

Tarayıcı ekranı saniyede yaklaşık 60 kez yeniler. requestAnimationFrame ona "bir sonraki yenilemeden önce bu fonksiyonu çalıştır" der. Döngü kendini her seferinde yeniden istediği için hiç durmaz. Şimdilik ekran aynı; birazdan raketleri ve topu oynatacağız.

```js
function loop() {
  draw()
  requestAnimationFrame(loop)
}

requestAnimationFrame(loop)
```

Ne işe yarıyor

• function loop() { → döngünün bir turu: çiz, sonra bir sonraki turu iste.
• requestAnimationFrame(loop) → "ekran bir sonraki yenilenmeden önce loop'u yine çalıştır".
• Dikkat: burada loop parantezsiz. loop() "şimdi çalıştır" olurdu; loop ise "bu tarifi al, sırası gelince sen çalıştır" demek.
• En alttaki requestAnimationFrame(loop) → döngüyü başlatır; eski tek seferlik draw() çağrısının yerini alır.

Sıra sende

1. En alttaki draw() satırını sil.
2. Yerine loop fonksiyonunu ve altına, bir boş satırdan sonra, requestAnimationFrame(loop) satırını yaz.
3. Çalıştır: ekran aynı görünür; kontroller döngünün döndüğüne bakacak.

Beceriler: Oyun döngüsü

← Çizen bir fonksiyon Basılı tuşları hatırla →

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