Atölye › Wordle Tarzı Kelime Tahmini › 16/26. adım
Şimdi ipuçlarını görelim. Biten her tahmin kendi satırında, işaretlerinin renginde dolu karelerle çizilsin: yeşil, sarı, gri. Yazdığın harfler de son tahminin altındaki satıra gelsin.
Renkleri bir nesnede tutacağız: COLORS.green yeşilin kodu. Böylece COLORS[işaret] diyerek işaretten renge geçeriz.
```js
const COLORS = { green: '#16a34a', yellow: '#ca8a04', gray: '#3f3f46' }
for (let row = 0; row < TRIES; row++) {
const guess = guesses[row]
const letters = guess ? guess.word : row === guesses.length ? current : ''
if (guess) {
ctx.fillStyle = COLORS[guess.marks[i]]
ctx.fillRect(x, y, SIZE, SIZE)
} else {
ctx.strokeStyle = letters[i] ? '#a1a1aa' : '#3f3f46'
ctx.lineWidth = 2
ctx.strokeRect(x + 1, y + 1, SIZE - 2, SIZE - 2)
}
```const COLORS = { green: ..., yellow: ..., gray: ... } → işaretten renge bir tablo (nesne).
COLORS[guess.marks[i]] → bu harfin işaretinin rengi.const guess = guesses[row] → bu satırın biten tahmini; o satıra henüz tahmin yoksa undefined.guess ? guess.word : row === guesses.length ? current : '' → iç içe iki kısa if: tahmin varsa onun kelimesi;
yoksa ve bu satır ilk boş satırsa (row === guesses.length) yazdıkların; o da değilse hiçbir şey.if (guess) { ... } else { ... } → biten satırda dolu, renkli kare; diğerlerinde eski çerçeve.if (letters[i]) bloğu).const TOP = 12 satırının altına COLORS satırını yaz.draw içindeki const letters = ... satırının yerine kod bloğundaki iki satırı yaz (guess ve yeni letters).if (guess) { ... } else { ... } yapısına al: üç satır else'in içine
girer.Beceriler: Canvas üzerine çizim
← Enter tahmini gönderir Kazanmak ve kaybetmek →