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

A grid of cells

What we are doing

The bubbles hang in rows. We keep them in a 2D array, grid[r][c]: a list of rows, each a list of cells. A cell holds a color number, or -1 when it is empty. A new game fills the top five rows with random colors.

```js
const COLS = 10 // bubbles in an even row; odd rows have one less and sit half a bubble to the right
const ROWS = 14

let grid // grid[r][c]: a color index, or -1 for an empty cell

function reset() {
  grid = []
  for (let r = 0; r < ROWS; r++) {
    grid.push([])
    for (let c = 0; c < COLS; c++) grid[r].push(r < 5 ? Math.floor(Math.random() * COLORS.length) : -1)
  }
}

reset()
```

What it means

grid starts as an empty list; each row pushes a new empty list, then fills it cell by cell.
Math.floor(Math.random() * COLORS.length) is a random whole number 0 to 4.
r < 5 ? ... : -1: the first five rows get a color, the others -1.
The comment on COLS already tells the plan for odd rows; we will get there soon.

Your turn

Under R write COLS and ROWS.
Under COLORS, leave an empty line and write let grid and reset.
Write reset() just above the last line, requestAnimationFrame(loop).

Skills: Arrays and objects

← One bubble Draw the grid →

All steps