Atölye › Tuğla Kırma › 5/39. adım

Başka boyda gösterilen canvas

Ne yapıyoruz

Canvas'ın kendi eni 480 pikseldir, ama ekranda küçültülmüş ya da büyütülmüş gösterilebilir: telefonda daha küçük, büyük ekranda daha büyük. O zaman sayfadaki 1 piksel, canvas'taki 1 piksel değildir ve raket parmağın altına denk gelmez.

Çözüm: uzaklığı, canvas'ın gerçek eni ile ekrandaki eni arasındaki oran ile çarpmak.

```js
// Convert page coordinates to canvas pixels (the canvas may be displayed scaled).
const rect = canvas.getBoundingClientRect()
const x = (event.clientX - rect.left) * (canvas.width / rect.width)
```

Ne işe yarıyor

İlk satır bir yorum: bilgisayar okumaz, sana not.
rect.width → canvas'ın ekranda göründüğü en. canvas.width → canvas'ın gerçek eni (480).
canvas.width / rect.width → oran. Canvas iki kat büyük gösteriliyorsa (960) oran 480 / 960 = 0.5 olur; sayfadaki uzaklık yarıya iner. Normal boyda oran 1'dir, hiçbir şey değişmez.
(event.clientX - rect.left) * (...) → parantezler önce çıkarmanın, sonra çarpmanın yapılmasını sağlar.

Sıra sende

pointermove dinleyicisinde const rect = ... satırının üstüne yorum satırını yaz.
const x = ... satırını kodda görüldüğü gibi değiştir: çıkarmayı paranteze al, sonuna oranla çarpmayı ekle.
Çalıştır: normal boyda raket eskisi gibi davranmalı.

Beceriler: Klavye ve fare girdisi

← Fareyi takip et Hızı olan bir top →

Başka boyda gösterilen canvas

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar