Atölye › Adam Asmaca › 31/36. adım
Telefonda canvas için klavye açılmaz; yani telefonda bu oyun oynanamaz. Çözüm: oyun kendi klavyesini çizsin. Kelimenin altına 26 tuş, 9'arlı satırlar hâlinde.
Önce hesap: harfleri LETTERS sırasıyla numaralarız (A = 0, B = 1, ... Z = 25). keyRect(i) fonksiyonu i
numaralı tuşun sol üst köşesini bulacak. Bu adımda henüz çizmiyoruz.
```js
const KEY_W = 48
const KEY_H = 34
const KEYS_Y = 360
function keyRect(i) {
const row = Math.floor(i / 9)
return { x: 8 + (i % 9) * (KEY_W + 4), y: KEYS_Y + row * (KEY_H + 6) }
}
```KEY_W = 48, KEY_H = 34 → bir tuşun eni ve boyu. KEYS_Y = 360 → klavyenin başladığı yükseklik.const row = Math.floor(i / 9) → satır: 9'a böl, aşağı yuvarla. 0–8 arası 0. satır, 9–17 1. satır, 18–25 2.
satır. (i = 10 → 10 / 9 = 1.1 → 1.)i % 9 → % bölümden kalan: 9'a bölünce ne artıyor? 10 % 9 → 1. Bu, tuşun satırdaki yeri.(KEY_W + 4) → tuşlar arası mesafe: 48 piksel tuş + 4 piksel boşluk. Satırdaki yer bununla çarpılır.(KEY_H + 6) → satırlar arası mesafe: 34 + 6.8 + → soldan 8 piksel pay. 9 tuş × 52 − 4 = 464 piksel; 480'den kalan 16 piksel iki yana 8'er bölünür.return { x: ..., y: ... } → fonksiyon sonuç olarak bir nesne verir: tuşun sol üst köşesi.const MAX_WRONG = 6 satırının altına üç tuş ölçüsünü yaz.canvas.addEventListener('pointerdown', ...) satırının üstüne keyRect fonksiyonunu yaz; arada bir boş satır
kalsın.Beceriler: Canvas üzerine çizim
← En iyi seriyi hatırla Tuşları çiz →