Atölye › Klondike Solitaire › 18/40. adım
Desteye dokununca (ya da tıklayınca) kart çevrilsin. pointerdown olayı fare, kalem ve parmak için aynı çalışır.
Bir incelik var: sayfa canvas'ı ekrana 480×560'tan küçük ya da büyük gösterebilir (telefonda küçülür). Olayın verdiği
nokta ekran pikseli; bizim hesaplarımız canvas pikseli. toCanvas bu çeviriyi yapacak.
```js
function toCanvas(event) {
const rect = canvas.getBoundingClientRect()
return { x: ((event.clientX - rect.left) * canvas.width) / rect.width, y: ((event.clientY - rect.top) * canvas.height) / rect.height }
}
canvas.addEventListener('pointerdown', (event) => {
const p = toCanvas(event)
const h = hit(p.x, p.y)
if (!h) return
if (h.key === 'stock') return flipStock()
})
```canvas.getBoundingClientRect() → canvas'ın ekrandaki yeri ve gösterilen boyu: left, top, width, height.event.clientX - rect.left → dokunulan noktanın canvas'ın sol kenarından uzaklığı (ekran pikseli).* canvas.width / rect.width → ekran pikselini canvas pikseline çevirir. Canvas yarı boyda gösteriliyorsa oran 2'dir:
ekranda 100 piksel, canvas'ta 200.y aynı hesap, yükseklikle.canvas.addEventListener('pointerdown', ...) → canvas'a basıldığında çalışır.const h = hit(p.x, p.y) → orada ne var?if (!h) return → hiçbir şey yoksa (null) çık.if (h.key === 'stock') return flipStock() → desteyse kart çevir ve çık.document.addEventListener('keydown', ...) satırının üstüne toCanvas fonksiyonunu ve pointerdown
dinleyicisini yaz; aralarında ve altlarında birer boş satır kalsın.Beceriler: Klavye ve fare girdisi
← Sütunda bir karta dokunmak Kural 1: sütuna dizmek →