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

Tuşlar nereye

Ne yapıyoruz

Telefonda klavye yok; zeminin altına biz çizeceğiz. Klavyenin üç harf sırası (QWERTY): qwertyuiop, asdfghjkl, zxcvbnm. Sıraları yazı olarak tutmak düzeni veri yapar: ROWS[1][0] → 'a'.

Önce tuşların yerini hesaplayan fonksiyonu yazıyoruz: keyRect(satır, sıra). Her sıra ekranda ortalanacak; gerçek klavyede olduğu gibi alttaki sıralar biraz içeriden başlar.

```js
const ROWS = ['qwertyuiop', 'asdfghjkl', 'zxcvbnm']
const KEY_W = 44
const KEY_H = 34
const KEYS_Y = 350

// The on-screen keyboard, one row under another, each row centered.
function keyRect(row, i) {
  const left = (canvas.width - ROWS[row].length * (KEY_W + 3) + 3) / 2
  return { x: left + i * (KEY_W + 3), y: KEYS_Y + row * (KEY_H + 7) }
}
```

Ne işe yarıyor

ROWS → üç sıra; her biri bir yazı. ROWS[row].length → o sıradaki tuş sayısı (10, 9, 7).
KEY_W = 44, KEY_H = 34 → bir tuşun eni ve boyu. KEYS_Y = 350 → klavyenin tepesi, zeminin biraz altı.
Tuşlar arası 3 piksel: bir tuş ve bir boşluk KEY_W + 3 = 47 piksel.
const left = (canvas.width - ROWS[row].length * (KEY_W + 3) + 3) / 2 → sıranın genişliği n × 47 − 3 (sondaki boşluk yok); kalan yerin yarısı soldan boşluk. 10 tuşlu sıra için (480 − 470 + 3) / 2 = 6.5.
x: left + i * (KEY_W + 3) → sıradaki i. tuş.
y: KEYS_Y + row * (KEY_H + 7) → sıralar arası 7 piksel: 350, 391, 432.

Sıra sende

const FONT = ... satırının altına dört klavye sabitini yaz.
function draw() { satırının üstüne yorumu ve keyRect fonksiyonunu yaz; altında bir boş satır kalsın.
Çalıştır: ekran değişmez; tuşları bir sonraki adımda çizeceğiz.

Beceriler: Diziler ve nesneler, Fonksiyonlar

← Sonunda hızın Klavyeyi çiz →

Tuşlar nereye

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar