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