Workshop › Angry Birds-style Slingshot › Step 8 of 47

Aim with the arrow keys

What we are doing

The arrow keys change the aim: Up and Down turn the angle, Right and Left stretch or loosen the band, between 10 and MAX_PULL.

```js
const MAX_PULL = 70

document.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowUp') aim.angle -= 0.03
  else if (event.key === 'ArrowDown') aim.angle += 0.03
  else if (event.key === 'ArrowRight') aim.pull = Math.min(MAX_PULL, aim.pull + 2)
  else if (event.key === 'ArrowLeft') aim.pull = Math.max(10, aim.pull - 2)
  else return
  event.preventDefault()
})
```

What it means

addEventListener('keydown', (event) => { ... }) runs the function each time a key goes down; event.key is its name.
The if ... else if chain does the first matching line only; else return leaves for any other key.
Math.min(MAX_PULL, ...) never lets the pull go over 70, Math.max(10, ...) never under 10.
event.preventDefault() stops the arrow keys from also scrolling the page.

Your turn

Under the SLING line write const MAX_PULL = 70.
Write the listener above function draw() {, with an empty line between them.

Skills: Keyboard and mouse input

← The rubber band Bodies →

All steps