Workshop › 2048 › Step 2 of 26

Sixteen cells

What we are doing

Where does a cell go? cellX(col) and cellY(row) turn a column and a row into pixels. Two nested loops draw all 16 empty cells.

```js
function cellX(col) {
  return GAP + col * (CELL + GAP)
}

function cellY(row) {
  return TOP + GAP + row * (CELL + GAP)
}

  for (let row = 0; row < SIZE; row++) {
    for (let col = 0; col < SIZE; col++) {
      ctx.fillStyle = '#cdc1b4'
      ctx.fillRect(cellX(col), cellY(row), CELL, CELL)
    }
  }
```

What it means

Each cell takes CELL + GAP pixels, after a first GAP at the left: column 0 is at 12, column 3 at 303.
cellY does the same downwards, starting below the TOP strip.
The outer loop runs over the 4 rows, the inner one over the 4 columns of each row: 16 cells.

Your turn

Above function draw() { write cellX and cellY.
In draw, under the board's fillRect, leave an empty line and write the two loops.

Skills: Loops, Drawing on a canvas

← The board A grid of numbers →

All steps