Atölye › Pinball › 39/42. adım
Telefonda klavye yok. Telefonu iki elle tutunca sol başparmak masanın sol yarısına, sağ başparmak sağ yarısına dokunur. Parmak ekrandayken palet yukarıda, kalkınca aşağıda.
Güzel olan şu: dokunmak da yalnız pressed'i değiştirecek. Paletler pressed'e bakıyor; bilginin tuştan mı
parmaktan mı geldiğini umursamıyor.
```js
// Touch: the right-hand launch lane holds the launcher, the left and right halves of the table are the flippers.
canvas.addEventListener('pointerdown', (event) => {
const rect = canvas.getBoundingClientRect()
const x = ((event.clientX - rect.left) * canvas.width) / rect.width
if (x < canvas.width / 2) pressed.left = true
else pressed.right = true
})
document.addEventListener('pointerup', () => {
pressed = { left: false, right: false, launch: false }
})
```'pointerdown' → parmak ekrana değince ya da fare tuşuna basılınca gelen olay. canvas'a bağlıyoruz: masaya
dokunulunca.canvas.getBoundingClientRect() → canvas'ın ekrandaki yeri ve boyu. Telefonda canvas küçültülmüş olabilir:
ekranda 200 piksel eninde görünse de içi hâlâ 400 piksel.const x = ((event.clientX - rect.left) * canvas.width) / rect.width → dokunuşun ekrandaki yerini canvas
pikseline çevirir:event.clientX - rect.left → canvas'ın sol kenarından kaç piksel içeride;* canvas.width / rect.width → gerçek en ÷ ekrandaki en oranıyla büyüt.if (x < canvas.width / 2) pressed.left = true / else pressed.right = true → sol yarı sol palet, sağ yarı sağ
palet.'pointerup' → parmak kalkınca. Bütün sayfayı (document) dinliyoruz: parmak masanın dışında kalksa da paletler
insin. Hepsi false.function draw() { satırının üstüne yaz; altında bir boş satır kalsın.Beceriler: Klavye ve fare girdisi