Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Object-Oriented JavaScript: Challenge

Well done!

You have completed Object-Oriented JavaScript: Challenge!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

createSpaces() Method Solution

2:46 with Ashley Boucher

See the solution for the createSpaces() method.

Well done, 0:00
I hope you enjoyed working through the createSpaces method in the Board.js file. 0:01
Let's take a look at the solution. 0:06
First, you can see the documentation written for this method. 0:08
There's a summary line explaining that this method would generate a 2D array of 0:13
space objects. 0:17
And then there's a line indicating that an array will be returned, 0:18
followed by a description of the array. 0:21
The first step in this method is to create a variable called spaces that 0:23
holds an empty array. 0:28
This is the variable that will eventually be returned from the method. 0:29
After we create the variable, 0:33
we can go through the business of populating the array. 0:35
We know that the returned array should be a 2D array. 0:38
This means it's an array whose elements are also arrays. 0:42
The variable will hold an array of columns, 0:46
where each column is an array of individual space objects. 0:49
By setting it up this way, we can access each column of spaces as a whole, 0:53
which will be really helpful when it comes time to drop tokens. 0:57
So with that in mind, the first step is to create a for 1:01
loop that iterates through the number of columns. 1:04
Remember, the number of columns wias set in the constructor method and 1:07
can be accessed using this.columns. 1:13
Once we're inside the loop, we'll declare a new variable called column. 1:16
column is going to hold an array of the individual space objects in that column. 1:21
First, the column variable gets set to an empty array. 1:26
Then we write another for loop to iterate through the rows of that column. 1:29
Inside this nested for loop is where the new space objects are created. 1:34
We pass the space constructor method the value for the x and 1:39
y index of the for loops. 1:43
On the next line, we push the newly created space to the column array. 1:45
On each iteration through this nested for loop, 1:50
another space is added to the column. 1:52
After the column is complete, and the nested for loop is finished, 1:54
we push the entire column back into the spaces array. 1:59
Then the x index is increased by 1, and 2:02
the process continues until the entire board of spaces has been created. 2:04
After that, we return our array. 2:09
Don't forget about the method call, though. 2:12
At this point, we have to go back to our constructor method. 2:14
Make sure to adjust the spaces property so 2:17
then instead of being set to an empty array, it's set to the return value from 2:19
a call to the createSpaces method, like you see on the screen. 2:23
To clarify, this means that when the Board object is created, 2:27
all of the space objects are created as well. 2:30
Okay, that was pretty tough. 2:33
Nested for loops and two-dimensional arrays can be complicated to think about. 2:35
If you have any questions, head over to the Treehouse community. 2:39
All right, only two steps left and the foundation of our game is complete. 2:42