Atölye › Wordle Tarzı Kelime Tahmini › 19/26. adım
Telefonda canvas için klavye açılmaz; oyun kendi klavyesini çizecek. Tuşlar gerçek klavyedeki gibi üç satır:
her satır bir yazı ('qwertyuiop'...).
keyRects() bu satırları bir dikdörtgen listesine çevirecek: her tuşun adı, yazısı, yeri ve boyu. Aynı listeyi hem
tuşları çizmek hem de dokunulan tuşu bulmak için kullanacağız; böylece gördüğün tuş ile bastığın tuş asla
birbirini tutmazlık etmez. Bu adımda sadece hesap.
```js
const KEY_ROWS = ['qwertyuiop', 'asdfghjkl', 'zxcvbnm']
const KEY_W = 32
const KEY_H = 44
const KEYS_TOP = 408
// The on-screen keyboard: each row is centered.
function keyRects() {
const rects = []
KEY_ROWS.forEach((row, r) => {
const total = row.length * KEY_W + (row.length - 1) * 4
let x = (canvas.width - total) / 2
;[...row].forEach((k) => {
rects.push({ key: k, label: k, x, y: KEYS_TOP + r * (KEY_H + 6), w: KEY_W, h: KEY_H })
x += KEY_W + 4
})
})
return rects
}
```KEY_W = 32, KEY_H = 44 → tuşun eni ve boyu. KEYS_TOP = 408 → klavyenin başladığı yükseklik.KEY_ROWS.forEach((row, r) => { ... }) → forEach her satır için fonksiyonu çalıştırır: row satırın yazısı,
r sıra numarası (0, 1, 2).const total = row.length * KEY_W + (row.length - 1) * 4 → satırın eni: tuşlar + aralarındaki 4'er piksel.let x = (canvas.width - total) / 2 → satırı ortalayan sol kenar. let, çünkü her tuştan sonra sağa kayacak.;[...row].forEach((k) => ...) → [...row] yazıyı harflerine dağıtır; her harf k. Baştaki ; satır [ ile
başladığı için bir güvenlik işareti.rects.push({ key: k, label: k, x, y: ..., w: KEY_W, h: KEY_H }) → tuşun bilgileri: key (basınca ne olur),
label (üstünde ne yazar), yeri ve boyu. x tek başına x: x demek.x += KEY_W + 4 → bir sonraki tuş 36 piksel sağda.return rects → listeyi geri ver.COLORS satırının altına dört klavye sabitini yaz.function draw() { satırının üstüne yorum satırını ve keyRects fonksiyonunu yaz; arada bir boş satır kalsın.Beceriler: Diziler ve nesneler