1
00:00:00,420 --> 00:00:04,950
This is where things start getting really interesting and this is the lesson you've been all waiting

2
00:00:04,950 --> 00:00:11,220
for, because, of course, everyone loves animation and we're introducing the animation into this lesson.

3
00:00:11,280 --> 00:00:15,030
So we added in and we updated the key press functions.

4
00:00:15,360 --> 00:00:16,830
We added the event listeners.

5
00:00:16,830 --> 00:00:21,230
And I've moved a few things around to output it in a more orderly fashion.

6
00:00:21,240 --> 00:00:24,320
So we've got our constant objects that we're selecting.

7
00:00:24,340 --> 00:00:26,040
Those are all element objects.

8
00:00:26,250 --> 00:00:28,770
We've got some of the global variables that we're setting.

9
00:00:29,010 --> 00:00:31,500
So global variable objects that we're setting.

10
00:00:31,500 --> 00:00:33,930
And then all of our event listeners are all in one place.

11
00:00:34,080 --> 00:00:36,770
And then these are all the functions that make things happen.

12
00:00:37,050 --> 00:00:43,410
So we've got a start game function and we want to add in the ability to launch an animation frame and

13
00:00:43,410 --> 00:00:46,620
continuously play that animation frame.

14
00:00:46,860 --> 00:00:50,340
And JavaScript has a method called request animation frame.

15
00:00:50,520 --> 00:00:56,460
So tells the browser that you wish to perform an animation and it gives you the ability to nisson smoothly

16
00:00:56,640 --> 00:00:58,320
run animations.

17
00:00:58,440 --> 00:01:01,950
So that means that we're going to call a function called play game.

18
00:01:02,130 --> 00:01:04,170
You could call it whatever you wanted in this case.

19
00:01:04,170 --> 00:01:07,830
I've called it play game, so we're just referencing that function.

20
00:01:07,930 --> 00:01:11,460
And then this is where all of the action takes place.

21
00:01:11,980 --> 00:01:17,430
All any of the movements that we're doing is going to be done within this one function.

22
00:01:17,850 --> 00:01:23,100
And first, we're going to check to see if player in is true.

23
00:01:23,220 --> 00:01:31,260
And if it is, then we know that the player is in play and we can do all of the great stuff that we

24
00:01:31,260 --> 00:01:32,820
want to do with the animation frame.

25
00:01:33,030 --> 00:01:39,690
Also within the animation frames, once we check to make sure that the player is the game is in play,

26
00:01:40,050 --> 00:01:43,940
we're going to call the animation frame again from within itself.

27
00:01:44,250 --> 00:01:50,220
So this will create that constant loop that every time once we kick it off here and we do play play

28
00:01:50,220 --> 00:01:55,440
game and while the players and play, then we're going to run all of the movements.

29
00:01:55,560 --> 00:01:58,560
And then lastly, we're going to call play game again.

30
00:01:58,680 --> 00:02:04,530
So it will create all of that over and over again until player in play is no longer true.

31
00:02:04,650 --> 00:02:08,050
And that's how we're going to break out of the cycle of animation.

32
00:02:08,100 --> 00:02:09,090
So what do we want to do?

33
00:02:09,090 --> 00:02:10,680
We want to move the players.

34
00:02:10,680 --> 00:02:15,570
So taking our keys object that we have that we set up earlier.

35
00:02:15,570 --> 00:02:18,000
And this is where we're tracking the key presses.

36
00:02:18,300 --> 00:02:21,810
We can check to see if Arrow is down.

37
00:02:22,230 --> 00:02:24,780
And if it is, then we can take this action.

38
00:02:24,810 --> 00:02:28,020
We can also update the boundaries.

39
00:02:28,350 --> 00:02:34,590
And this is maybe another global object that we can set or we can add that in within the play game.

40
00:02:34,950 --> 00:02:41,310
So whenever we're playing the game, we're going to create an object called Bound Basket.

41
00:02:41,310 --> 00:02:47,850
And what this is going to do is this is going to get using our basket object and we're going to use

42
00:02:47,850 --> 00:02:51,780
another method called get bounding client rectangle.

43
00:02:52,170 --> 00:03:00,750
And what this method does is this produces the element gives us the element information so we can console

44
00:03:00,750 --> 00:03:04,080
log that out and you can see what's going to get produced here.

45
00:03:04,090 --> 00:03:09,840
So when we press start and because we've got it within the animation, it's going to launch this and

46
00:03:09,840 --> 00:03:12,600
there's going to be quite a lot of it's showing up on the screen.

47
00:03:12,990 --> 00:03:21,660
So what is happening here is that we're getting our DOM rectangle and attaching getting the information

48
00:03:22,020 --> 00:03:24,990
values that are contained for this particular element.

