Atölye › Hafıza Kartları › 10/25. adım

Durmadan çiz

Ne yapıyoruz

Kartlar açılıp kapanacak. Her değişiklikten sonra draw() demeyi hatırlamak yerine tahtayı sürekli yeniden çizeceğiz: saniyede yaklaşık 60 kez. Çizgi film kareleri gibi.

requestAnimationFrame tarayıcıya "ekranı bir sonraki yenilemeden önce bu fonksiyonu çalıştır" der. Döngü kendini her seferinde yeniden istediği için hiç durmaz. Böylece bir kartın bilgisi değişince ekran kendiliğinden değişir.

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

newGame()
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 newGame() satırının üstüne loop fonksiyonunu ve bir boş satır yaz.
2. En alttaki draw() satırını sil; yerine requestAnimationFrame(loop) 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ü

← Kartları listeden çiz Kartın ön yüzü →

Tüm adımlar

1. Canvas'ı ve kalemi al
2. Masa
3. Bir kart
4. Bir sıra kart
5. Dört sıra
6. Her meyveden iki tane
7. Kendini bilen kartlar
8. Kartın köşesi
9. Kartları listeden çiz
10. Durmadan çiz
11. Kartın ön yüzü
12. Adil bir karıştırma
13. Bir noktada hangi kart var?
14. Tıkla, kartı çevir
15. Kurallar için tek yer
16. Aynı anda iki kart
17. Eş mi değil mi
18. Hamleleri say
19. Hamleleri ve eşleri göster
20. Bütün eşler bulundu
21. Tekrar oyna
22. Peşinden giden bir sayı
23. Yarı yolda yüz değiştir
24. Dönüşü canlandır
25. Kendin yap: en iyi oyunun