Atölye › Angry Birds Tarzı Sapan › 20/47. adım
Şimdi fareyle (ya da parmakla) gerçek bir sapan gibi nişan almaya hazırlanıyoruz: sapanı tut, geri çek, bırak. Önce iki yardımcı:
toCanvas(event): farenin ekrandaki yerini canvas pikseline çevirir. Canvas ekranda büyütülmüş ya da
küçültülmüş olabilir; ekran pikseli ile canvas pikseli aynı olmayabilir.pull(point): sapanın gerisindeki bir noktadan açıyı ve çekişi hesaplar. Göstericiden sapana doğru olan ok, kuşun
uçacağı yöndür.```js
function toCanvas(event) {
const rect = canvas.getBoundingClientRect()
return {
x: ((event.clientX - rect.left) * canvas.width) / rect.width,
y: ((event.clientY - rect.top) * canvas.height) / rect.height,
}
}
// Drag back from the sling like a real one: the bird flies the other way, harder the further you pull.
function pull(point) {
const dx = SLING.x - point.x
const dy = SLING.y - point.y
aim.angle = Math.atan2(dy, dx)
aim.pull = Math.min(MAX_PULL, Math.hypot(dx, dy))
}
```canvas.getBoundingClientRect() → canvas'ın sayfadaki yeri (left, top) ve ekranda göründüğü boy (width,
height).event.clientX - rect.left → göstericinin canvas'ın sol kenarından uzaklığı (ekran pikseliyle).* canvas.width / rect.width → ekran pikselini canvas pikseline çeviren oran. Canvas ekranda iki kat büyük
gösteriliyorsa oran 0.5 olur.return { x: ..., y: ... } → iki sayıyı bir nesne olarak geri verir.const dx = SLING.x - point.x ve const dy = SLING.y - point.y → noktadan sapana doğru olan ok. Sapanın sol
altına çekersen ok sağ üste bakar: kuş sağ üste uçar.Math.atan2(dy, dx) → bir okun yönünü radyan olarak verir: açı.Math.hypot(dx, dy) → okun uzunluğu, iki nokta arasındaki düz uzaklık (Pisagor): çekiş. Math.min onu
MAX_PULL'da keser.function draw() { satırının üstüne toCanvas ve pull fonksiyonlarını yaz (her birinden sonra bir boş satır).Beceriler: Klavye ve fare girdisi, Hız ve yerçekimi
← Atmadan önce yolu gör Sapanı tut →