Atölye › Missile Command Tarzı Savunma › 13/35. adım
Şimdi ateşi oyuncuya bağlayalım: canvas'a tıklamak (telefonda dokunmak) o noktaya ateş etsin.
Tıklama olayı bize farenin sayfadaki yerini verir. Canvas sayfada bir yerde durur ve ekranda büyütülmüş ya da küçültülmüş gösterilebilir; bu yüzden konumu canvas piksellerine çeviriyoruz.
```js
canvas.addEventListener('pointerdown', (event) => {
const rect = canvas.getBoundingClientRect()
fire(((event.clientX - rect.left) * canvas.width) / rect.width, ((event.clientY - rect.top) * canvas.height) / rect.height)
})
```canvas.addEventListener('pointerdown', (event) => { ... }) → canvas'a basıldığında (tıklama ya da dokunma)
içini çalıştır. event olayın bilgilerini taşır.canvas.getBoundingClientRect() → canvas'ın ekranda durduğu kutu: rect.left, rect.top sol üst köşesi,
rect.width, rect.height ekranda göründüğü boyu.event.clientX - rect.left → farenin canvas'ın sol kenarından uzaklığı.* canvas.width / rect.width → ölçeği düzeltir: canvas iki kat büyük gösteriliyorsa uzaklığı yarıya indirir.
Normal boyda oran 1'dir. y için aynısı clientY, top ve height ile.fire(...)'a verilir: tıklanan nokta, canvas pikseliyle.// Move a point ... yorumunun üstüne dinleyiciyi yaz; altında bir boş satır kalsın. Uzun fire(...) satırını
tek satırda yaz. Çalıştır: kontroller yeşil olmalı (önleyiciler bir sonraki adımda uçacak).
Beceriler: Klavye ve fare girdisi
← Önleyici ateşle Önleyiciler uçuyor →