Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
See the solution for the Board and Space class constructor methods.
Template Literals
Template literals are an easier way to create a string that has embedded expressions, like a variable, for example.
Previously, you'd have to concatenate a string to a variable like this:
const name = "Ashley"
const newString = "Hello my name is " + name;
With template literals, you can do the same in an easier fashion. Template literals are enclosed in backticks instead of single or double quotes like a regular string. The embedded expression is wrapped in curly braces, and preceded with a dollar sign, right inside the string.
const name = "Ashley"
const newString = `Hello my name is ${name}`;
Solution Code
Board Class Constructor Method
constructor() { this.rows = 6; this.columns = 7; this.spaces = []; }
Space Class Constructor Method
constructor(x, y) {
this.x = x;
this.y = y;
this.id = `space-${x}-${y}`;
this.token = null;
}
-
0:00
Welcome back, let's talk about the Board and Space constructor methods.
-
0:03
Jump over to the Board.js file.
-
0:06
You should feel pretty confident with class declarations at this point in
-
0:09
this course.
-
0:10
But just in case, double-check your syntax against mine.
-
0:14
The constructor method for the Board.js file is pretty simple, so as you can see,
-
0:18
I've preloaded the solution.
-
0:20
You might have noticed that no arguments are passed to the constructor method.
-
0:23
This is because each game will only have one Board object, and
-
0:26
we're statically setting the number of rows and columns.
-
0:29
In future more advanced versions of this game, we could design it so
-
0:33
that the user could set the board size to any number of rows and columns.
-
0:36
And all aspects of the game would be adjusted as needed.
-
0:39
A feature like that would add many layers of complication to the game.
-
0:43
But if you're feeling adventurous after this course,
-
0:46
I really recommend that you give it a try.
-
0:48
In the meantime, we're going to stick with 6 rows and 7 columns, and
-
0:52
set those figures in the Board constructor method.
-
0:55
Now I've set the spaces property to an empty array.
-
0:59
This should seem really similar to how you define the tokens property inside
-
1:03
the Player class constructor method.
-
1:05
In the next step, you're going to build the method that generates the spaces to
-
1:09
populate this array, and set this property to the return value from that method call.
-
1:13
But for now, just keep the property value set to the empty array.
-
1:18
Once your constructor method for the Board class matches what you see on screen,
-
1:22
head over to the Space.js file.
-
1:24
And keep watching to see the solution for the Space class constructor method.
-
1:30
This constructor method is a bit more complicated than the Board class
-
1:33
constructor, so we'll code it together.
-
1:35
Hopefully your class declaration matches mine, but if not, pause here and
-
1:40
take a moment to sync up.
-
1:41
So inside the Space class declaration, I'm going to write in an empty constructor.
-
1:49
The first two properties we will define in the construction method are x and y.
-
1:53
These are the coordinate values of the Space on the board,
-
1:57
this way we know what Space object is located where.
-
2:00
This is really important to know when it comes time to dropping tokens into
-
2:04
the board.
-
2:04
When we create the Space objects in the creator method in the next step,
-
2:08
we'll be passing these values in.
-
2:10
So for now, I'll set the constructor method up to receive the x and
-
2:13
y values and set the properties
-
2:21
Let's talk about the id property now.
-
2:24
If you recall, the token objects we built previously have HTML representations that
-
2:28
needed unique identifiers, so they could be styled with CSS or
-
2:32
manipulated with JavaScript.
-
2:34
The Space objects are no different.
-
2:36
So the id property for the Space objects will be set to a template literal that is
-
2:41
a concatenation of the word space and the Space's x and y property values.
-
2:46
Template literals make it easy to create string values that use variables inside
-
2:50
the string.
-
2:51
For a template literal to work, it needs to be enclose in back ticks.
-
2:54
Note the difference between a back tick and a regular single quotation mark.
-
2:58
The final property to set right now is the token property.
-
3:02
The token property is way to represent whether or
-
3:05
not a given Space is holding a token.
-
3:07
In other words,
-
3:08
it's a way to tell if a token has been dropped in to that particular Space.
-
3:12
Since the board is empty of tokens when the game begins,
-
3:16
each Space will have a null value for the token property.
-
3:19
Eventually, when a token is dropped into a Space, the value for
-
3:23
that Space's token property will be set to the token object the space contains.
-
3:28
Okay, great job.
-
3:29
By now, you've declared all five of the classes that we'll use to run the game.
-
3:34
You've also built the constructor methods for four of these classes.
-
3:37
The building blocks of this game are quickly coming together.
-
3:40
I encourage you to take a moment and check out the Treehouse Community to chat with
-
3:44
other students about the game's design.
-
3:46
Things you would've done differently, or things you're not sure about.
-
3:49
If you're able to help answer any fellow students questions,
-
3:52
I really encourage that too.
-
3:54
When you're ready, head to the next step to build the create spaces method.
You need to sign up for Treehouse in order to download course files.
Sign up