"AJAX Basics (retiring)" was retired on February 5, 2020. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Object-Oriented JavaScript: Challenge!
You have completed Object-Oriented JavaScript: Challenge!
Preview
See the complete solution for the drop() method.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up