- 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
moveLeft() and moveRight() Methods Solution
5:18See the solution for the `moveLeft()` and `moveRight()` methods.
Hi again.
How was that challenge.
0:00
In this video we're going
to cover the solutions for
0:01
the offset left getter method and
the move left and move right method.
0:04
Let's start with the getter method.
0:08
Make sure you viewing
your token by JS file.
0:11
I like to keep all my getter
methods together inside a class, so
0:14
I added this method below
the HTML token getter method.
0:17
This is pretty simple one line method.
0:21
The HTML token itself is
accessed via the HTML token
0:24
getter method using this.htmlToken.
0:28
That returns the HTML element.
0:30
Then we can access the value
of the elements offset left
0:33
property with this.htmltoken.offsetleft.
0:37
The entire expression is then returned.
0:41
Let's move on.
As part of your assignment you
0:44
added a property to the token
class called columnLocation.
0:46
This tells us which column of the board
a token is in at any given time.
0:51
Initially it's set to 0 because all
tokens first appear in the left
0:55
most column of the board.
1:00
The move left and move right methods
update this column location value.
1:02
So let's start with moveLeft.
1:05
This method doesn't receive any arguments
and it doesn't return anything.
1:09
Obviously, if the token
is in the first column,
1:14
which is the left most column we don't
want it to be able to move any more left.
1:16
If we didn't check for this any time
a player hit the left arrow key,
1:20
the token would just keep
moving left in the browser,
1:24
floating randomly away from
the game board, not ideal.
1:27
So to fix this,
1:30
we write a simple if statement checking
if the column location is greater than 0.
1:31
As the token moves left and right across
the board, this value is updated so
1:35
we always know where the token is located.
1:39
Now if this condition passes and
the token is able to move to the left,
1:42
our next step is to update the left
position of the htmlToken element.
1:47
this.htmlToken.style.left is
how we access that value.
1:52
Then we set it equal to
the offsetleft value,
1:56
which we can get easily with our
getter method minus 76 pixels.
1:59
76 pixels is the entire width of a column.
2:04
This value is not derived from anything in
particular, it is a value that I pick so
2:08
that the board resized well and visually
appealing on a laptop sized browser.
2:13
Our next step is to update
the column location property.
2:18
Whatever its current value subtract 1 from
it to signify that the token has moved
2:23
one column to the left.
2:27
Okay, great job.
2:30
Take a moment to make sure the code
matches what you see on screen.
2:31
If your approach was different
share with others how you
2:35
tackled this is the Treehouse Community.
2:38
Okay, now let's move on
the the move right method.
2:40
This method is basically
an inverse of the moveLeft method.
2:43
One significant difference is that this
method receives an argument columns.
2:46
When the move right method is called from
inside the game class, the value for
2:52
the number of columns will be passed in.
2:56
We'll use this value to determine if the
token is in the last or right-most column.
2:59
If the token is in the last column,
3:05
we don't want it to move
any further to the right.
3:06
Our columnLocation counter starts at 0
instead of 1, which is why we're checking
3:09
that the column location is less than
the total number of columns minus 1.
3:14
Now just like in the moveLeft method,
3:21
we update the value of the left
position of the htmlToken.
3:23
But in this case we want to add 76 pixels,
not subtract them.
3:26
This moves the htmlToken farther
to the right on the board.
3:31
Then finally,
we update the column location property so
3:35
that it's increased by 1 to signify that
the token has moved 1 column to the right.
3:39
Okay, great work.
3:44
Pause here to match up your code and
then let's head back to game.js for
3:45
a moment to add in the method
calls to moveLeft and moveRight.
3:50
Inside the handleKeydown method in
the game class, you added an if statement.
3:54
We used comments as a placeholder for
future code inside the if statement.
3:58
Now we're ready to fill
in some of that code.
4:04
If the key pressed was the left arrow,
4:07
we'd like to call the moveLeft
method on the activeToken.
4:09
The activeToken is accessed as
a property on the activePlayer object,
4:14
which thanks to our getter method is
accessed as a property of the game object.
4:19
Don't forget that when we
call the moveRight method,
4:24
we have to pass in the number of columns.
4:27
The rationale for passing in this
value rather than using a static value
4:30
inside the method was that in the future,
the game could be refactored so
4:33
that the players could set the number
of columns and rows of the board.
4:37
Passing the value makes the game a little
more adaptable to that kind of change and
4:42
a little more modular.
4:46
The value for the total number of columns
can be accessed by this.board.column.
4:47
Remember, the board object is held
in a property of the game object.
4:54
The board object has
a property called columns,
4:58
where the number of columns is set.
5:00
Okay, awesome job.
5:02
In the next step,
you're going to write the method for
5:03
dropping the token object into a column.
5:06
I'm really excited.
5:09
This game is really
starting to come together.
5:10
I can't wait for us to demo the token
movement at the end of this stage.
5:13
See you soon.
5:16