Workshop › Candy Crush-style Match 3 › Step 3 of 29

The game loop

What we are doing

Gems will flash and fall, so the picture must be redrawn about 60 times a second. The drawing goes into draw, and loop calls it before every screen refresh.

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

  for (let r = 0; r < N; r++) {
    for (let c = 0; c < N; c++) {
      const x = LEFT + c * SIZE
      const y = TOP + r * SIZE
      ctx.fillStyle = (r + c) % 2 === 0 ? '#312e81' : '#3730a3'
      ctx.fillRect(x, y, SIZE, SIZE)
    }
  }
}

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

requestAnimationFrame(loop)
```

What it means

draw paints the background first, which wipes the previous picture, then the grid.
requestAnimationFrame(loop) asks the browser to run loop before the next screen refresh; loop asks again at its end, so it keeps running. The last line starts it.

Your turn

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

Skills: The game loop, Functions

← A checkered grid A board of random gems →

All steps