Workshop › Bomberman-style Arena › Step 3 of 42
A game repaints its picture about 60 times a second. We put the drawing in draw and call it from a loop that asks
the browser for the next frame each time.
```js
function draw() {
ctx.fillStyle = '#0f172a'
ctx.fillRect(0, 0, canvas.width, canvas.height)
for (let r = 0; r < ROWS; r++) {
...
}
}
function loop() {
draw()
requestAnimationFrame(loop)
}
requestAnimationFrame(loop)
```draw holds the drawing; each call paints the whole picture again, background first.requestAnimationFrame(loop) runs loop before the next screen refresh; loop asks again each time. The last
line starts it.Wrap all the drawing (background and loops) in function draw() { ... }, then write loop and the line that starts
it.
Skills: The game loop, Functions
← A floor of tiles The arena as data →