1
00:00:00,210 --> 00:00:05,850
Welcome back in this lesson, we're going to be starting our animation frame so within the start game,

2
00:00:05,850 --> 00:00:11,190
whenever we press the start button, that's where we're starting the game and this is where we can trigger

3
00:00:11,340 --> 00:00:12,900
the starting of the game played.

4
00:00:13,230 --> 00:00:20,190
So selecting that, we need to create a repeat animation frame and repeat a function that we're going

5
00:00:20,190 --> 00:00:21,950
to run over and over again.

6
00:00:22,050 --> 00:00:27,180
And this is what's going to do all of the updates that we need within our gameplay area.

7
00:00:27,190 --> 00:00:32,100
So effectively creating the animation by running and constantly calling into the function.

8
00:00:32,370 --> 00:00:36,420
And this function needs to be selected using a global object.

9
00:00:36,630 --> 00:00:40,530
So we've got our player and we can set up an animation.

10
00:00:40,870 --> 00:00:46,410
So this is within the global object and we're going to make a request animation frame.

11
00:00:46,650 --> 00:00:53,790
And what this does is this going to call and invoke a function as an animation frame and then within

12
00:00:53,790 --> 00:00:58,690
the function itself, within that update function, we're going to call back to update.

13
00:00:59,100 --> 00:01:03,690
So effectively, what this is doing is this is going to constantly loop through update.

14
00:01:03,870 --> 00:01:11,310
And if you console log update, we can call it player or we can add in whatever we want here.

15
00:01:11,490 --> 00:01:16,360
And you're going to see what happens is when we hit start game, it's going to start the animation sequence.

16
00:01:16,710 --> 00:01:19,470
So right now, all it's got is the console message.

17
00:01:19,710 --> 00:01:21,060
So let's make something happen.

18
00:01:21,390 --> 00:01:27,120
And we did set up the key presses and the last lesson so we can listen for those key presses.

19
00:01:27,300 --> 00:01:30,930
So checking to see where we've got our key objects.

20
00:01:30,930 --> 00:01:33,810
So key left, kvi left.

21
00:01:34,110 --> 00:01:36,720
So checking to see if this is true.

22
00:01:36,960 --> 00:01:40,950
And if it is, then we're going to make our appropriate movement for that.

23
00:01:41,340 --> 00:01:46,560
So what we want to do is we want to have a temporary value position of value.

24
00:01:47,070 --> 00:01:54,510
And this position value is going to use the microchip object and then using the value for offset left,

25
00:01:54,690 --> 00:02:00,630
it's going to return the number of pixels that the upper left corner of the current element is offset

26
00:02:00,630 --> 00:02:01,380
to the left.

27
00:02:01,590 --> 00:02:08,820
So basically, it gets your left position in a pixel value, in a numeric value, and we can use this

28
00:02:09,150 --> 00:02:10,170
and update it.

29
00:02:10,180 --> 00:02:14,970
So if we're going left, what we're going to do is we're going to subtract off of it.

30
00:02:15,210 --> 00:02:18,990
And the value that we're subtracting is the player speed value.

31
00:02:19,830 --> 00:02:26,550
And if key KVI is right is true, that we're going to move it to the right.

32
00:02:26,670 --> 00:02:29,790
So instead of subtracting, all we're going to do is add.

33
00:02:30,250 --> 00:02:36,570
And then lastly, before we finish up the animation and to actually to create the animation, selecting

34
00:02:36,570 --> 00:02:42,850
the massive object, we're going to dynamically updated style value using temp position.

35
00:02:42,890 --> 00:02:47,390
So this is a newly created value and we're updating its picks location.

36
00:02:48,270 --> 00:02:51,600
So try that and refresh so it start the game.

37
00:02:52,110 --> 00:02:57,840
And now whenever I'm touching the keyboard, if I'm going left or if I'm right, then you can see that

38
00:02:57,960 --> 00:03:00,920
the ship is moving either left or right accordingly.

39
00:03:01,110 --> 00:03:05,850
So if I'm pressing them both, then I'm actually at a standstill because both of those keys are being

40
00:03:05,850 --> 00:03:06,290
pressed.

41
00:03:06,510 --> 00:03:08,820
So it's going left and it's going right.

42
00:03:08,940 --> 00:03:10,160
So both of them are true.

43
00:03:10,530 --> 00:03:15,470
So subtracting and then adding the player speed, and that's why we're not getting anything happening.

44
00:03:15,840 --> 00:03:18,180
So go ahead and add this into your project.

45
00:03:18,510 --> 00:03:24,390
And at this point, you should have the ability to touch your keyboard and move your object left or

46
00:03:24,390 --> 00:03:24,710
right.

47
00:03:25,230 --> 00:03:30,990
And coming up, we need to also set some boundaries so you can see that right now I can move way out

48
00:03:30,990 --> 00:03:32,130
of my coordinates.

49
00:03:32,460 --> 00:03:37,400
And in the earlier lesson, we saw how we selected the container dimensions.

50
00:03:37,890 --> 00:03:39,930
So we've got that within a value.

51
00:03:40,020 --> 00:03:45,720
And now we can utilize that to set the restrictions of where the ship can move to the left, as well

52
00:03:45,720 --> 00:03:47,260
as where the ship can move to the right.

53
00:03:47,490 --> 00:03:48,930
So that's coming up in the next lesson.