1
00:00:00,090 --> 00:00:01,420
How's it going so far?

2
00:00:01,440 --> 00:00:06,000
This is going to be an exciting lesson because we're going to bring animation into our project.

3
00:00:06,210 --> 00:00:10,790
So far, we click the press here to start game and we get an airplane.

4
00:00:10,830 --> 00:00:13,710
We're tracking our key presses as well.

5
00:00:13,710 --> 00:00:18,900
So you can see that, that whenever we press items on the keyboard, those are getting output and we're

6
00:00:18,900 --> 00:00:21,410
tracking that within the keys object.

7
00:00:21,420 --> 00:00:23,290
So we're all ready to bring our animation.

8
00:00:23,340 --> 00:00:29,040
The animation is going to be done through Windows, request animation, frame object and JavaScript.

9
00:00:29,040 --> 00:00:33,300
It's a method that basically allows you to perform animation requests.

10
00:00:33,520 --> 00:00:40,440
So what it does is it loops through and continuously will loop through a particular function.

11
00:00:40,770 --> 00:00:47,400
So in this example on the module, the developer network, they have a step function that's going to

12
00:00:47,400 --> 00:00:51,060
continuously loop through until the value of progress.

13
00:00:51,060 --> 00:00:57,450
And while the value of progress is less than 2000, it's going to continuously request that same animation

14
00:00:57,450 --> 00:01:00,600
frame so that same step function within itself.

15
00:01:00,750 --> 00:01:07,470
So we'll continuously do this transformation and do this set of code until the animation runs out and

16
00:01:07,470 --> 00:01:11,110
then it gets initiated down here with the request animation step.

17
00:01:11,370 --> 00:01:16,770
So we're going to do the same thing in our project where we've got our START game and this is going

18
00:01:16,770 --> 00:01:20,310
to trigger off the window request animation frame.

19
00:01:20,310 --> 00:01:24,280
And then all we need to do is specify the function that we want to kick off.

20
00:01:24,330 --> 00:01:29,350
We're going to call it play game, then opening up a function, creating a function called play game.

21
00:01:29,640 --> 00:01:35,490
This is where we're going to continuously loop through and calculate out all of the movement that we

22
00:01:35,490 --> 00:01:38,790
need to take place in order to move our character around.

23
00:01:39,030 --> 00:01:46,620
And then within this same play game, we're going to continuously keep looping that play game animation.

24
00:01:46,830 --> 00:01:51,630
And the way that we're going to check to see if we should keep looping through is we're going to use

25
00:01:51,630 --> 00:01:53,490
this in play function.

26
00:01:53,760 --> 00:01:57,600
Now that we've set it to true, we're going to check to see if it is true.

27
00:01:57,600 --> 00:02:00,470
And if it is, then we're going to continuously loop out.

28
00:02:00,690 --> 00:02:05,850
And once this value is no longer true, then our animation frame is going to stop.

29
00:02:05,880 --> 00:02:10,630
So that's going to be the main core of the way that our application is going to function.

30
00:02:10,650 --> 00:02:16,770
So next, we need to introduce listening for whatever the key values are and remember coming in.

31
00:02:17,100 --> 00:02:21,150
So every one of these animation frames and Ilic list out keys for now.

32
00:02:21,300 --> 00:02:26,100
You're going to see that this Kei's object, once we start, it's going to continuously be outputting.

33
00:02:26,100 --> 00:02:31,230
So it's looping through this request animation frame and that's where we're getting all of these key

34
00:02:31,230 --> 00:02:32,790
objects being listed out.

35
00:02:32,790 --> 00:02:37,390
And it's continuously growing our massive list here within the console.

36
00:02:37,410 --> 00:02:42,060
So now we can make use of our key tracking that we had set up earlier where we're tracking.

37
00:02:42,060 --> 00:02:45,470
Whenever we press a key, you can see that it's going to update.

38
00:02:45,480 --> 00:02:48,150
I got to get way to the bottom of this massive list.

39
00:02:48,330 --> 00:02:53,910
And you can see that up arrow now has been included because at one point here, I pressed up Arrow and

40
00:02:53,910 --> 00:02:54,630
it was true.

41
00:02:54,900 --> 00:02:59,400
And if up arrow is true that we want to move our airplane up.

42
00:02:59,700 --> 00:03:00,700
So let's take care of that.

43
00:03:01,170 --> 00:03:09,660
So going into where we've got our play game, we can detect to see if the value of keys and arrow is

44
00:03:09,660 --> 00:03:13,590
actually arrow up is going to be the key event name.

45
00:03:13,740 --> 00:03:17,130
And we're also using that within the object name as well to reference it.

46
00:03:17,160 --> 00:03:23,760
So we're checking to see if this value is true and if it is that we want to move our airplane up.

47
00:03:24,030 --> 00:03:28,110
And the way that we're going to do that is, first of all, we need a few other things that we need

48
00:03:28,110 --> 00:03:32,150
to take care of and that's setting up some more values within player.

49
00:03:32,370 --> 00:03:39,170
So using that player object, sending player X, I'm taking the value of player plane.

50
00:03:39,390 --> 00:03:46,800
So this is that plane object that we created earlier and using offset left in order to get its position

51
00:03:46,800 --> 00:03:47,970
off of the left side.

52
00:03:48,300 --> 00:03:50,680
And then I'm taking player Y.

53
00:03:50,820 --> 00:03:55,830
So this is a new object that I'm creating and then also from the player plane object that we created,

54
00:03:56,040 --> 00:03:57,960
we're taking offset top.

55
00:03:57,990 --> 00:04:03,870
So what these values are going to do is this is going to give me a numeric value of where the plane

