Atölye › Frogger Tarzı Karşıya Geçiş › 5/22. adım

Kaydırarak zıpla

Ne yapıyoruz

Telefonda: parmakla kaydırmak o yöne zıplatsın, kısa bir dokunuş ileri zıplatsın. Parmağın nerede bastığını hatırlayıp nerede kalktığıyla karşılaştırıyoruz.

```js
// Touch: a swipe hops that way, a short tap hops forward.
let swipeStart = null
canvas.addEventListener('pointerdown', (event) => {
  swipeStart = { x: event.clientX, y: event.clientY }
})
canvas.addEventListener('pointerup', (event) => {
  if (!swipeStart) return
  const dx = event.clientX - swipeStart.x
  const dy = event.clientY - swipeStart.y
  swipeStart = null
  if (Math.max(Math.abs(dx), Math.abs(dy)) < 20) {
    hop(0, -1)
  } else if (Math.abs(dx) > Math.abs(dy)) {
    hop(Math.sign(dx), 0)
  } else {
    hop(0, Math.sign(dy))
  }
})
```

Ne işe yarıyor

swipeStart → parmağın bastığı nokta; null → henüz basılmadı.
dx, dy → parmağın ne kadar kaydığı (yatay, dikey).
Math.abs → mutlak değer (işaretsiz). İkisi de 20 pikselden küçükse bu bir dokunuş: ileri zıpla.
Math.abs(dx) > Math.abs(dy) → daha çok yatay kaydırılmış: sağa ya da sola. Math.sign(dx) → eksi ise -1, artı ise 1.
Değilse dikey: yukarı ya da aşağı.

Sıra sende

keydown dinleyicisinin altına bir boş satır bırakıp yorumu ve dokunma satırlarını yaz. Çalıştır.

Beceriler: Klavye ve fare girdisi

← Zıpla Trafik şeritleri →

Tüm adımlar