Atölye › Yazı Yağmuru › 5/33. adım

Kelime listesi

Ne yapıyoruz

Aynı anda birçok kelime düşecek. Her kelimenin üç bilgisi var: yazısı, yatay yeri (x) ve yüksekliği (y). Bunları bir nesnede (object) paketleriz: { text: 'cat', x: 300, y: 60 }.

Bütün kelimeleri de bir dizide (array) tutarız: sıralı bir liste, alışveriş listesi gibi. draw listedeki her kelimeyi kendi yerine yazacak. Şimdilik listeye elle iki kelime koyuyoruz.

```js
let words // { text, x, y }

function reset() {
  words = [
    { text: 'rocket', x: 40, y: 120 },
    { text: 'cat', x: 300, y: 60 },
  ]
}

  for (const w of words) ctx.fillText(w.text, w.x, w.y)

reset()
draw()
```

Ne işe yarıyor

Sıra sende

  1. const FONT = ... satırının altında bir boş satır bırak; let words satırını, bir boş satır daha ve reset fonksiyonunu yaz.
  2. draw içindeki ctx.fillText('rocket', 40, 120) satırını sil; yerine for satırını yaz.
  3. En alttaki draw() satırının üstüne reset() yaz.
  4. Çalıştır: iki kelime görmelisin.

Beceriler: Diziler ve nesneler

Tüm adımlar

  1. Kelimeler için bir gökyüzü
  2. Zemin
  3. Canvas'ta bir kelime
  4. Çizen bir fonksiyon
  5. Kelime listesi
  6. Düşür
  7. Oyun döngüsü
  8. Listeden yeni bir kelime
  9. Yağmur başlasın
  10. Zemini geçince gider
  11. Bir kelimeye kilitlen
  12. Klavyeyi dinle
  13. Harf harf
  14. Yarım kelime sarı
  15. Kaybolan kelimeyi bırak
  16. Canlar
  17. Kalpler
  18. Puan
  19. Canlar bitti
  20. Oyunu dondur
  21. Oyun bitti kartı
  22. Yeniden oyna
  23. Seviyeler
  24. Gittikçe hızlanarak
  25. Rekor
  26. Doğruluk
  27. Dakikada kelime
  28. Sonunda hızın
  29. Tuşlar nereye
  30. Klavyeyi çiz
  31. Sıradaki tuşu yak
  32. Tuşlara dokun
  33. Kendin yap: fikir değiştir