Atölye › Adam Asmaca › 9/36. adım

Tekrar tekrar çiz

Ne yapıyoruz

Şu an draw() sadece bir kez, en başta çalışıyor. Ama birazdan harf tahmin edeceğiz ve resim her tahmini göstermeli. En kolayı: resmi sürekli yeniden çizmek.

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. Buna oyun döngüsü denir.

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

newWord()
requestAnimationFrame(loop)
```

Ne işe yarıyor

• function loop() { → döngünün bir turu.
• draw() → o anki durumu çiz.
• requestAnimationFrame(loop) → "ekran bir sonraki yenilenmeden önce loop'u yine çalıştır". Fonksiyon kendi devamını istiyor; böylece döngü hiç bitmez.
• 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 newWord() 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; farkı bir sonraki adımda harf tahmin edince göreceksin.

Beceriler: Oyun döngüsü

← Tahminleri hatırla Bir tahmin →

Tüm adımlar

1. Gizli kelimelerin listesi
2. Tuval ve kalem
3. Kâğıdı boya
4. Çizen bir fonksiyon
5. Rastgele bir kelime seç
6. Kelimeyi yaz
7. Boşluklarla gizle
8. Tahminleri hatırla
9. Tekrar tekrar çiz
10. Bir tahmin
11. Klavyeyle tahmin et
12. Sadece harfler sayılır
13. Iskaları say
14. Aynı harf iki kez bedava
15. En fazla altı ıska
16. Iskaları göster
17. Yanlış harfleri listele
18. Çizgi çiz
19. Darağacı
20. İlk ıska: baş
21. Gövde, kollar ve bacaklar
22. Parçalar bir listede
23. Kaybetmek
24. Kazanmak
25. Kaçırdığın kelimeyi göster
26. Bitiş mesajı
27. Yeniden oyna
28. Aynı kelime art arda gelmesin
29. Galibiyet serisi
30. En iyi seriyi hatırla
31. Her tuş nereye
32. Tuşları çiz
33. Son satırı ortala
34. Hatırlayan tuşlar
35. Tuşa dokun
36. Kendin yap: ipucu düğmesi