1
00:00:00,240 --> 00:00:05,400
Hey, are you ready for another challenge, challenge number three, and I call this one keyboard mover

2
00:00:05,520 --> 00:00:09,000
where you're going to use JavaScript in order to create an element.

3
00:00:09,010 --> 00:00:15,390
So whenever the DOM content has loaded, then you create an element on the page and then using that

4
00:00:15,390 --> 00:00:22,470
listeners for the key down and key presses, take those key presses and move the element around the

5
00:00:22,470 --> 00:00:25,850
page, depending on if which arrow key is being pushed.

6
00:00:26,130 --> 00:00:34,650
So if the arrow key up is being pushed and the player moves up along the vertical axis and then X or

7
00:00:34,650 --> 00:00:40,020
the left or the right along the horizontal axis and do this all using JavaScript.

8
00:00:40,200 --> 00:00:42,810
And I've got some starter code for you posted here.

9
00:00:42,990 --> 00:00:49,470
So add into that Lessner for the key down function and then taking those key presses and applying the

10
00:00:49,470 --> 00:00:52,050
movement appropriate to the element.

11
00:00:52,290 --> 00:00:59,400
And you can create the element into the player object using player as well as the contents of the elements,

12
00:00:59,490 --> 00:01:04,260
just like the example down here, and then update the style properties of the element.

13
00:01:04,680 --> 00:01:09,420
You can pause the video and also give you a quick sneak peek at the source code that we're going to

14
00:01:09,420 --> 00:01:10,180
be walking through.

15
00:01:10,350 --> 00:01:15,990
So positive you here, try this out and I'll walk you through the solution coming up.

16
00:01:16,080 --> 00:01:22,020
And this is all I can note, that this is all just a JavaScript that's creating this on your marks.

17
00:01:22,020 --> 00:01:24,320
Get your editor ready and let's do this.

18
00:01:24,570 --> 00:01:26,490
So, first of all, let's create an object.

19
00:01:26,500 --> 00:01:29,700
So this object is going to contain all of the player information.

20
00:01:29,940 --> 00:01:36,390
You can set some default parameters in here where we've got value for speed and let's set speed at one

21
00:01:36,390 --> 00:01:36,830
hundred.

22
00:01:37,110 --> 00:01:39,660
We can have our starting value for X.

23
00:01:39,990 --> 00:01:45,750
Also set this one hundred and starting value for Y, also set it up one hundred.

24
00:01:45,900 --> 00:01:50,640
So now when I look at player, you see that I've got all of that object information and we're going

25
00:01:50,640 --> 00:01:52,730
to use this when we create the element.

26
00:01:52,750 --> 00:01:55,830
So this is all going to be created dynamically using JavaScript.

27
00:01:56,110 --> 00:02:01,640
So we want to make sure that we are ready and adding an event listener to the document or we could add

28
00:02:01,660 --> 00:02:02,650
to the window object.

29
00:02:03,030 --> 00:02:06,630
Let's go ahead and still add it to the window object out event listener.

30
00:02:06,780 --> 00:02:11,220
And that we're listening for in this case is dom content.

31
00:02:12,270 --> 00:02:18,180
And whatever this gets, whatever the DOM is ready, we're going to invoke a function called build.

32
00:02:18,540 --> 00:02:19,620
Let's create that function.

33
00:02:19,620 --> 00:02:22,830
So build and we've got no parameters were passing in.

34
00:02:23,100 --> 00:02:27,440
So we're constructing an element for the page and this is the element that's going to move around.

35
00:02:27,780 --> 00:02:36,630
So taking the player L so this is a new part of that player object and then using document create elements,

36
00:02:37,200 --> 00:02:42,960
let's create div and then we can update also player X and player Y.

37
00:02:42,990 --> 00:02:47,430
We already have these set, so you don't necessarily need to have this unless you want to have this

38
00:02:47,430 --> 00:02:50,490
all and maybe create the object and create the separately.

39
00:02:50,670 --> 00:02:53,120
So it gives you some more flexibility doing it this way.

40
00:02:53,490 --> 00:02:54,410
So I've added it in.

41
00:02:54,690 --> 00:03:03,060
So taking the L so player L is going to be that freshly created element and we can then set style properties

42
00:03:03,060 --> 00:03:03,380
to it.

43
00:03:03,780 --> 00:03:06,680
So we need to set its position as absolute.

44
00:03:06,960 --> 00:03:14,370
So this will give us the ability to move it around the screen so that when I refresh and I go to player,

45
00:03:14,520 --> 00:03:18,750
you can see in player I've got the start of that element that I'm creating.

46
00:03:18,760 --> 00:03:23,160
So this is that dynamic element that's being created and we don't have it on the screen yet, but we

47
00:03:23,160 --> 00:03:27,950
need to apply some more properties to it before we add it to the screen.

48
00:03:28,230 --> 00:03:33,810
So updating its style, we should give it a width so that we can actually see it, of course, and a

49
00:03:33,810 --> 00:03:35,100
width of hundred picks.

50
00:03:35,130 --> 00:03:36,270
So how about 100 picks?

51
00:03:36,270 --> 00:03:41,040
Because we've been using picks for everything, style and height as well.

52
00:03:41,050 --> 00:03:41,970
So you guessed it.

