Atölye › Kule Savunması › 13/42. adım
Kuleleri fareyle kuracağız. Ama bir tıklama bize ekran pikseli verir; oyun ise canvas pikseliyle düşünür. İkisi aynı değildir: sayfa canvas'ı ekrana sığdırmak için büyütür ya da küçültür (telefonda küçük, büyük ekranda büyük).
tileAt önce çevirir, sonra hangi kareye tıklandığını bulur. Bu adımı unutmak tarayıcı oyunlarının en sık
hatalarından biridir: canvas boyu değişince tıklamalar yanlış yere düşer.
```js
// Mouse and touch positions are in screen pixels; the canvas may be drawn smaller or bigger than its own pixels.
function tileAt(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
return { x, y, col: Math.floor(x / TILE), row: Math.floor((y - TOP) / TILE) }
}
```canvas.getBoundingClientRect() → canvas'ın ekrandaki yeri (left, top) ve göründüğü boy (width, height).event.clientX - rect.left → tıklamanın canvas'ın sol kenarından uzaklığı, ekran pikseliyle.* canvas.width / rect.width → ölçeği geri alır: canvas yarı boyda gösteriliyorsa 2 ile çarpar.Math.floor(x / TILE) → Math.floor aşağı yuvarlar: 60 / 40 = 1.5 → 1. sütun.Math.floor((y - TOP) / TILE) → satır, üst şeridin altından saymaya başlar. Üst şeride tıklamak −1. satır verir.return { x, y, col, row } → dördünü birden geri verir; { x } yazmak { x: x } demek.pointAt fonksiyonunun altında bir boş satır bırakıp yorumu ve tileAt'i yaz.Beceriler: Klavye ve fare girdisi