1
00:00:00,300 --> 00:00:05,850
Welcome back, and this is the lesson you've all been waiting for, where we're going to make some something

2
00:00:05,850 --> 00:00:10,860
happen on screen, we're going to take our car that we're creating that div that we've just created

3
00:00:10,950 --> 00:00:12,390
and we're going to move it around on the screen.

4
00:00:12,660 --> 00:00:17,940
So there's a few things that we need to add and prepare for adding it in as a position absolute.

5
00:00:18,150 --> 00:00:25,650
So of course, with success position absolute gives us the ability to provide left top coordinates for

6
00:00:25,830 --> 00:00:30,390
the positioning of an element we can also position at from bottom.

7
00:00:30,400 --> 00:00:31,080
So do that.

8
00:00:31,530 --> 00:00:39,360
And for now we're going to set bottom to be 100 picks and we'll also position our left position.

9
00:00:39,690 --> 00:00:42,720
So our left position by default will be 200 picks.

10
00:00:43,710 --> 00:00:48,450
Also going to take the opportunity to set a width of this particular element.

11
00:00:48,840 --> 00:00:57,120
So setting the width of the element to be and setting the height of the element to be 150 picks, also

12
00:00:57,120 --> 00:00:58,150
background color.

13
00:00:58,170 --> 00:01:03,060
So once I'm adding in content here, so we'll have our little blue car and I think I'm actually going

14
00:01:03,060 --> 00:01:04,520
to make this a little bit smaller.

15
00:01:04,980 --> 00:01:10,160
And now next, what we want to do is add that class into the element that we just created.

16
00:01:10,530 --> 00:01:14,430
So where we've got our car that we created in the last lesson.

17
00:01:14,460 --> 00:01:18,680
This is a car object of the div that we're creating dynamically.

18
00:01:18,720 --> 00:01:23,430
We're going to use set, attribute and attribute that we're setting is a class.

19
00:01:23,430 --> 00:01:28,860
So you can do this if you don't have any classes already added to that element, you can just set a

20
00:01:28,860 --> 00:01:32,870
default class in the class so they to be setting is car the one that we just created.

21
00:01:32,880 --> 00:01:33,510
So let's try that.

22
00:01:34,020 --> 00:01:40,820
So there's our blue dot or blue square and we want to ultimately now move that around the page.

23
00:01:41,310 --> 00:01:44,360
So we see that that's a fairly long and big car.

24
00:01:44,400 --> 00:01:49,290
I'm going to make the smaller because I do have the screen zoomed in so I can zoom out a little bit

25
00:01:49,290 --> 00:01:52,470
on the screen so that it's a little bit more manageable.

26
00:01:52,620 --> 00:01:56,940
And while that is a long car, so I don't want to make it a limo or anything like that.

27
00:01:57,150 --> 00:01:58,910
So I'm going to shorten that a little bit.

28
00:01:59,280 --> 00:02:05,940
There's our car and we want to move this element around depending on what keys are being pressed and

29
00:02:05,940 --> 00:02:10,700
where already have the play game function operating that we set up in the earlier lesson.

30
00:02:10,950 --> 00:02:17,340
So now it's a matter of determining what a key is pressed and updating that element position.

31
00:02:18,180 --> 00:02:24,810
So selecting our element, we've got our request animation so we can keep that at the end and now we

32
00:02:24,810 --> 00:02:26,370
need to apply some conditions.

33
00:02:27,210 --> 00:02:28,710
And within our conditions.

34
00:02:30,090 --> 00:02:36,930
We're going to check to see the value of keys, so using that key object, we've got several option

35
00:02:36,960 --> 00:02:37,680
objects there.

36
00:02:37,680 --> 00:02:43,980
So we've got a key up to selecting the element using the document object query selector, and we're

37
00:02:43,980 --> 00:02:46,200
selecting the element with a class of car.

38
00:02:46,200 --> 00:02:47,510
So that's the one that we just created.

39
00:02:47,550 --> 00:02:52,820
So now that we have it, so we need to also add in to our X and Y coordinates.

40
00:02:53,100 --> 00:02:59,070
So taking the player object, we're going to have a value for Y you're going to increment this value

41
00:02:59,070 --> 00:03:03,690
with for now, let's do a value of five and we can also set a value.