49
00:03:25,200 --> 00:03:28,890
So it's bottom one, 998 height is 50.

50
00:03:28,890 --> 00:03:32,400
Left is 409, rate five or nine.

51
00:03:32,400 --> 00:03:33,810
So left four or nine.

52
00:03:33,810 --> 00:03:34,950
Right, five or nine.

53
00:03:34,950 --> 00:03:39,120
Off the side top is 148, its width is 100.

54
00:03:39,120 --> 00:03:40,620
So those are the values that we set.

55
00:03:40,740 --> 00:03:46,410
And then we also have it's X and Y position so we can take these values and notice that they're also

56
00:03:46,410 --> 00:03:52,110
numeric values and we can adjust them accordingly depending on what the arrow presses are.

57
00:03:52,470 --> 00:03:56,910
So we have value here because this is within an object format.

58
00:03:57,090 --> 00:04:04,530
We can now use bounding basket left to get the position of that current element so we can take bounding

59
00:04:04,530 --> 00:04:05,220
basket.

60
00:04:05,460 --> 00:04:13,650
And because this is up and down, we're going to use the vertical position and adjust bound basket y

61
00:04:13,650 --> 00:04:16,950
value by whatever the player speed is.

62
00:04:16,950 --> 00:04:18,180
So we're incrementing it.

63
00:04:18,300 --> 00:04:22,290
And let's also apply the same thing for the other keys.

64
00:04:22,290 --> 00:04:26,040
So we've got keys up as the other one that we're listening for.

65
00:04:26,610 --> 00:04:29,660
And in this case, we're subtracting the player speed.

66
00:04:29,700 --> 00:04:33,270
We also have keys aril left as well.

67
00:04:33,570 --> 00:04:38,060
So this one is working on the vertical or the horizontal axis.

68
00:04:38,070 --> 00:04:42,510
We need to use X and updating its position.

69
00:04:42,780 --> 00:04:46,790
So we're subtracting four left and we're going to add four four.

70
00:04:46,800 --> 00:04:47,030
Right.

71
00:04:47,100 --> 00:04:48,420
And adding at four.

72
00:04:48,450 --> 00:04:48,810
Right.

73
00:04:48,990 --> 00:04:52,140
So using that bound basket position.

74
00:04:52,140 --> 00:04:57,660
So it's always getting the position of where Baskett is located and we're updating those values.

75
00:04:57,840 --> 00:04:59,340
So next that we want to do as we.

76
00:04:59,390 --> 00:05:06,590
I actually want to update it visibly, so take the basket object and using the style properties, updating

77
00:05:06,590 --> 00:05:13,810
the left position and left position is bound basket X plus, and we have to add in the picks.

78
00:05:14,110 --> 00:05:18,620
So this is going to turn it into a string value as it's expecting a string value, just as you would

79
00:05:18,620 --> 00:05:19,400
with success.

80
00:05:19,760 --> 00:05:24,860
And we could do the same thing for top setting its Y position accordingly.

81
00:05:25,220 --> 00:05:28,350
And I'm not going to output that bound basket value.

82
00:05:28,400 --> 00:05:34,760
And speaking of which, we do need to take that path bound basket value and turn that into a global

83
00:05:34,760 --> 00:05:35,240
object.

84
00:05:35,450 --> 00:05:40,730
Otherwise, every time we're looping through the animation, we're going to be resetting its coordinates

85
00:05:40,730 --> 00:05:41,630
and we don't want to do that.

86
00:05:42,630 --> 00:05:47,670
So we want to have that sitting as a global object, so let's add that in and we are ready to try the

87
00:05:47,670 --> 00:05:47,970
suit.

88
00:05:48,500 --> 00:05:53,820
So going into our project, I'll make the smaller will refresh, hit the start button.

89
00:05:54,000 --> 00:05:58,140
And now whenever I'm pressing the arrow keys, I see I've got the movement.

90
00:05:58,380 --> 00:06:01,490
And there's one thing that's happening is we're able to go out of the balance.

91
00:06:01,770 --> 00:06:04,920
So we need to take care of that and make a few minor tweaks, adjustments.

92
00:06:05,160 --> 00:06:11,310
But it is working and we are getting the responding element moving depending on what the arrow keys,

93
00:06:11,310 --> 00:06:12,870
which Iraqis are being pressed.

94
00:06:14,520 --> 00:06:19,680
So you can add in the animation frame into your project and you can be ready to move on to the next

95
00:06:19,680 --> 00:06:24,210
step where we're going to check the boundaries and make sure that we're not going out of balance of

96
00:06:24,210 --> 00:06:25,170
the main container.

97
00:06:25,200 --> 00:06:26,880
So that's still to come, an upcoming lesson.