- 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
handleKeydown() Solution
1:51See the solution for the handleKeydown() method.
Hey, welcome to stage four where we're
going to be adding in all of the player
0:00
interaction with the game.
0:04
In this video we're going to review
the handle key down method you
0:05
added to the game class and the event
listener you added to the app.js file.
0:09
Head to your Game.js style.
0:14
The handleKeyDown method was
put inside the game class,
0:17
right below the start game method.
0:20
Note that the method receives
the event object as an argument.
0:21
I've shortened the argument name to e.
0:25
This is the actual event
object that is passed to
0:28
the event listener
callback method in app.js.
0:31
First, I included an if statement to
check whether or not the game was ready.
0:35
Remember that the game object has a
property called ready that holds a true or
0:39
false value.
0:44
This method will move the active
token around the board but
0:44
we want to make sure it only does
that if the game is in a ready state.
0:48
So if this.ready will check if
the ready property is set to true.
0:51
Inside that if statement,
we'll check to see what key was pressed.
0:57
We can access that value with
the event objects key property.
1:01
This property returns a string of
the name of the key that was pressed.
1:05
First, the solution checks if the value
of the key property is ArrowLeft.
1:09
I've included just a comment here
indicating that we'll be writing
1:14
future code to handle
moving the token left.
1:18
Next, it checks if the key
value is ArrowRight.
1:20
And finally,
if the key value is ArrowDown.
1:24
In future steps, we'll go back and put
actual code in place of these comments.
1:27
Great work, now head over to app.js file.
1:32
The call back function in
the event listener receives
1:38
the event object as an argument.
1:41
Inside the call back,
simply call the handleKeyDown method you
1:43
just created on the game object,
and pass in that event.
1:47