# Cube Matcher: Step 2 Grid

In the second step of the Cube Matcher Project, I’m having trouble understanding how we’re making the grid. I’m not sure if I’m not understanding or if the phrasing is weird on it. Here’s what it says below:

Start by opening the Cube Matcher game in your browser and clicking on the start screen. You should see the game screen with a score displayed and a timer counting down, but with an empty grid with no actual cubes.

Scroll down the GameScene.js file until you find the method called `.makeBoard()` below the `.update()` function. `.makeBoard()` contains all the code needed to create a 12 by 12 board of colored cubes and display them in the browser – exactly what we need. However, `.makeBoard()` is missing some code.

Find the variable called `board` in `.makeBoard()` . This is a nested array that represents a grid of cubes, with each inner array representing a column of cubes. For example, a 2 x 2 grid would be:

``````[
['x', 'x'], // column 0
['x', 'x']  // column 2
]
``````

I found the the variable below:

``````makeBoard(size) {

// A nested array, inner arrays represent empty columns

const board = Array(size).fill(Array(size).fill('x'));

// Add code to fill board array with cube sprites and return it

return board.map((col, i) => {

});

}
``````

Hi,
I don’t know if you’ve figured this out by now but I hope so.

What you can find out about board:

you declare an empty global variable at the top: `let board;`

In the `create` function, there is a line (around line 28) that says `board = this.makeBoard(12);`
This is where you call the function that creates the grid of cubes. The (12) means that you are defining a playing board of 12 x 12 cubes.

Now we look at the function `makeBoard(size)`
From the call to this function in `create()` we know that the parameter `size` is 12.
So essentially we say:

1. make me a square playing board (a grid) that’s got 12 columns and 12 rows.
2. And fill each square with a clickable cube-object
3. Return me this cube-filled playing board so I can play the game

`const board = Array(size).fill(Array(size).fill('x'));`
This `const board` is a local variable within the function makeBoard. It translates as:

1. Give me board-array of 12 items: Array(size).fill(Array(size).fill(‘x’))
2. Fill every one of those 12 items with an array of 12 items: Array(size).fill(Array(size).fill(‘x’));
3. all these second arrays contain 12 strings ‘x’: Array(size).fill(Array(size).fill(‘x’));

the result: `const board = Array [Array ["x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x"], Array ["x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x"], Array ["x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x"], Array ["x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x"], Array ["x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x"], Array ["x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x"], Array ["x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x"], Array ["x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x"], Array ["x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x"], Array ["x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x"], Array ["x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x"], Array ["x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x", "x"]]`

Now all these “x” needs to be replaced by a clickable cube-object. A cube sprite That’s why you are asked to write those nested loops.
Board is now mappable because it is an array. Board contains a set of 12 itesms. Each item is a column. And every column contains 12 arrays, the rows.

From here you can follow the instructions of step 3 and 4 to replace every x with a cube by calling makeCube() for every x.

I hope this explains what is happening. Good luck!

1 Like