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