Workshop › Frogger-style Crossing › Step 5 of 22

Swipe to hop

What we are doing

On a phone, a swipe hops in its direction and a short tap hops forward. We remember where the finger went down and compare it with where it came up.

```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))
  }
})
```

What it means

dx, dy are how far the finger moved. Less than 20 pixels either way is a tap.
Otherwise the bigger of the two decides: sideways or up/down. Math.sign gives -1 or 1.

Your turn

Under the keydown listener, write the comment and the touch listeners.

Skills: Keyboard and mouse input

← Hop Lanes of traffic →

All steps