Atölye › Köstebek Vurmaca › 8/18. adım

Vur!

Ne yapıyoruz

Köstebeği dışarıda olan bir deliğe tıklamak bir puan kazandırsın ve köstebeği hemen deliğine geri yollasın.

```js
let score = 0

canvas.addEventListener('pointerdown', (event) => {
  // The canvas may be displayed at a different size than its own pixels, so scale the pointer.
  const rect = canvas.getBoundingClientRect()
  const x = (event.clientX - rect.left) * (canvas.width / rect.width)
  const y = (event.clientY - rect.top) * (canvas.height / rect.height)
  const hole = holeAt(x, y)
  if (hole && isUp(hole)) {
    score += 1
    hole.upUntil = 0
  }
})
```

Ne işe yarıyor

• canvas.addEventListener('pointerdown', ...) → canvas'a fare ya da parmakla basıldığında çalışır.
• canvas.getBoundingClientRect() → canvas'ın sayfadaki yeri ve ekrandaki boyu.
• (event.clientX - rect.left) → tıklamanın canvas'ın sol kenarına uzaklığı (sayfa pikseli).
• * (canvas.width / rect.width) → canvas ekranda küçültülmüş ya da büyütülmüş olabilir; bu oran onu canvas'ın kendi piksellerine çevirir.
• if (hole && isUp(hole)) → bir deliğe tıklandı ve köstebeği dışarıda: score += 1, hole.upUntil = 0 (köstebek hemen saklanır).

Sıra sende

1. let nextPop ... satırının altına let score = 0 yaz.
2. function update() { satırının üstüne pointerdown dinleyicisini yaz.
3. Çalıştır ve köstebeklere tıkla. (Skoru sonraki adımda ekranda göreceğiz.)

Beceriler: Klavye ve fare girdisi

← Hangi deliğe tıklandı? Skoru göster →

Tüm adımlar

1. Yeşil bir çayır
2. Dokuz delik
3. Delikleri çiz
4. Saat ve döngü
5. Delikte bir köstebek
6. Köstebekler çıkıyor
7. Hangi deliğe tıklandı?
8. Vur!
9. Skoru göster
10. Başlamak için tıkla
11. Süre işliyor
12. Süre bitti
13. En iyi skor
14. Turun neresindeyiz?
15. Giderek hızlan
16. Her vuruşu hatırla
17. Yükselen +1
18. Kendin yap: kombo