- Making the Game Interactive
- handleKeydown() Solution 1:51
- Build the moveLeft() and moveRight() Methods
- moveLeft() and moveRight() Methods Solution 5:18
- Build the drop() Method
- drop() Method Animation Challenge Solution
- drop() Method Solution 2:40
- Build the playToken() Method
- playToken() Method Solution 3:43
- Reviewing 'Making the Game Interactive' 5 questions
Preview
Video Player
00:00
00:00
playToken() Method Solution
3:43See the solution for the playToken() method.
Hey, there.
Welcome back.
0:00
The playToken method is
the final step in this stage.
0:02
The amount you've accomplished so
far is huge.
0:05
I'm really excited to walk through
the playToken method with you, and
0:07
then load up a demo of what we've done so
far in the browser.
0:10
Let's get started.
0:13
Navigate to the game.js file.
0:15
The playToken method can be written
immediately below the handleKeyDown
0:17
method.
0:21
So the first thing I did in this
method was store some things
0:22
we'll be using throughout it in variables.
0:25
You don't have to do this, of course.
0:28
But in this case,
it made my code a lot easier to read and
0:29
a lot easier to write, too.
0:32
First, I declared
a variable called spaces.
0:34
This was set to this.board.spaces,
meaning the spaces variable now holds
0:37
a reference to the entire 2D array of
space objects representing the game board.
0:43
Next, I stored the active token in
the variable called activeToken.
0:49
Then, I declared a variable
called targetColumn.
0:54
We know what column
the active token is over.
0:57
If you recall,
1:00
this value is stored in the column
location property on the active token.
1:01
The column location value is an integer,
1:05
anywhere from zero to the total
number of columns minus 1.
1:08
By using the column location value
as an index of the spaces array,
1:12
we now have access to the target column.
1:17
Finally, I declared a variable called
targetSpace, which is set to null.
1:20
It's assigned to null because at
the beginning of this method we do
1:24
not have a target space.
1:28
It's in the next few lines that
we identify this target space.
1:29
So to do that, I've used the for
1:33
of loop to iterate through the individual
space objects in the target column array.
1:35
If the spaces token property is equal
to null, it means the space is empty.
1:41
Thus, it's a potential target.
1:45
We set our target space equal
to that potential space, and
1:48
then move on to the next
space in the array.
1:52
At the end of the for loop, the target
space variable will hold the lowest empty
1:54
space in that column,
which is now our target space.
1:59
Now, if at the end of the loop the target
space variable is still equal to null,
2:04
that means the column is full.
2:09
The for loop never found an empty
space in the target column.
2:12
If that's the case,
then nothing else should happen.
2:16
But if it's not the case, and we've
found a target space, then we simply set
2:18
the game's ready state to false, and
call the drop method on the active token,
2:23
passing in the target
space as a parameter.
2:28
We'll get back to
the callback function that we
2:30
talked about before in a future step.
2:33
Okay, that's all there is to it.
2:35
Our playToken method is complete.
2:37
Save all your files and
make sure your code matches up.
2:39
Now, it's time to see the demo.
2:42
I've got the game loaded
up in the browser here.
2:45
I'll hit the Begin button to register
that we're starting the game.
2:48
Now, we can see the board and
the first player's active token here.
2:51
I'm gonna use the right-arrow key to
move the active token across the board.
2:56
I'll use the left-arrow
key to move it back.
3:00
I'll pick this column here and
hit the down-arrow key to drop the token.
3:03
And there's our cool
bouncy animation effect.
3:08
Awesome.
3:10
But now what?
3:11
Where is the next token?
3:12
Shouldn't the other player
be able to take a turn?
3:14
We'll work out all that game logic that
comes after a token is dropped in the next
3:16
and final stage.
3:21
You should feel really proud
of how far this game has come.
3:22
We're almost to the finish line.
3:25
If you tried to demo your own game and
got an error, or something wasn't working,
3:27
you should take a break here,
and match up all your code.
3:31
If you like, it might be a good time to
open the project files for stage five so
3:34
you know you're working with
the right code moving forward.
3:38
Great work, and I'll see you soon.
3:41