56
00:04:03,870 --> 00:04:08,040
is positioned so that X and Y coordinates of where it currently is.

57
00:04:08,310 --> 00:04:14,970
And we're going to utilize that within our plane game area and we're going to update that player y value.

58
00:04:14,980 --> 00:04:23,190
So taking player Y and updating it, so increasing it by whatever the player speed value is.

59
00:04:23,220 --> 00:04:26,250
And we can do the same thing for the down arrow.

60
00:04:26,700 --> 00:04:30,180
So the arrow down so of arrow down is true.

61
00:04:30,450 --> 00:04:38,010
Then while it's true we're going to decrease the value of Y and actually it's the other way around because

62
00:04:38,310 --> 00:04:42,570
decreasing moves set up and increasing moves it down.

63
00:04:42,960 --> 00:04:50,400
So just before we finish up our animation frame, we're going to update the position of player plane.

64
00:04:50,400 --> 00:04:52,020
So it's that object that we created.

65
00:04:52,020 --> 00:04:54,180
And remember, it's in a global value of player.

66
00:04:54,360 --> 00:04:58,500
So that plane is the one that we've got here on the screen that we're able to see.

67
00:04:58,890 --> 00:04:59,880
We're selecting a.

68
00:04:59,970 --> 00:05:07,320
Style and selecting left position, so we're going to reset the left position and we're going to reset

69
00:05:07,320 --> 00:05:13,110
it to whatever the value of X's, and because this is a numeric value, we have to add in the picks

70
00:05:13,500 --> 00:05:19,530
and then doing the same thing for player playing style top because remember, this is absolute.

71
00:05:19,540 --> 00:05:24,500
So we can move it around and with JavaScript we can reset the style properties.

72
00:05:24,810 --> 00:05:26,070
So that's what we're going to do here.

73
00:05:26,220 --> 00:05:27,240
So let's try that out.

74
00:05:27,780 --> 00:05:29,520
So going in here we click.

75
00:05:29,760 --> 00:05:35,340
So pushing down moves it down, pushing up, move, set up those two other things that we need to take

76
00:05:35,340 --> 00:05:41,250
care of and that's going to be moving it forward and then also moving it backwards.

77
00:05:41,260 --> 00:05:48,230
So arrow and this one is arrow left value instead of X, we're going to move along.

78
00:05:48,690 --> 00:05:53,460
Instead of Y, we're going to move around the horizontal and this is going to be arrow, right.

79
00:05:53,640 --> 00:05:56,910
Because we know that we've got four arrow keys on a keyboard.

80
00:05:57,150 --> 00:05:58,680
So one of them is going to move it left.

81
00:05:58,680 --> 00:06:02,300
One of them is going to move it right and left is the decreasing one.

82
00:06:02,310 --> 00:06:03,580
So we always try that out.

83
00:06:03,600 --> 00:06:05,070
So now I'm pushing forward.

84
00:06:05,070 --> 00:06:09,450
So I'm moving the plane forward now, moving it back down and up.

85
00:06:09,450 --> 00:06:15,240
And you can see in the bottom right hand corner which of the key values is true.

86
00:06:15,240 --> 00:06:17,240
And that's corresponding with the movement.

87
00:06:17,250 --> 00:06:23,400
And also I can do combinations so I can press two keys at once and I can get this kind of angled movement.

88
00:06:23,410 --> 00:06:25,670
So both going forward and up and down.

89
00:06:25,710 --> 00:06:29,670
So now we've got animation and movement within our project.

90
00:06:29,670 --> 00:06:34,530
So we're moving along very close to completing this project.

91
00:06:34,830 --> 00:06:37,140
So this is the core functionality that we needed.

92
00:06:37,140 --> 00:06:42,210
And of course, we need a few other things with the keyboard space where we're going to drop some bombs

93
00:06:42,210 --> 00:06:46,440
and we're going to create those as well as we need to create an enemy base that we need to target.

94
00:06:46,780 --> 00:06:51,480
There's quite a few things still to do, but this was one of the core pieces of functionality that I

95
00:06:51,480 --> 00:06:54,420
want to introduce within this section.

96
00:06:54,630 --> 00:06:56,460
So go ahead and try this out for yourself.

97
00:06:56,460 --> 00:07:02,790
Get this working so that you can press your keyboard keys, arrow keys, up, down, left, right,

98
00:07:03,000 --> 00:07:06,420
and have the element that you created in the earlier lesson.

99
00:07:06,420 --> 00:07:07,980
Move around the page.

100
00:07:08,160 --> 00:07:15,780
And don't forget that you do need to set position absolute so that you can adjust the style properties

101
00:07:15,780 --> 00:07:17,190
to top and left.

102
00:07:17,370 --> 00:07:23,100
And if you go in, if you do an inspect on it before we conclude, you can see that I've got style left

103
00:07:23,100 --> 00:07:24,210
and style top.

104
00:07:24,450 --> 00:07:29,760
And as I'm pressing the keys, you can see that this is also updating and it's moving.

105
00:07:29,760 --> 00:07:31,560
And I'm not sure why I ended up with two of them.

106
00:07:31,560 --> 00:07:35,130
I think every time we start game, we're creating a new plane.

107
00:07:35,430 --> 00:07:38,010
So that's why we're ending up with so many different planes.

108
00:07:38,670 --> 00:07:40,910
So that is another thing that we need to take care of.

109
00:07:40,920 --> 00:07:44,970
Of course, that it looks like we're generating multiple planes.

110
00:07:45,210 --> 00:07:48,360
So there's a few things to still tweak and that's still all to come.