Atölye › Renk Hafızası (Simon) › 8/27. adım

Durmadan çiz

Ne yapıyoruz

Şu an tahta bir kez çiziliyor. Tuş yanıp sönebilsin diye tahtanın sürekli yeniden çizilmesi lazım: çizgi film kareleri gibi. 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. Ekran aynı görünecek, ama artık lit her değiştiğinde ekran da hemen değişecek.

```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ü

← Bir tuşu yak Hatırlanacak dizi →

Tüm adımlar

1. Canvas'ı ve kalemi al
2. Koyu bir tahta
3. İlk tuş
4. Her tuşa iki renk
5. Dört tuşun hepsi
6. Çizen bir fonksiyon
7. Bir tuşu yak
8. Durmadan çiz
9. Hatırlanacak dizi
10. Turu göster
11. Bir tuşu bir süre yak
12. Yeniden sön
13. Bilgisayar bir tuş gösterir
14. Bütün diziyi göster
15. İzle, sonra sıra sende
16. Her basışı kontrol et
17. Klavyeyle oyna
18. Bir noktada hangi tuş var?
19. Fareyle oyna
20. İlerleme ve hata
21. Yeni oyun fonksiyonu
22. Yeniden denemek için tıkla
23. Basınca yan
24. Gittikçe hızlan
25. Rekoru kaydet
26. Rekoru göster
27. Kendin yap: oyalanmak yok