Workshop › Candy Crush-style Match 3 › Step 1 of 29
Swap neighbouring gems to line up three of a color. A starting board with no matches, finding runs with a Set, gravity with two pointers, cascades that score more and more, a state machine for flashing and falling, a hint found by trying every move, and a move budget.
The game is an 8 × 8 grid of gems, each cell 48 pixels. We work out where the grid goes on the 400 × 480 canvas, centred left to right with room above for the score, and paint the background.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const N = 8 // 8 by 8 gems
const SIZE = 48
const LEFT = (canvas.width - N * SIZE) / 2
const TOP = 72 // room for the score and the moves left
ctx.fillStyle = '#1e1b4b'
ctx.fillRect(0, 0, canvas.width, canvas.height)
```canvas is the page's canvas and ctx its 2D drawing context.N is the number of rows and columns, SIZE the cell size.LEFT is the empty space left of the grid: (400 − 384) / 2 = 8, so the grid is centred. TOP leaves 72 pixels for
the score line.fillStyle + fillRect(0, 0, width, height) paint the whole canvas.Write the lines under the three comment lines, then press Run.
Skills: Drawing on a canvas