Atölye › Tuğla Kırma › 4/39. adım
Şimdi raket fareyi takip edecek (telefonda parmağı). Tarayıcı, fare canvas'ın üstünde her kıpırdadığında
pointermove adlı bir olay yayınlar; fare, kalem ve dokunmatik için aynı olay. Biz o olayı dinleyip raketi
farenin altına taşıyacağız.
Olay bize farenin sayfadaki yerini verir. Canvas sayfanın içinde bir yerde durduğu için bunu canvas'a göre çevirmemiz gerekiyor.
```js
canvas.addEventListener('pointermove', (event) => {
const rect = canvas.getBoundingClientRect()
const x = event.clientX - rect.left
paddle.x = clamp(x - PADDLE_W / 2, 0, canvas.width - PADDLE_W)
})
```canvas.addEventListener('pointermove', (event) => { ... }) → "fare canvas'ın üstünde her hareket ettiğinde
süslü parantezin içini çalıştır". (event) => { } adı olmayan kısa bir fonksiyondur (ok fonksiyonu);
tarayıcı olayın bilgilerini ona event adıyla verir.canvas.getBoundingClientRect() → canvas'ın ekranda durduğu kutu. rect.left sol kenarının sayfadaki yeri.event.clientX - rect.left → farenin canvas'ın sol kenarından uzaklığı, yani canvas içindeki x'i.x - PADDLE_W / 2 → raketi farenin tam ortasından tutmak için sol kenarını yarım raket (40 piksel) sola
koyarız. (Önce bölme yapılır, sonra çıkarma; matematikteki gibi.)clamp(..., 0, canvas.width - PADDLE_W) → sol kenar 0'dan küçük ya da 400'den (480 − 80) büyük olmasın; yoksa
raket ekrandan taşar.paddle.x) değiştiriyor. Çizimi döngü yapıyor.clamp fonksiyonunun kapanış }'inin altına bir boş satır bırak ve dinleyiciyi yaz. Kapanış }) ile olur.Beceriler: Klavye ve fare girdisi
← Sayıyı sınırlar içinde tut Başka boyda gösterilen canvas →