Atölye › Yazı Yağmuru › 30/33. adım
Şimdi klavyeyi çiziyoruz: her tuş koyu bir kutu, ortasında harfi. Sıraları forEach ile, her sıranın harflerini de
bir for döngüsüyle geziyoruz.
```js
ctx.textAlign = 'center'
ctx.font = 'bold 18px sans-serif'
ROWS.forEach((keys, row) => {
for (let i = 0; i < keys.length; i++) {
const k = keyRect(row, i)
ctx.fillStyle = '#1e293b'
ctx.fillRect(k.x, k.y, KEY_W, KEY_H)
ctx.fillStyle = '#e2e8f0'
ctx.fillText(keys[i], k.x + KEY_W / 2, k.y + 23)
}
})
```ROWS.forEach((keys, row) => { ... }) → forEach, listenin her elemanı için içini çalıştırır: keys o sıranın
yazısı ('asdfghjkl'), row sırası (0, 1, 2).for (let i = 0; i < keys.length; i++) → sıradaki her harf. Bir yazı liste gibi davranır: keys[i] i. harf.const k = keyRect(row, i) → tuşun sol üst köşesi.'#1e293b'), sonra açık renkli harf, kutunun ortasında (k.x + KEY_W / 2, textAlign ortalı).
k.y + 23 harflerin oturduğu çizgi.draw'un en sonunda: oyun bitti kartından sonra, ama kartla çakışmaz; kart üstte, klavye altta.draw'un sonunda, if (state === 'over') { ... } bloğunun kapanan }'sinin altında bir boş satır bırak ve klavye
satırlarını yaz; fonksiyonun son }'si altta kalsın. Çalıştır: zeminin altında bir klavye görmelisin.
Beceriler: Canvas üzerine çizim, Döngüler
← Tuşlar nereye Sıradaki tuşu yak →