Workshop › Puzzle Bobble-style Bubble Shooter › Step 4 of 31

Draw the grid

What we are doing

cellPos(r, c) turns a cell into a position on the canvas; all the geometry lives in this one function. Then draw visits every cell and draws the ones that are not empty. A strip at the top leaves room for the score.

```js
const TOP = 30 // room for the score

const cellPos = (r, c) => ({ x: R + c * 2 * R, y: TOP + R + r * 2 * R })

  ctx.fillStyle = '#312e81'
  ctx.fillRect(0, 0, canvas.width, TOP)

  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS; c++) {
      if (grid[r][c] < 0) continue
      const p = cellPos(r, c)
      drawBubble(p.x, p.y, grid[r][c])
    }
  }
```

What it means

Column c is R + c * 2R from the left: the first bubble touches the left edge. Row r starts under the strip.
cellPos returns an object { x, y }; it is in parentheses so the braces are not read as a function body.
Empty cells (< 0) are skipped with continue.

Your turn

Under ROWS write TOP.
Under let grid ..., leave an empty line and write cellPos.
In draw, replace the test bubble with the strip and the two loops. Press Run.

Skills: Drawing on a canvas, Loops

← A grid of cells Bubbles that nest →

All steps