Workshop › Puzzle Bobble-style Bubble Shooter › Step 8 of 31

Turn with the arrows

What we are doing

The arrow keys turn the aim a little each press. The angle is clamped: never flatter than 0.15 radians from the horizontal, because a shot almost along the floor would bounce between the walls for ages.

```js
const clampAim = (angle) => Math.max(-Math.PI + 0.15, Math.min(-0.15, angle))

document.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowLeft') aim = clampAim(aim - 0.04)
  else if (event.key === 'ArrowRight') aim = clampAim(aim + 0.04)
  else return
  event.preventDefault()
})
```

What it means

Pointing right along the floor is 0, left is -π. clampAim keeps the angle between -π + 0.15 and -0.15: Math.min caps it on one side, Math.max on the other.
Left makes the angle smaller (turning left), right bigger. Other keys leave at once; only the game's keys reach preventDefault(), which stops the page from scrolling.

Your turn

Above function drawBubble(...) write clampAim and the key listener, each followed by an empty line.

Skills: Keyboard and mouse input

← Aim upwards Aim with the pointer →

All steps