Atölye › Wordle Tarzı Kelime Tahmini › 22/26. adım
Ekran klavyesinde iki tuş eksik: Enter ve silme. Son satırın başına OK, sonuna DEL tuşu ekleyeceğiz; bir
buçuk tuş genişliğinde.
KEY_ROWS içinde onları tek karakterle yazıyoruz: > Enter, < Backspace. Küçük bir tablo bu karakterleri tuşun
adına ve yazısına çevirecek. Tuşlar artık farklı genişlikte olduğu için her tuşun enini de ayrıca tutacağız.
```js
const KEY_ROWS = ['qwertyuiop', 'asdfghjkl', '>zxcvbnm<'] // > is Enter, < is Backspace
const widths = [...row].map((k) => (k === '>' || k === '<' ? KEY_W * 1.5 : KEY_W))
const total = widths.reduce((a, b) => a + b, 0) + (row.length - 1) * 4
let x = (canvas.width - total) / 2
;[...row].forEach((k, i) => {
const [key, label] = { '>': ['Enter', 'OK'], '<': ['Backspace', 'DEL'] }[k] || [k, k]
rects.push({ key, label, x, y: KEYS_TOP + r * (KEY_H + 6), w: widths[i], h: KEY_H })
x += widths[i] + 4
})
```[...row].map((k) => (k === '>' || k === '<' ? KEY_W * 1.5 : KEY_W)) → her tuşun eni: özel tuşlar 48, harfler 32.widths.reduce((a, b) => a + b, 0) → reduce listeyi tek bir değere indirger: 0'dan başlayıp her eni üstüne
ekler: toplam en.forEach((k, i) => ...) → artık tuşun sırası i de lazım: widths[i] o tuşun eni.{ '>': ['Enter', 'OK'], '<': ['Backspace', 'DEL'] }[k] → küçük bir tablo: > için ['Enter', 'OK']. Harfler
tabloda yok; undefined gelir ve || [k, k] harfin kendisini iki kez kullanır.const [key, label] = ... → çiftin ilkine key, ikincisine label adını verir.{ key, label, ... } → { key: key, label: label, ... }'ın kısası. w: widths[i] ve x += widths[i] + 4.type Enter ve Backspace'i zaten biliyor; dokunma dinleyicisi hit.key'i ona veriyor. Başka bir şey değişmiyor.KEY_ROWS'un üçüncü yazısını '>zxcvbnm<' yap ve satırın sonuna yorumu ekle.keyRects içinde, KEY_ROWS.forEach((row, r) => { satırının altındaki satırları kod bloğundakilerle değiştir.OK ve DEL tuşlarını görmelisin. Tamamen ekran klavyesiyle oynayabilirsin.Beceriler: Diziler ve nesneler
← Tuşa dokun Hatırlayan tuşlar →