1
00:00:00,500 --> 00:00:06,560
Now that we're able to track the key presses, we're also able to calculate and move our element around

2
00:00:06,560 --> 00:00:09,560
the page and this we can do by conditions.

3
00:00:09,560 --> 00:00:16,550
So checking to see if key and remember, we're passing that value of key into our function, our handle

4
00:00:16,550 --> 00:00:18,860
function and of those console messages.

5
00:00:19,110 --> 00:00:24,090
So we're still passing in the value of key and we're controlling which keys we're actually passing in.

6
00:00:24,710 --> 00:00:27,740
So checking to see if key equals left.

7
00:00:27,740 --> 00:00:30,980
And if it does, then we're going to take our box.

8
00:00:31,350 --> 00:00:38,090
So this is why we had it with a global variable where we can adjust the value of Box X accordingly and

9
00:00:38,090 --> 00:00:40,370
taking whatever the player speed is.

10
00:00:40,580 --> 00:00:46,330
And we know we set that one hundred, we're going to update that value and also moving it left.

11
00:00:46,340 --> 00:00:48,200
We see that we're updating.

12
00:00:48,200 --> 00:00:50,120
We can update the square value.

13
00:00:50,390 --> 00:00:54,440
So whenever we're moving left, we're subtracting one of the values off the square.

14
00:00:54,450 --> 00:00:57,830
So four at one and obviously we can't move past one.

15
00:00:57,830 --> 00:01:01,370
But if we were at two and we moved left, then we would go to one.

16
00:01:01,550 --> 00:01:05,970
And that's why moving left subtracts one off of the square value.

17
00:01:05,990 --> 00:01:09,970
Let's also do the or the opposite for right movement.

18
00:01:10,310 --> 00:01:14,060
So if we're going right, then this is what we want to happen.

19
00:01:14,270 --> 00:01:16,270
And this is essentially the opposite.

20
00:01:16,640 --> 00:01:21,970
So we're going to increment it by one and we'll do the the vertical as well afterwards.

21
00:01:22,220 --> 00:01:29,060
So taking that value of box style styles from that's still that global object where the player is and

22
00:01:29,060 --> 00:01:30,650
setting the left value.

23
00:01:31,070 --> 00:01:35,960
And we could equal out to whatever the value of Box X is, because this is where our controller value

24
00:01:35,960 --> 00:01:40,040
is and we're going to update that style property for it.

25
00:01:40,340 --> 00:01:42,810
And it's as easy as that to create that type of movement.

26
00:01:42,830 --> 00:01:48,530
So now whenever I click left or I click right, we see that we've got the movement happening.

27
00:01:48,740 --> 00:01:54,450
So just we need to do the same thing now for our top and bottom or up and down.

28
00:01:54,500 --> 00:01:55,820
So instead of right.

29
00:01:56,150 --> 00:02:03,590
Let's take up take our box y instead of we're still taking the player speed and the player square,

30
00:02:03,730 --> 00:02:05,840
this, this one's going to be a little bit different.

31
00:02:06,230 --> 00:02:09,940
So we need to subtract the value of it.

32
00:02:10,010 --> 00:02:12,530
Remember, we have that dimensions of the board.

33
00:02:12,710 --> 00:02:17,180
So game box X because X has a value of eight.

34
00:02:17,420 --> 00:02:21,850
If we subtract the value of eight, then that's going to move us up a line.

35
00:02:22,070 --> 00:02:25,510
So basically 19 would go to 11, 11 would go to three.

36
00:02:25,760 --> 00:02:27,170
So that's exactly what we want.

37
00:02:27,440 --> 00:02:30,110
And we want to do the opposite for down.

38
00:02:30,140 --> 00:02:35,090
So if it's down, then we're going to increase by player speed.

39
00:02:35,090 --> 00:02:42,320
So that's the still the one hundred and we're going to increment by the value of Jambox X and also let's

40
00:02:42,320 --> 00:02:47,450
output the value of Player Square so that we can actually see which square we're on.

41
00:02:47,870 --> 00:02:48,830
So let's see what happens.

42
00:02:48,860 --> 00:02:55,130
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

43
00:02:55,130 --> 00:02:56,840
got to update the top property.

44
00:02:57,230 --> 00:02:59,210
But at least the calculations were working.

45
00:02:59,220 --> 00:03:04,580
So instead of left, we need to do top and instead of box X, let's add in box.

46
00:03:04,700 --> 00:03:06,860
So now refresh and down.

47
00:03:06,860 --> 00:03:08,660
And I think I actually got those reversed.

48
00:03:08,690 --> 00:03:15,330
So this one should be up and that one should be down because, of course, we're increasing and decreasing.

49
00:03:15,350 --> 00:03:16,580
So try that one more time.

50
00:03:16,640 --> 00:03:21,560
So now if we go down and this should be also reversed, just a quick fix there.

51
00:03:21,590 --> 00:03:25,640
And you can see by the math there that it's not it wasn't calculating it properly.

52
00:03:25,650 --> 00:03:33,320
So now when I click down, we should move to nine and ten eighteen and we can go back to ten to and

53
00:03:33,320 --> 00:03:35,390
so on so we can move through all of the squares.

54
00:03:35,390 --> 00:03:39,170
And there's one thing that you might have just noticed that I can actually go off of the grid.

55
00:03:39,380 --> 00:03:43,000
So we need to create some restrictions so that we can do in the upcoming lesson.

56
00:03:43,310 --> 00:03:49,210
So for now, set up the movement of the element and also calculating of the square that we're on.

57
00:03:49,430 --> 00:03:53,030
So that makes sure that it corresponds with the actual square that's red.

58
00:03:53,150 --> 00:03:58,940
And then coming up next, will add in the restrictions so that the player can't go out of our boundary

59
00:03:58,940 --> 00:03:59,290
area.

60
00:03:59,480 --> 00:04:00,530
So that's coming up next.