53
00:03:41,970 --> 00:03:43,980
One hundred picks for this one as well.

54
00:03:44,610 --> 00:03:48,290
So now we've got style properties for that element.

55
00:03:48,450 --> 00:03:53,910
Also, let's create a background color for it so that we can actually distinguish it from the rest of

56
00:03:53,910 --> 00:03:54,350
the page.

57
00:03:54,630 --> 00:04:00,630
So again, selecting that element that we created and background color and the background color, it

58
00:04:00,630 --> 00:04:01,230
can be red.

59
00:04:01,440 --> 00:04:05,820
And if you want bonus points, you can generate a random background color because I know you know how

60
00:04:05,820 --> 00:04:06,350
to do that.

61
00:04:06,780 --> 00:04:07,790
And then player.

62
00:04:08,160 --> 00:04:11,820
And then lastly, we just need to position it on the page.

63
00:04:12,030 --> 00:04:13,720
So updating its style.

64
00:04:13,740 --> 00:04:21,510
So now we've got quite a lot of style going on here and taking player X value and just adding pics to

65
00:04:21,510 --> 00:04:23,930
it because it's expecting a string value here.

66
00:04:24,300 --> 00:04:26,490
So that's the player top position.

67
00:04:26,820 --> 00:04:33,620
And then also we need to set its player left position and using player y value within the object.

68
00:04:34,290 --> 00:04:38,550
And then lastly, let's add it to the page so that we can actually see this element.

69
00:04:38,850 --> 00:04:45,870
So append child and then passing in the element that we want it to append is within the player element.

70
00:04:46,290 --> 00:04:47,430
So let's see what happens.

71
00:04:47,430 --> 00:04:49,800
And there we've got our player.

72
00:04:50,040 --> 00:04:54,870
So this is being built whenever the document object is running.

73
00:04:54,870 --> 00:04:59,430
And we did have some starter code that I am going to do a quick walk through in order to add.

74
00:04:59,570 --> 00:05:05,120
Keyboard event listeners and the only event listener that we're adding to the document object, adding

75
00:05:05,120 --> 00:05:09,220
an event, listener and event that we're listening for is key down.

76
00:05:09,830 --> 00:05:14,800
So whenever the key is pressed down, then we're going to be invoking this function.

77
00:05:14,990 --> 00:05:18,800
And this also can be an anonymous function passing in the event object.

78
00:05:18,980 --> 00:05:26,090
And then we can get the key value that was pressed within the event object using key code and for now

79
00:05:26,090 --> 00:05:28,950
a console log, whatever the value of key is.

80
00:05:29,990 --> 00:05:35,930
So now when we refresh and I'm pressing the arrow keys sets up down left right now we just need to apply

81
00:05:35,930 --> 00:05:39,260
conditions so that we can move the element around accordingly.

82
00:05:39,650 --> 00:05:44,690
So we're checked to see if key is equal to thirty seven.

83
00:05:45,500 --> 00:05:54,730
And if it is, then what we want to do is take player X and subtract from it the player speed value.

84
00:05:54,740 --> 00:05:55,820
So it's all dynamic.

85
00:05:56,180 --> 00:05:57,770
So we've got the speed set there.

86
00:05:57,770 --> 00:06:00,010
So it's easy to adjust if the need is there.

87
00:06:00,860 --> 00:06:02,460
Let's account for the other keys.

88
00:06:02,460 --> 00:06:08,210
So we've got the four other keys, so we've got thirty seven and so thirty seven.

89
00:06:08,210 --> 00:06:10,360
If we're clicking that's the left key.

90
00:06:10,790 --> 00:06:16,970
Thirty eight is up, thirty nine is right and forty is down, so thirty eight is going to be up.

91
00:06:16,970 --> 00:06:19,700
So we need to affect the player y values.

92
00:06:19,750 --> 00:06:23,400
That's the player y axis and we're subtracting on that one as well.

93
00:06:23,690 --> 00:06:28,100
Thirty nine is going to be going back to the x axis instead of subtracting.

94
00:06:28,100 --> 00:06:28,760
We're adding.

95
00:06:29,030 --> 00:06:34,070
I think this part is fairly straightforward, that we're pressing the keys and depending on which key

96
00:06:34,070 --> 00:06:41,060
is pressed, we're updating the value of the player X and the player Y and then all we need to do is

97
00:06:41,240 --> 00:06:46,700
reset those values of the player element because we still have it within the player object that tied

98
00:06:46,700 --> 00:06:47,450
to that element.

99
00:06:47,630 --> 00:06:51,430
So all we need to do is update the value of player left.

100
00:06:51,950 --> 00:06:57,520
So taking whatever is contained within player X and then adding that value.

101
00:06:57,530 --> 00:07:03,890
And then lastly, there's also the player top and player Y and updating those values.

102
00:07:04,250 --> 00:07:05,330
Let me make this bigger.

103
00:07:05,840 --> 00:07:09,860
And now whenever I key press, you can see my key presses down at the bottom.

104
00:07:10,100 --> 00:07:14,240
I'll make the smaller so you can see the key presses in the console.

105
00:07:14,810 --> 00:07:19,520
So whatever key I'm pressing, you can see that it's moving the elements around.

106
00:07:19,880 --> 00:07:23,330
So that's how you create a quick key press element mover.