Workshop › Bomberman-style Arena › Step 2 of 42
Two loops, one inside the other, visit every tile: for each row, every column. Each tile is painted as a green 32-pixel square, so the floor fills the arena.
```js
for (let r = 0; r < ROWS; r++) {
for (let c = 0; c < COLS; c++) {
const x = c * TILE
const y = TOP + r * TILE
ctx.fillStyle = '#3f6212'
ctx.fillRect(x, y, TILE, TILE)
}
}
```for (let r = 0; r < ROWS; r++) counts r from 0 to 10; the inner loop counts c from 0 to 12 for each r.r, column c starts at x = c * TILE and y = TOP + r * TILE pixels.At the end of the code, after an empty line, write the two loops.
Skills: Drawing on a canvas, Loops
← Measure the arena Draw it every frame →