42
00:03:03,960 --> 00:03:11,250
We can set a speed value there and then we can use that speed in order to control how fast we're element

43
00:03:11,250 --> 00:03:11,840
is moving.

44
00:03:11,860 --> 00:03:16,370
And as we're building it out, we're going to grab the X and Y coordinates of this particular object.

45
00:03:16,380 --> 00:03:18,330
So Arrow Down is going to decrease.

46
00:03:18,330 --> 00:03:23,060
That arrow left is going to update the player position.

47
00:03:23,370 --> 00:03:29,760
So decreasing the X coordinates arrow right is going to increase the X coordinates.

48
00:03:30,010 --> 00:03:34,500
So we've got a variable that we're tracking in the background that's going to be player X and player

49
00:03:34,500 --> 00:03:38,250
Y, and I'll show you how to add that as well into our object.

50
00:03:38,790 --> 00:03:50,070
And so as we're generating the car, we can take our player X value and set it by calculating where

51
00:03:50,070 --> 00:03:56,820
the car object is and getting its offset position so we can get its offset left position.

52
00:03:57,570 --> 00:04:05,820
And we need to do that after and then player y value is going to be car and we're going to use offset

53
00:04:06,180 --> 00:04:12,390
top position and we'll consolmagno the value of players so that we can see what the value here is.

54
00:04:12,630 --> 00:04:17,880
So when we start the game, preset some value and you can see that all the way up here that we're setting

55
00:04:17,880 --> 00:04:21,990
the value of X to two hundred and Y to 280.

56
00:04:22,110 --> 00:04:26,310
And this is actually going to correspond with the positioning of this particular element.

57
00:04:26,500 --> 00:04:31,780
Now that we know which key is being pressed, we can adjust the position of that particular element.

58
00:04:32,190 --> 00:04:40,890
So now it's a matter of taking the car and updating that element style, updating its left position

59
00:04:41,460 --> 00:04:48,240
to be equal to player X plus so that those are always matching.

60
00:04:48,900 --> 00:04:58,470
And we'll take also player style and top position and equal that to player Y plus picks.

61
00:04:58,970 --> 00:05:00,860
And you can also double those as well.

62
00:05:00,870 --> 00:05:01,670
So let's try that out.

63
00:05:02,250 --> 00:05:09,470
So now when I press my arrows up and down and actually down is moving it up.

64
00:05:09,660 --> 00:05:14,840
So we need to adjust that that up and down.

65
00:05:14,850 --> 00:05:17,080
So that was a little bit of an adjustment there.

66
00:05:17,370 --> 00:05:25,440
So now whenever I press and I can move up, arrow down, arrow left, right, I can also move them together

67
00:05:25,440 --> 00:05:28,740
at the same time and have multiple combinations of movements.

68
00:05:29,140 --> 00:05:34,740
So this is how you can create an element that moves around on the page depending on what arrows are

69
00:05:34,740 --> 00:05:35,760
being pressed.

70
00:05:36,150 --> 00:05:38,660
So coming up next, we need to extend on the gameplay.

71
00:05:38,850 --> 00:05:42,540
So go ahead and add this into your project, try it for yourself.

72
00:05:42,540 --> 00:05:48,450
And it's a matter of tracking those positions and then we can update them over here.

73
00:05:48,570 --> 00:05:54,840
And it's if we need to make some additional updates to these values, that's why I kept them separate,

74
00:05:55,080 --> 00:05:58,920
because we could have as well tracked the position, current position of car.

75
00:05:59,310 --> 00:06:03,840
But I usually find doing it this way is a little bit more easier and it's a little bit more clear as

76
00:06:03,840 --> 00:06:05,970
to what's happening and easier to read.

77
00:06:06,150 --> 00:06:11,790
So that's why I introduced that second variable under player where we're setting that value to wherever

78
00:06:11,790 --> 00:06:16,080
that particular element is located, off the offset left and offset top.

79
00:06:16,200 --> 00:06:21,990
And then I'm introducing that positioning so that both of those match and we're updating the player

80
00:06:21,990 --> 00:06:26,040
X and player Y position instead of the car position directly.

81
00:06:26,770 --> 00:06:28,380
So go ahead and add this into your project.