Workshop › Missile Command-style Defense › Step 3 of 35

Draw again and again

What we are doing

Missiles will move, so the picture must be redrawn about 60 times a second. The drawing goes in draw, and a game loop calls it.

```js
function draw() {
  ctx.fillStyle = '#020617'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = '#854d0e'
  ctx.fillRect(0, GROUND, canvas.width, canvas.height - GROUND)

  ctx.fillStyle = '#38bdf8'
  for (const x of CITY_XS) {
    ctx.fillRect(x - 16, GROUND - 14, 32, 14)
  }
  ctx.fillStyle = '#a3e635'
  ctx.fillRect(BASE.x - 12, BASE.y, 24, 14)
}

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

requestAnimationFrame(loop)
```

What it means

draw holds all the drawing lines; painting the sky first wipes the previous picture.
loop draws, then asks the browser to run loop again before the next screen refresh.
The last line starts the loop; loop has no () there: "run it when it is time".

Your turn

Wrap all the drawing lines in function draw() { ... } (indent them by two spaces), then write loop and the line that starts it below.

Skills: The game loop, Functions

← Your missile base Cities that can fall →

All steps