Now that we're able to track the key presses, we're also able to calculate and move our element around
the page and this we can do by conditions.
So checking to see if key and remember, we're passing that value of key into our function, our handle
function and of those console messages.
So we're still passing in the value of key and we're controlling which keys we're actually passing in.
So checking to see if key equals left.
And if it does, then we're going to take our box.
So this is why we had it with a global variable where we can adjust the value of Box X accordingly and
taking whatever the player speed is.
And we know we set that one hundred, we're going to update that value and also moving it left.
We see that we're updating.
We can update the square value.
So whenever we're moving left, we're subtracting one of the values off the square.
So four at one and obviously we can't move past one.
But if we were at two and we moved left, then we would go to one.
And that's why moving left subtracts one off of the square value.
Let's also do the or the opposite for right movement.
So if we're going right, then this is what we want to happen.
And this is essentially the opposite.
So we're going to increment it by one and we'll do the the vertical as well afterwards.
So taking that value of box style styles from that's still that global object where the player is and
setting the left value.
And we could equal out to whatever the value of Box X is, because this is where our controller value
is and we're going to update that style property for it.
And it's as easy as that to create that type of movement.
So now whenever I click left or I click right, we see that we've got the movement happening.
So just we need to do the same thing now for our top and bottom or up and down.
So instead of right.
Let's take up take our box y instead of we're still taking the player speed and the player square,
this, this one's going to be a little bit different.
So we need to subtract the value of it.
Remember, we have that dimensions of the board.
So game box X because X has a value of eight.
If we subtract the value of eight, then that's going to move us up a line.
So basically 19 would go to 11, 11 would go to three.
So that's exactly what we want.
And we want to do the opposite for down.
So if it's down, then we're going to increase by player speed.
So that's the still the one hundred and we're going to increment by the value of Jambox X and also let's
output the value of Player Square so that we can actually see which square we're on.
So let's see what happens.
So now if I move left, I'm on two down, I'm on ten, but it's not moving down and that's because we've
got to update the top property.
But at least the calculations were working.
So instead of left, we need to do top and instead of box X, let's add in box.
So now refresh and down.
And I think I actually got those reversed.
So this one should be up and that one should be down because, of course, we're increasing and decreasing.
So try that one more time.
So now if we go down and this should be also reversed, just a quick fix there.
And you can see by the math there that it's not it wasn't calculating it properly.
So now when I click down, we should move to nine and ten eighteen and we can go back to ten to and
so on so we can move through all of the squares.
And there's one thing that you might have just noticed that I can actually go off of the grid.
So we need to create some restrictions so that we can do in the upcoming lesson.
So for now, set up the movement of the element and also calculating of the square that we're on.
So that makes sure that it corresponds with the actual square that's red.
And then coming up next, will add in the restrictions so that the player can't go out of our boundary
area.
So that's coming up next.