1
00:00:00,300 --> 00:00:05,220
This lesson we're going to be looking at a JavaScript method called request animation frame, and what

2
00:00:05,220 --> 00:00:11,430
this is going to do is this is going to allow us to have a method that allows our browser to understand

3
00:00:11,430 --> 00:00:13,350
that we've got an animation frame.

4
00:00:13,500 --> 00:00:19,370
And essentially what that does is it allows you to loop through multiple times within that same function

5
00:00:19,650 --> 00:00:20,660
and the way that it works.

6
00:00:20,670 --> 00:00:23,670
We've got an example here on the Mozilla developer network.

7
00:00:23,880 --> 00:00:26,130
They've got start to equal to null.

8
00:00:26,670 --> 00:00:28,350
Then we've got our element there.

9
00:00:28,360 --> 00:00:34,080
So whatever that element is that we want to animate, it's making a selection from the HTML and then

10
00:00:34,080 --> 00:00:35,660
using timestamp.

11
00:00:35,700 --> 00:00:40,500
So Downbelow, it initiates that function window request animation frame.

12
00:00:40,620 --> 00:00:46,050
And we know with Windows methods we don't need to specify window, but it's always a good idea to do

13
00:00:46,050 --> 00:00:46,730
that anyway.

14
00:00:46,860 --> 00:00:52,740
So sometimes you might see the request animation frame without the window prefixing it and that's OK

15
00:00:52,740 --> 00:00:53,220
as well.

16
00:00:53,370 --> 00:00:58,770
And in this case, we are going to be using window request animation frame to request our animation

17
00:00:58,770 --> 00:00:59,100
frame.

18
00:00:59,340 --> 00:01:04,650
And what it does is it invokes a function and the function that's going to invoke is going to be over

19
00:01:04,650 --> 00:01:05,010
here.

20
00:01:05,310 --> 00:01:07,810
We've got it running on a timestamp.

21
00:01:07,830 --> 00:01:12,090
So in this particular example, it's going to be moving that element around.

22
00:01:12,090 --> 00:01:20,370
And depending on how far this progress is and tracking the current timestamp and the value minus start,

23
00:01:20,490 --> 00:01:23,310
it's going to be transforming that particular element.

24
00:01:23,610 --> 00:01:25,320
So this is a really neat example.

25
00:01:25,320 --> 00:01:27,870
And you can go ahead and you can try this out for yourself.

26
00:01:28,200 --> 00:01:35,940
And we're going to bring the request animation frame into our application and added into our application

27
00:01:35,940 --> 00:01:37,910
making animations happen.

28
00:01:38,250 --> 00:01:40,200
So setting up a brand new function.

29
00:01:40,200 --> 00:01:43,220
And then this is the function where all the magic is going to happen.

30
00:01:43,410 --> 00:01:48,520
We're going to call this plea game and this is the function that we're going to request.

31
00:01:49,020 --> 00:01:56,160
So with the console log in play and once we hit that start button, so we've got the start function

32
00:01:56,490 --> 00:02:00,410
we want, this is where we want to invoke the request animation frame.

33
00:02:00,690 --> 00:02:04,590
So using the window object and then request animation frame.

34
00:02:05,570 --> 00:02:11,030
All we need to do is specify what the function is that we want to request and the function that we want

35
00:02:11,030 --> 00:02:13,040
to request is the play game function.

36
00:02:14,280 --> 00:02:15,610
So now let's see what happens.

37
00:02:15,630 --> 00:02:22,770
So we hit start and we have in place, so it's not exactly looping quite yet and you see that what's

38
00:02:22,770 --> 00:02:28,140
happening here is that within the animation frame, they're requesting that animation frame again,

39
00:02:28,290 --> 00:02:31,160
and that's what actually creates the loop of the animation.

40
00:02:31,560 --> 00:02:37,440
So just as any function that we're invoking within itself, it's going to constantly loop and create

41
00:02:37,590 --> 00:02:39,170
additional animation frames.

42
00:02:39,420 --> 00:02:45,960
So we've only got one animation theme that we're animating right now, and now we're going to invoke

43
00:02:45,960 --> 00:02:51,150
that same function within itself and what that's going to do when we go back out here.

44
00:02:51,150 --> 00:02:54,420
And we started we see that we've got an animation happening.

45
00:02:54,870 --> 00:02:59,540
So now we can also check to see that if the game is in play.

