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, i) => {




Can someone please help me understand so I can move on? I appreciate any help!

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