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

Sıradaki tuşu yak

Ne yapıyoruz

Klavye bir de öğretsin: hedefin sıradaki harfinin tuşu sarı yansın. Yeni başlayan biri parmakları harflerin yerini öğrenirken ışığı izleyebilir. Yanlış kelimeye kilitlendiğini fark etmeye de yardım eder.

```js
const next = target && target.text[typed] === keys[i]
ctx.fillStyle = next ? '#facc15' : '#1e293b'
ctx.fillRect(k.x, k.y, KEY_W, KEY_H)
ctx.fillStyle = next ? '#020617' : '#e2e8f0'
```

Ne işe yarıyor

const next = target && target.text[typed] === keys[i] → hedef varsa ve bu tuş onun sıradaki harfiyse doğru. Hedef yoksa && soldaki null'da durur (yanlış sayılır); böylece null.text gibi bir hatadan kurtuluruz.
next ? '#facc15' : '#1e293b' → sıradaki tuşsa sarı kutu, değilse koyu.
next ? '#020617' : '#e2e8f0' → sarı kutuda harf koyu, okunaklı olsun.

Sıra sende

Klavye döngüsünde const k = keyRect(row, i) satırının altına const next = ... yaz; iki fillStyle satırını kodda görüldüğü gibi değiştir. Çalıştır, bir kelimeye kilitlen: sıradaki harfin tuşu sarı yanmalı.

Beceriler: Oyun durumları

← Klavyeyi çiz Tuşlara dokun →

Tüm adımlar