🛠️ Spinning Pacman: Supporting Touch

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

🛠️ Spinning Pacman: Supporting Touch

We need two things to support touch on Spinning Pacman.

1. We’ll use Pointer events instead of Mouse events
2. We need to add the touch-action css property.

Replacing Mouse events with Pointer events

This is as easy as replacing mousemove with pointermove.

// Remove this
document.addEventListener('mousemove', event => {
  // ...
})

// Add this
document.addEventListener('pointermove', event => {
  // ...
})

Adding touch-action

We need to set touch-action: none to detect pointermove immediately.

In this case, let’s say we want to detect pointermove immediately when the user touches the title or anywhere inside the Spinning Pacman grid.

header,
main {
  touch-action: none;
}

And we’re done.