- 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
drop() Method Solution
2:40See the complete solution for the drop() method.
Great work, I hope you enjoyed
the jQuery animation challenge.
0:00
Let's dive right into the solution for
the drop method.
0:03
Navigate over to your token.js file.
0:06
This is the final method we'll
be adding to the token class.
0:09
Right before the }, you can see I've added
my method documentation and declaration.
0:13
This method receives two arguments,
target, and reset.
0:18
Target is the actual space object
that the token is being dropped into.
0:23
That means we can access
all of its properties and
0:27
methods inside this drop method.
0:29
Reset is a callback function.
0:32
This is added into the code for
the animation.
0:34
When the animation has finished and
the HTML token has visually dropped into
0:37
the space on the board,
this function will be called.
0:41
It won't be called until
the animation is complete.
0:44
You haven't written the reset
callback function yet.
0:47
This will come up in the future step,
so don't worry about it now.
0:49
But like its name suggests, the reset
callback function resets the board and
0:52
gets the game ready for
the next player's turn.
0:57
After all, when a token is dropped,
that player's turn is over.
0:59
Remember, this drop method is called
on the active token when the player
1:04
presses the arrow down key.
1:08
So before we get to the animation,
1:10
let's be sure to change the value of the
active tokens dropped property to true.
1:12
By doing this we ensure that the next time
the game needs to find the active player's
1:18
unused tokens,
this token won't be included anymore.
1:23
Now below that we have
the jQuery animation code.
1:28
I won't go through this
in too much detail.
1:31
jQuery and
1:33
animation aren't things that you need to
know to be successful in this course.
1:34
It does add a really neat effect for
the players,
1:38
which is why it's included, but
don't get to hung up on it.
1:40
Basically, the active token's
HTML counterpart is animated so
1:44
that its top position value
is changed to a value equal
1:48
to the target spaces row,
times the target space's diameter.
1:53
For instance, if the target space is in
the fourth row of the board from the top,
1:58
and its diameter is 76 pixels,
the token needs to move down
2:03
4 times 76 pixels to be
inside the target space.
2:08
The number 750 is how many milliseconds
the animation should take.
2:13
And the easeOutBounce describes
how the animation looks.
2:17
Finally, you see your callback
function reset at the end.
2:21
Okay, great work, take a beat to
match up your code and go ahead and
2:25
discuss any questions you have
in the Treehouse community.
2:29
In the next step you'll be flushing
out a method called play token
2:32
in the game class.
2:35
And then finally we get
to demo the game so far.
2:36