Workshop › 2048 › Step 25 of 26

A tap is not a swipe

What we are doing

If the finger barely moved (less than 30 pixels either way), it was a tap, not a swipe. A tap does what Space does: go on after a win or a game over.

```js
  if (Math.max(Math.abs(dx), Math.abs(dy)) < 30) next() // too short for a swipe: a tap
  else if (Math.abs(dx) > Math.abs(dy)) move(dx > 0 ? 'right' : 'left')

// Space, Enter or a tap: start again after game over, or keep playing after a win.
function next() {

    ctx.fillText(state === 'won' ? 'Space or tap to keep going' : 'Space or tap to try again', canvas.width / 2, TOP + 220)
```

What it means

• Math.max(...) is the bigger of the two distances; under 30 pixels it is a tap and calls next(). The swipe line becomes else if.
• next gets a comment, and the screens now mention the tap.

Your turn

1. In the pointerup listener, write the tap line above the if line, and make that line else if.
2. Above function next() { write the comment.
3. Change the two overlay texts to 'Space or tap to keep going' and 'Space or tap to try again'.

Skills: Keyboard and mouse input

← Swipes Build it yourself: undo →

All steps

1. The board
2. Sixteen cells
3. A grid of numbers
4. A color for every number
5. Numbers on the tiles
6. Big numbers, smaller text
7. Find the empty cells
8. A new tile
9. Two tiles to start
10. Slide a row
11. Merge equal tiles
12. Move left
13. The arrow key
14. Only real moves count
15. Right is left, reversed
16. Up and down are columns
17. Score
18. Is there a move left?
19. Game over
20. Making 2048
21. Win and lose screens
22. Space to go on
23. Best score
24. Swipes
25. A tap is not a swipe
26. Build it yourself: undo