Atölye › 15 Bulmacası › 10/27. adım

Tekrar tekrar çiz

Ne yapıyoruz

Taşlar hareket edecek, hatta ileride kayarak gidecek. Bunun için resmi sürekli yeniden çizen bir oyun döngüsü kuruyoruz.

Tarayıcı ekranı saniyede yaklaşık 60 kez yeniler. requestAnimationFrame ona "bir sonraki yenilemeden önce bu fonksiyonu çalıştır" der. Fonksiyon kendini her seferinde yeniden istediği için döngü hiç durmaz.

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

reset()
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".
• 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 reset() satırının üstüne loop fonksiyonunu yaz; arada bir boş satır kalsın.
2. En alttaki draw() satırını sil, yerine requestAnimationFrame(loop) yaz.
3. Çalıştır. Ekran aynı görünür.

Beceriler: Oyun döngüsü

← Bütün taşlar N'den çözülmüş tahta →

Tüm adımlar

1. Tek listede bir tahta
2. Tuval ve kalem
3. Masayı boya
4. Çizen bir fonksiyon
5. Satır ve sütun
6. Her kare nerede
7. Bir taş çiz
8. Taşın üstündeki sayı
9. Bütün taşlar
10. Tekrar tekrar çiz
11. N'den çözülmüş tahta
12. Komşular
13. Taş kaydır
14. Taşa tıkla
15. Ok tuşları
16. Hamleleri say
17. Gerçek kaydırmalarla karıştır
18. Hangi tahtalar çözülür?
19. Çözüldü mü?
20. Kaymayı hatırla
21. Kareleri say
22. Akıcı kayma
23. Çözüldü!
24. Kazandığını göster
25. Yeniden oyna
26. Kırılacak bir rekor
27. Kendin yap: bir süre sayacı