Workshop › Pinball › Step 27 of 42

Which keys are held?

What we are doing

A flipper stays up while its key is held. So we need to know not only when a key goes down but also when it comes back up. pressed remembers the two flipper keys; one function key handles both events.

```js
let pressed // { left, right }

  pressed = { left: false, right: false }

function key(event, down) {
  const k = event.key
  if (k === 'ArrowLeft' || k === 'z' || k === 'Z') pressed.left = down
  else if (k === 'ArrowRight' || k === '/' || k === 'm' || k === 'M') pressed.right = down
  else if (k === ' ' || k === 'ArrowDown') {
    if (down) launch()
  } else return
  event.preventDefault()
}

document.addEventListener('keydown', (event) => key(event, true))
document.addEventListener('keyup', (event) => key(event, false))
```

What it means

pressed holds true / false for each flipper key.
keydown calls key(event, true), keyup calls key(event, false): holding a key sets its flag, letting go clears it.
The launch keys still launch, but only on the way down.
Any other key returns early, so preventDefault() only blocks the game's own keys.

Your turn

Under let flippers write let pressed.
In reset, under the flippers = ... line, write the pressed line.
Replace the whole keydown listener with key and the two new listeners.

Skills: Keyboard and mouse input

← Flippers stop the ball Which way to turn →

All steps