46
00:03:00,810 --> 00:03:03,730
So let's set up a variable, we'll call it player.

47
00:03:04,020 --> 00:03:05,940
So this is going to be a blank object.

48
00:03:05,940 --> 00:03:11,990
And once we start the game, then we're going to take our player object set start to true.

49
00:03:12,000 --> 00:03:17,430
And then in our animation frame, we're going to take our player object start and we're going to make

50
00:03:17,430 --> 00:03:18,470
sure that that is true.

51
00:03:18,480 --> 00:03:24,690
So we're not going to do anything unless the game is actually started and in play and we're not going

52
00:03:24,690 --> 00:03:29,910
to request any additional animations or anything unless this function is true.

53
00:03:30,150 --> 00:03:34,260
And really, at the end of the day, it's not going to make much difference because we are setting the

54
00:03:34,260 --> 00:03:39,140
player start to be equal to true before we're calling the play game.

55
00:03:39,150 --> 00:03:41,490
And that's why we don't see any difference quite yet.

56
00:03:42,540 --> 00:03:49,290
So now that we've got that in play, the next part of this is to add in that animation and make something

57
00:03:49,290 --> 00:03:49,660
move.

58
00:03:49,920 --> 00:03:56,790
So what we need to do is we need to create an element that we can access and we can move around our

59
00:03:56,790 --> 00:03:57,320
screen.

60
00:03:57,750 --> 00:04:02,570
So going into our game area, this is where we want to place that particular element.

61
00:04:02,820 --> 00:04:08,940
So we've got the game area object that we created earlier and we're going to use JavaScript to generate

62
00:04:08,940 --> 00:04:11,110
our car or a vehicle.

63
00:04:11,140 --> 00:04:17,940
So setting up a variable, we can call it a car and document creating an element.

64
00:04:18,420 --> 00:04:22,620
So in this case, we're creating an element, an element that we're going to create is a div.

65
00:04:23,820 --> 00:04:28,260
And then adding into car, an update, the inter text.

66
00:04:30,500 --> 00:04:33,740
And for now, I guess it's just going to say car inside of it.

67
00:04:34,730 --> 00:04:42,500
And then using that game area object, we're going to append a child to it and the child that we're

68
00:04:42,500 --> 00:04:45,380
spending is the car, we're spending a child.

69
00:04:45,560 --> 00:04:52,100
And we quite and currently right now, we still have the class of display, none being shown.

70
00:04:52,100 --> 00:04:54,140
And we need to hide the start screen.

71
00:04:54,440 --> 00:04:57,840
So that's the next function that we need to do as well within the start area.

72
00:04:58,130 --> 00:05:03,290
So once we start the game, we can get rid of the console message now because we're not going to have

73
00:05:03,290 --> 00:05:04,260
that in use anymore.

74
00:05:04,790 --> 00:05:12,530
So taking the start screen, selecting class list, we're going to remove a class from it and the class

75
00:05:12,530 --> 00:05:14,030
that we're moving is hide.

76
00:05:14,480 --> 00:05:23,000
And also we want to do four game area is we're going to select class list and in this case, we're going

77
00:05:23,000 --> 00:05:25,480
to add the class of height.

78
00:05:25,730 --> 00:05:27,800
And actually, I just got that opposite.

79
00:05:28,100 --> 00:05:34,720
So we want to add height to the start screen and we want to remove hide from our game area.

80
00:05:35,210 --> 00:05:36,360
So let's try that one more time.

81
00:05:36,770 --> 00:05:39,080
So now we've got that element that we've created.

82
00:05:39,230 --> 00:05:40,310
You can take a look at it.

83
00:05:40,430 --> 00:05:42,650
And this is the one that we're actually going to be moving around.

84
00:05:42,650 --> 00:05:45,950
So that is still yet to come in the upcoming lessons.

85
00:05:46,400 --> 00:05:52,220
So I'll show you how to do that, how we're going to make car that element that we created move depending

86
00:05:52,220 --> 00:05:53,050
on the Iraqis.

87
00:05:53,060 --> 00:05:54,230
So that's still to come in upcoming.

88
00:05:54,230 --> 00:05:58,660
Let's try request animation frame added into your project.

89
00:05:59,000 --> 00:06:04,940
So when the game starts, you've got an animation that's playing and you've got a function that's handling

90
00:06:05,150 --> 00:06:06,080
all of the gameplay.