I don't understand array statement

Question

I am following the 2D breakout game tutorial on the Mozilla website. There is a bit of code that I do not understand.

var brickRowCount = 3;
var brickColumnCount = 5;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;

var bricks = [];
for(c = 0; c < brickColumnCount; c++) {
    bricks[c] = []; // <-- here
    for(r = 0; r < brickRowCount; r++) {
        bricks[c][r] = { x: 0, y: 0 }; // <-- here
    }
}

I understand in general what the code does, however, there are a few lines that are unclear exactly what they do. According to the website, "We will hold all our bricks in a two-dimensional array. It will contain the brick columns (c), which in turn will contain the brick rows (r), which in turn will each contain an object containing the x and y position to paint each brick on the screen."

I have put comments next to the lines of code that I specifically do not understand. Can someone please clarify exactly what these statements mean?

Thank you

Answer 1

it is creating a multidimensional array, or another way to call it, an array of array.

Each element of the array is another array, so to access them you need to use multiple [] for each dimension.. And just like any other array, they need to be initialized.

So here

bricks[c] = [];

it is initializing for each element of array bricks an array

bricks[c][r] = { x: 0, y: 0 };

here is storing an object in the position r in the array bricks[c] (which means the element in the position c in array bricks is an array too)

Answer 2

Some comments that might help

// create a new empty array, `[]`, in `bricks` at position `c`
bricks[c] = []

// create a new brick, {x:0,y:0}, in `bricks[c]` at position `r`
bricks[c][r] = { x: 0, y: 0 };

Answer 3

bricks[c] is an array within the bricks array.

bricks[c][r] contains the coordinates of the brick.

It's creating the array bricks, then within it, it is creating an array of c and adding values using r .

Could write it like this for you to visualize: bricks[bricks[c][r]]

Answer 4

It says that at position (c,r) in the array a literal object is placed containing two fields: x and y . Both these fields have the value 0

The syntax {x: 0 ,y: 0} is a shorthand for creating an object containing two fields and assigning a value to these fields at the same time.

Answer 5

bricks[c] = [] sets array element number c to be an empty array.

Eg if you run the for loop without the second part:

var bricks = [];
for(c = 0; c < brickColumnCount; c++) {
   bricks[c] = [];
}

bricks will be [ [ ], [ ], [ ], [ ], [ ] ]

If you run the full code, bricks will be

[
  [ { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 } ],
  [ { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 } ],
  ...
]

Answer 6

Think of that as a matrix, where c is columns, r is rows, and x is the cell at intersection cr

c\r r0   r1   r2   ..  rn
c0  x00  x01  x02  ..  x0n
c1  x10  x11  x12  ..  x1n  
..  ..   ..   ..   ..  ..
cn  xn0  xn1  xn2  ..  xnn

The array has to be initialized (that is what presented in your code), that every cell of the array (matrix) will be assigned with a value and probably (just my guess) the value will be changed trough the events happening during the game, or they will be checked or both.