Atölye › Renk Hafızası (Simon) › 19/27. adım
Şimdi tuşlara tıklayarak (telefonda dokunarak) oynayacağız. Tarayıcı tıklamanın yerini sayfaya göre verir; canvas ise sayfanın köşesinde başlamıyor ve ekranda farklı boyda gösterilebiliyor (telefonda küçülür).
Bu yüzden tıklamayı önce canvas'ın kendi piksellerine çeviririz, sonra padAt ile tuşu buluruz.
```js
canvas.addEventListener('pointerdown', (event) => {
const rect = canvas.getBoundingClientRect()
const x = ((event.clientX - rect.left) * canvas.width) / rect.width
const y = ((event.clientY - rect.top) * canvas.height) / rect.height
const pad = padAt(x, y)
if (pad >= 0) press(pad)
})
```canvas.addEventListener('pointerdown', ...) → canvas'a fareyle basıldığında ya da parmakla dokunulduğunda.canvas.getBoundingClientRect() → canvas'ın sayfadaki dikdörtgeni: nerede başladığı (left, top) ve ekranda ne
kadar büyük gösterildiği (width, height).event.clientX - rect.left → tıklamanın sayfadaki x'inden canvas'ın başladığı yeri çıkar: canvas içindeki konum.* canvas.width / rect.width → ölçekle: canvas 800 piksel gösteriliyorsa 400 / 800 = 0.5 ile çarp. Bu adımı
atlamak yaygın bir hatadır: kendi ekranında çalışır, telefonda yanlış tuşa düşer.const pad = padAt(x, y) → önceki adımın fonksiyonu.if (pad >= 0) press(pad) → >= "büyük veya eşit": gerçek bir tuşa tıklandıysa bas.padAt fonksiyonunun altına bir boş satır bırak ve pointerdown dinleyicisini yaz; keydown dinleyicisi hemen altında (arada boş satır olmadan) kalsın. Çalıştır, gösteriyi izle ve aynı tuşa tıkla: dizi bir uzamalı.
Beceriler: Klavye ve fare girdisi
← Bir noktada hangi tuş var? İlerleme ve hata →