Atölye › Yazı Yağmuru › 14/33. adım
Oyuncu nereye kadar yazdığını görmeli: hedefin yazılan kısmı sarı, kalanı beyaz olsun. Ama canvas'ta
"kelimenin yarısını boya" diye bir komut yok. Çözüm: kelimeyi iki parça çizmek. Önce yazılan kısım x'te, sonra
kalan kısım tam birinci parçanın bittiği yerde. Bitişi measureText ile ölçeriz.
Eş aralıklı yazı tipi sayesinde iki parça dikişsiz birleşir.
```js
for (const w of words) {
// The typed part in yellow, the rest in white right after it.
const done = w === target ? w.text.slice(0, typed) : ''
ctx.fillStyle = '#facc15'
ctx.fillText(done, w.x, w.y)
ctx.fillStyle = w === target ? '#ffffff' : '#cbd5e1'
ctx.fillText(w.text.slice(done.length), w.x + ctx.measureText(done).width, w.y)
}
```for (const w of words) { → döngü artık birkaç satırlık; süslü parantezli.const done = w === target ? w.text.slice(0, typed) : '' → bu kelime hedefse yazılan kısım, değilse boş yazı
(''). koşul ? evetse : hayırsa.w.text.slice(0, typed) → slice yazının bir parçasını keser: 0'dan başlayıp typed'a kadar (o dahil
değil). 'cat'.slice(0, 2) → 'ca'.ctx.fillText(done, w.x, w.y) → yazılan kısım sarı.w.text.slice(done.length) → tek sayı verilirse oradan sona kadar: 'cat'.slice(2) → 't'.w.x + ctx.measureText(done).width → kalan kısım, sarı parçanın genişliği kadar sağdan başlar.w === target ? '#ffffff' : '#cbd5e1' → hedefin kalanı parlak beyaz, diğer kelimeler açık gri.draw içindeki ctx.fillStyle = '#cbd5e1' satırını ve tek satırlık for satırını sil.ctx.font ve ctx.textAlign satırları üstte kalır).Beceriler: Canvas üzerine çizim
← Harf harf Kaybolan kelimeyi bırak →