Workshop › Bomberman-style Arena › Step 4 of 42

The arena as data

What we are doing

The arena is a grid of characters: '#' a wall, '+' a crate, ' ' floor. grid is an array of rows, each row an array of 13 characters. makeGrid builds it with a wall all round and floor inside.

```js
let grid // grid[r][c]: '#' wall, '+' crate or ' ' floor

function makeGrid() {
  grid = []
  for (let r = 0; r < ROWS; r++) {
    grid.push([])
    for (let c = 0; c < COLS; c++) {
      if (r === 0 || c === 0 || r === ROWS - 1 || c === COLS - 1) grid[r].push('#')
      else grid[r].push(' ')
    }
  }
}

function reset() {
  makeGrid()
}

reset()
requestAnimationFrame(loop)
```

What it means

grid.push([]) adds a new, empty row; grid[r].push(...) adds a tile to the end of row r.
A tile on the first or last row or column is a wall: || means "or".
reset sets the game up; it is called once before the loop starts.

Your turn

Under the TOP line, after an empty line, write let grid, makeGrid and reset.
At the end, write reset() above requestAnimationFrame(loop).

Skills: Arrays and objects

← Draw it every frame Draw what the grid says →

All steps