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 startGame() method.
-
0:00
Welcome back, Ashley here, ready to walk you through the solution for
-
0:03
the startGame method.
-
0:05
This is really exciting because once this method is complete,
-
0:07
our four in a row game will be completely viewable on-screen.
-
0:10
And this stage of game development will be complete.
-
0:13
As we move forward into the next stages of this course, we'll add interaction and
-
0:17
logic to the game, the parts that make it playable.
-
0:20
But completing this foundation work is a huge milestone and you should be proud.
-
0:25
Let's look at the start game solution and then load up the game in the browser.
-
0:30
Make sure you're are in the Game.js file.
-
0:31
Head to the start game method.
-
0:34
Your first step was to call the draw HTML Board method.
-
0:38
You were tasked with figuring out what object call this method on and
-
0:42
how to access this object.
-
0:43
How did you do?
-
0:44
If you recall, the board object is initialized in a games constructor method.
-
0:50
When a new game is created, so is a new board object, and
-
0:54
that board object is stored in the games board property.
-
0:58
So, we can access the board object inside the Game class using this.board.
-
1:03
From there, we can simply call the method.
-
1:05
Once this happens, the game's board will be drawn in the browser.
-
1:09
Next, we have to call the drawHTMLToken method on the activeToken.
-
1:15
Well, we wrote the getter method to find active token, but
-
1:18
how do we access that from inside the Game class?
-
1:20
Recall that you also wrote a getter method for the active player.
-
1:24
At the games beginning, you know the activePlayer is Player 1 because you set
-
1:29
the active property for Player 1 to true when you initialized that object.
-
1:34
But to access the active player in a dynamic way, we'll use the getter method.
-
1:39
this.activePlayer will return the player whose turn it is, and
-
1:44
this.activePlayer.activeToken will return the token object that's now in play.
-
1:50
Finally, we set the game's ready property to true, and that's it.
-
1:54
Take a moment to pause and make sure your startGame method matches what you see on
-
1:58
screen and celebrate your accomplishment.
-
2:00
Then comeback to see the game in its current state in the browser.
-
2:06
All right,
-
2:07
if you're ready to move forward drag your index.html file to a new browser tab.
-
2:12
Look at that, our game is loaded in the browser.
-
2:14
Let's see what happens when I click the Start game button.
-
2:18
Cool, our game board and token are here in our browser.
-
2:22
Of course, we can't interact with it yet, but that's okay.
-
2:25
Join me in the next stage to start building out that interactive
-
2:28
functionality.
-
2:29
Now if your game isn't loading properly, head to the Treehouse community and
-
2:33
reach out to your fellow students.
-
2:35
All of the project files for
-
2:36
each type of the course have been provided to you as well.
-
2:39
Feel free to go back and try to figure out where your code has diverged or
-
2:42
an error was made, or
-
2:44
simply start fresh with the correct code at the beginning of the next stage.
-
2:47
I've been having a lot of fun building this with you, and
-
2:50
I hope you're excited to keep going.
-
2:51
See you soon.
You need to sign up for Treehouse in order to download course files.
Sign up