Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Object-Oriented JavaScript: Challenge

Well done!

You have completed Object-Oriented JavaScript: Challenge!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

handleKeydown() Solution

1:51 with Ashley Boucher

See 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