Workshop › Battleship › Step 4 of 35

Draw again and again

What we are doing

Shots will change the picture. We put the drawing in draw and redraw it about 60 times a second with a game loop.

```js
function draw() {
  ctx.fillStyle = '#0f172a'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  drawSea(SEA, BIG)

  ctx.fillStyle = 'white'
  ctx.font = 'bold 14px sans-serif'
  ctx.fillText('Your fleet', HOME.x, HOME.y - 10)
  drawSea(HOME, SMALL)
}

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

requestAnimationFrame(loop)
```

What it means

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

Your turn

Wrap the drawing lines at the bottom in function draw() { ... }, then write loop and the line that starts it.

Skills: The game loop

← Your own sea Grids and ships as lists →

All steps