Workshop › Space Invaders-style › Step 3 of 21

Move the ship

What we are doing

While an arrow key is held, the ship slides 4 pixels a frame that way. A keys object remembers which keys are down.

```js
const SHIP_SPEED = 4

const keys = {}

document.addEventListener('keydown', (event) => {
  keys[event.key] = true
})
document.addEventListener('keyup', (event) => {
  keys[event.key] = false
})

function update() {
  if (keys.ArrowLeft) ship.x -= SHIP_SPEED
  if (keys.ArrowRight) ship.x += SHIP_SPEED
}

  update()
```

What it means

keys[event.key] stores a field named after the key, like keys.ArrowLeft.
update moves the ship while a key is held; the loop calls it before drawing.

Your turn

Under SHIP_H, write SHIP_SPEED.
Under ship, write keys, the two key listeners and update.
In loop, call update() before draw().

Skills: Keyboard and mouse input

← The game loop Stay on screen →

All steps