Workshop › Candy Crush-style Match 3 › Step 2 of 29
Two loops, one inside the other, visit all 64 cells: the outer one the rows r, the inner one the columns c. Each
cell is a square in one of two shades, like a chessboard.
```js
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)
}
}
```for (let r = 0; r < N; r++) counts 0 to 7; inside, c counts 0 to 7 for each row.(r, c) starts at x = LEFT + c * SIZE, y = TOP + r * SIZE.% is the remainder: (r + c) % 2 is 0 on every other cell, so the colors alternate like a chessboard.condition ? a : b picks a if the condition is true, otherwise b.At the very end, leave an empty line and write the two loops.
Skills: Loops, Drawing on a canvas
← A place for the board The game loop →