Workshop › Pinball › Step 39 of 42

Two thumbs

What we are doing

On a phone there are no keys. Holding a thumb on the left half of the table works the left flipper, on the right half the right one; lifting the finger lets both down.

```js
// Touch: the right-hand launch lane holds the launcher, the left and right halves of the table are the flippers.
canvas.addEventListener('pointerdown', (event) => {
  const rect = canvas.getBoundingClientRect()
  const x = ((event.clientX - rect.left) * canvas.width) / rect.width
  if (x < canvas.width / 2) pressed.left = true
  else pressed.right = true
})

document.addEventListener('pointerup', () => {
  pressed = { left: false, right: false, launch: false }
})
```

What it means

pointerdown comes when a finger touches (or a mouse button goes down) on the canvas; pointerup when it lifts.
On a phone the canvas may be shown smaller than 400 pixels. getBoundingClientRect() gives where and how big it is on screen, and the x line turns a screen position into a canvas position.
pointerup listens on the whole page, so the flippers drop even if the finger lifts outside the table.

Your turn

Write the comment and both listeners above function draw() {.

Skills: Keyboard and mouse input

← Show the spring Pull with a finger →

All steps