Atölye › Wordle Tarzı Kelime Tahmini › 23/26. adım

Hatırlayan tuşlar

Ne yapıyoruz

Ekran klavyesi gerçek klavyenin yapamadığı bir şey yapabilir: her tuşu o harf hakkında bildiklerinle boyamak. Böylece hangi harflerin denenmediğini bir bakışta görürsün.

Bir harf bir tahminde sarı, sonra yeşil olabilir; tuş en iyi bilgiyi göstermeli. "En iyi"nin bir sırası var: yeşil > sarı > gri. Her işarete bir puan vereceğiz ve daha yüksek puanlı işaret eskisinin yerini alacak.

```js
// The best thing known about each letter so far: green beats yellow beats gray.
function letterColors() {
  const rank = { gray: 1, yellow: 2, green: 3 }
  const known = {}
  for (const g of guesses) {
    ;[...g.word].forEach((letter, i) => {
      const mark = g.marks[i]
      if (!known[letter] || rank[mark] > rank[known[letter]]) known[letter] = mark
    })
  }
  return known
}

  const known = letterColors()

    ctx.fillStyle = known[k.key] ? COLORS[known[k.key]] : '#71717a'
```

Ne işe yarıyor

Sıra sende

  1. function draw() { satırının üstüne yorum satırını ve letterColors fonksiyonunu yaz; arada bir boş satır kalsın.
  2. draw içinde ctx.font = 'bold 14px sans-serif' satırının üstüne const known = letterColors() yaz.
  3. Tuş döngüsündeki ilk ctx.fillStyle = '#71717a' satırını kod bloğundaki satırla değiştir.
  4. Çalıştır ve bir tahmin gönder: tuşlar renklenmeli.

Beceriler: Diziler ve nesneler, Oyun durumları

Tüm adımlar

  1. Tuval ve kalem
  2. Arka planı boya
  3. Çizen bir fonksiyon
  4. Beş karelik bir satır
  5. Altı satır
  6. Tekrar tekrar çiz
  7. Yazılan harfler
  8. Klavyeyle yaz
  9. Harfleri göster
  10. Silme tuşu
  11. Kısayollara dokunma
  12. Gizli bir kelime
  13. Doğru harf, doğru yer
  14. Doğru harf, yanlış yer
  15. Enter tahmini gönderir
  16. Tahminleri renklendir
  17. Kazanmak ve kaybetmek
  18. Mesaj satırı
  19. Tuşlar nereye
  20. Klavyeyi çiz
  21. Tuşa dokun
  22. Enter ve Sil tuşları
  23. Hatırlayan tuşlar
  24. İstatistik tut
  25. İstatistikleri göster
  26. Kendin yap: sadece gerçek kelimeler