Workshop › Asteroids › Step 11 of 41

Around the screen

What we are doing

Asteroids has no walls: off the right edge you come back on the left, off the top you reappear at the bottom. %, the remainder, does it, with one trap: in JavaScript -5 % 600 is -5. Adding the size first fixes it.

```js
// Wrap a coordinate around the screen. Plain % keeps the sign in JavaScript (-5 % 600 is -5), so add the size first.
function wrap(value, size) {
  return ((value % size) + size) % size
}

  ship.x = wrap(ship.x + ship.vx, canvas.width)
  ship.y = wrap(ship.y + ship.vy, canvas.height)
```

What it means

wrap(-5, 600): -5 % 600 is -5, + 600 is 595, 595 % 600 is 595.
wrap(605, 600): 5 + 600 is 605, and the second % brings it back to 5.
The ship's new position goes through wrap, with the canvas width for x and its height for y.

Your turn

Above function resetShip() { write the comment and wrap, followed by an empty line.
In update, replace the two moving lines with the wrapped ones.

Skills: Velocity and gravity

← A speed limit Making a bullet →

All steps