Atölye › Sonsuz Koşucu › 3/19. adım

Tekrar tekrar çiz

Ne yapıyoruz

Oyun ekranı saniyede ~60 kez yeniden çizer; bir şey hareket edince yeni hâli hemen görünür. Çizim satırlarını draw (çiz) fonksiyonuna alıyoruz; loop (döngü) onu çağırıp tarayıcıdan "bir sonraki ekran yenilemesinde beni yine çağır" diye ister.

```js
function draw() {
  ctx.fillStyle = '#f8fafc'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  ctx.fillStyle = '#475569'
  ctx.fillRect(0, GROUND, canvas.width, 2)

  ctx.fillStyle = '#334155'
  ctx.fillRect(runner.x, runner.y, runner.w, runner.h)
}

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

requestAnimationFrame(loop)
```

Ne işe yarıyor

• function draw() { ... } → bütün resmi çizen tarif. Önce arka plan: eski resmi siler.
• function loop() { ... } → döngünün bir turu: çiz, sonra requestAnimationFrame(loop) ile bir sonraki turu iste. Kendini yeniden istediği için döngü hiç durmaz.
• En alttaki requestAnimationFrame(loop) → döngüyü başlatır.

Sıra sende

1. Altı çizim satırının üstüne function draw() { yaz, satırları iki boşluk içeri al, altlarına } yaz.
2. Bir boş satırdan sonra loop fonksiyonunu ve en alta requestAnimationFrame(loop) satırını yaz.
3. Çalıştır: ekran aynı görünür ama artık saniyede 60 kez çiziliyor.

Beceriler: Oyun döngüsü, Fonksiyonlar

← Koşucu Yer çekimi →

Tüm adımlar

1. Zemin
2. Koşucu
3. Tekrar tekrar çiz
4. Yer çekimi
5. Zıpla
6. Kısa sıçrama
7. Dokunarak zıpla
8. Üstüne gelen engeller
9. Kaktüsler gelmeye devam ediyor
10. Başlangıcı bekle
11. Çarpışma
12. Yeniden dene
13. Giderek hızlan
14. En iyi koşuyu hatırla
15. Skor sayacı
16. Kuşlar
17. Hangi tuşlar basılı?
18. Eğil
19. Kendin yap: zıplama tamponu