Workshop › 2048 › Step 1 of 26
Slide numbered tiles and merge equal ones to reach 2048. A 2D grid, a pure slide-and-merge function reused in four directions, and swipe input.
2048 is played on a 4×4 board: slide the tiles, merge equal ones, reach 2048. First the measurements and an empty board: a cream page with a square, brown board under a strip for the score.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const SIZE = 4
const GAP = 12
const CELL = (canvas.width - GAP * (SIZE + 1)) / SIZE // 85
const TOP = 60 // room for the score above the board
function draw() {
ctx.fillStyle = '#faf8ef'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = '#bbada0'
ctx.fillRect(0, TOP, canvas.width, canvas.width)
}
draw()
```canvas is the page's 400×460 canvas; ctx is its 2D drawing context (the "pen").SIZE cells per side, GAP pixels between cells. Across the 400-pixel width there are 5 gaps and 4 cells, so a
cell is (400 - 12 * 5) / 4 = 85 pixels.fillStyle picks a color and fillRect(x, y, w, h) fills a rectangle. The board is a square as wide as the canvas,
starting TOP pixels down.Write the code under the three comment lines, then press Run.
Skills: Drawing on a canvas