Workshop › Lunar Lander › Step 8 of 31

The game loop

What we are doing

A game loop moves the lander by its velocity and redraws the picture, about 60 times a second.

```js
function update() {
  lander.x += lander.vx
  lander.y += lander.vy
}

function loop() {
  update()
  draw()
  requestAnimationFrame(loop)
}

reset()
requestAnimationFrame(loop)
```

What it means

update adds the velocity to the position every frame.
loop updates, draws, and asks the browser to run it again before the next screen refresh.
The bottom starts the loop instead of drawing once.

Your turn

Write update just above function drawLander() {, with an empty line between.
At the bottom, replace draw() with the loop function and requestAnimationFrame(loop) as shown.

Skills: The game loop

← Two feet Moon gravity →

All steps