1
00:00:00,720 --> 00:00:05,460
OK, this is going to be a super important lesson because this is where we're going to move the ball

2
00:00:05,670 --> 00:00:10,720
and we're going to create a function in order to handle that and then create the actions of the function.

3
00:00:11,010 --> 00:00:14,940
So we've actually re enabled the request animation frame.

4
00:00:15,210 --> 00:00:20,490
So it's calling back to update and it will continuously loop that update function and run all of the

5
00:00:20,490 --> 00:00:21,860
code contained with an update.

6
00:00:22,200 --> 00:00:27,570
And that means that if we've got the function ball move ball and being invoked with an update, we're

7
00:00:27,570 --> 00:00:33,120
going to be invoking that function as well every time the animation is running and the animation is

8
00:00:33,120 --> 00:00:36,030
going to continuously loop through while the game is in play.

9
00:00:36,360 --> 00:00:42,230
So the first thing we need to do is set up an object and this will be the position of the ball.

10
00:00:42,930 --> 00:00:44,910
So we're going to take in two parameters in here.

11
00:00:45,210 --> 00:00:48,620
We're going to need to get the current ball exposition.

12
00:00:48,990 --> 00:00:56,060
So using the ball object, this is the ball that we created earlier and getting its offset position.

13
00:00:56,340 --> 00:01:06,840
So we use offset left for the horizontal and then ball and offset top for the vertical position.

14
00:01:07,140 --> 00:01:11,350
So this will give us our X and Y of where the ball currently is.

15
00:01:11,850 --> 00:01:18,080
And so now we need to make our calculations and our conditions to update the ball direction.

16
00:01:18,450 --> 00:01:23,970
And so this is going to actually get fairly complex because we want to make sure that we're able to

17
00:01:24,210 --> 00:01:27,270
get and apply the different ball directions.

18
00:01:27,600 --> 00:01:33,270
And I'm going to set that within the player object so that in case we want to increase the speed or

19
00:01:33,300 --> 00:01:39,060
whatever we want to do, we can update the current ball direction.

20
00:01:39,480 --> 00:01:41,300
And I'm going to set this as an array.

21
00:01:41,910 --> 00:01:44,220
So we're going to have a couple of values in there.

22
00:01:44,370 --> 00:01:49,870
So one is going to be the vertical movement and the other is the horizontal movement of the ball.

23
00:01:50,190 --> 00:01:53,570
So within an array and then we can update these as needed.

24
00:01:53,580 --> 00:01:57,120
So we've got two and the current speed is going to be five.

25
00:01:57,270 --> 00:01:59,160
We can update this and adjust this.

26
00:01:59,310 --> 00:02:04,050
And again, making it more dynamic is going to make the gameplay even more flexible.

27
00:02:04,740 --> 00:02:08,510
So let's also add in our style updates.

28
00:02:08,520 --> 00:02:13,460
So taking ball style and we're going to update the top position of it.

29
00:02:13,770 --> 00:02:19,140
And this is now going to be equal to whatever the position ball value is.

30
00:02:19,710 --> 00:02:22,710
And plus picks, of course.

31
00:02:23,520 --> 00:02:30,000
And this is position ball y because this is the horizontal and then we're going to do one more for the

32
00:02:30,000 --> 00:02:30,450
vertical.

33
00:02:30,480 --> 00:02:35,940
So this is going to be a style left and update using the ball exposition.

34
00:02:36,240 --> 00:02:39,540
So right now it's not going to do a whole lot, but it's going to stay still.

35
00:02:39,660 --> 00:02:45,180
It's not going to move because we're not updating any of the values of ball, but we do have the directions

36
00:02:45,180 --> 00:02:48,450
and we can launch the ball movement now.

37
00:02:48,810 --> 00:02:52,760
So let's take a look at what we can do and how we can move this ball.

38
00:02:53,040 --> 00:02:59,910
So we want it to be able to move the ball, but we also want to bounce whenever it hits certain, whenever

39
00:02:59,910 --> 00:03:02,810
it hits one of the sites that we want to bounce off of the sides.

40
00:03:03,030 --> 00:03:04,410
So change direction.

41
00:03:05,040 --> 00:03:06,180
So that's one of the things.

42
00:03:06,180 --> 00:03:10,050
And also when it hits the top, we want to change direction and come down.

43
00:03:10,050 --> 00:03:12,120
And for now, we're going to do what it hits the bottom.

44
00:03:12,120 --> 00:03:15,370
We want to change it to go up and we'll adjust that later on.

45
00:03:15,570 --> 00:03:21,180
So basically, what this ball to be able to bounce around and when it hits the sides, it just simply

46
00:03:21,180 --> 00:03:22,080
changes direction.

47
00:03:22,080 --> 00:03:23,090
So that's all we want it to do.

48
00:03:23,100 --> 00:03:31,260
So let's add that in as well, where we've got this player ball direction and for now we can take ball,

49
00:03:31,260 --> 00:03:33,630
x or ball.

50
00:03:33,630 --> 00:03:36,690
Why we have to do it for both player.

51
00:03:38,510 --> 00:03:43,580
Ball direction and whatever the value that's contained in here, so this is essentially going to be

52
00:03:43,580 --> 00:03:45,650
the speed that the ball is going to be moving.

53
00:03:47,260 --> 00:03:52,960
And this is going to be zero, so it actually doesn't matter which one you use, zero one zero is going

54
00:03:52,960 --> 00:03:56,150
to be for the X, for the horizontal Y is going to be for the vertical.

55
00:03:56,560 --> 00:04:01,140
So let's see what happens now when a Head Start game, there goes our ball fell off the edge.

56
00:04:01,330 --> 00:04:02,920
And that's not something we want.

57
00:04:02,950 --> 00:04:12,190
So adding in a condition to check to see if our position ball y is greater than and checking to see

58
00:04:12,190 --> 00:04:13,990
the container dimension height.

59
00:04:14,020 --> 00:04:19,870
So we've got that container dimension that we're going to use again and the value that we're using is

60
00:04:19,870 --> 00:04:20,210
height.

61
00:04:21,730 --> 00:04:27,730
So if it's greater than this and the reason I'm bracketing around it is because I actually want to subtract

62
00:04:27,730 --> 00:04:28,650
20 off of that.

63
00:04:29,260 --> 00:04:32,970
So that makes sure that we account for the balls size as well.

64
00:04:33,310 --> 00:04:37,390
So that gives us a little bit of a buffer and we'll make it look like more like it's bouncing right

65
00:04:37,390 --> 00:04:37,990
off the edge.

66
00:04:38,140 --> 00:04:39,910
And you might have to tweak and adjust this.

67
00:04:39,910 --> 00:04:41,670
And of course, you can do that as needed.

68
00:04:42,010 --> 00:04:45,790
So that's we're checking to see if it's greater than that.

69
00:04:46,120 --> 00:04:53,080
And the other one that we needed to check to see is to check to see if Y is less than zero.

70
00:04:54,040 --> 00:05:02,230
So position ball, why is less than zero, and if it is, then all we want to do is want to reverse

71
00:05:02,230 --> 00:05:03,440
the ball direction.

72
00:05:03,790 --> 00:05:10,150
So no matter which one we're doing, if we multiply any number by negative one, that means that we're

73
00:05:10,150 --> 00:05:12,870
flipping it from a negative to a positive.

74
00:05:13,180 --> 00:05:16,670
So instead of being positive, five will turn to negative five.

75
00:05:17,050 --> 00:05:18,020
So see how this works.

76
00:05:18,130 --> 00:05:23,000
And actually that should be that should be flipping around, number one.

77
00:05:23,650 --> 00:05:25,300
So we see that we had that bounce there.

78
00:05:25,300 --> 00:05:26,230
So that was really quick.

79
00:05:26,530 --> 00:05:29,650
But we do need to add that in as well for the exposition.

80
00:05:30,010 --> 00:05:35,800
So checking ball X and in this case we're doing the same thing, but we're checking to see making sure

81
00:05:35,800 --> 00:05:43,420
that the width minus 10 and X and in this case, we're flipping that value, that first value.

82
00:05:43,430 --> 00:05:44,260
So see what happens.

83
00:05:44,680 --> 00:05:47,870
So now we've got our ball is bouncing around the page.

84
00:05:47,890 --> 00:05:49,090
That's exactly what we want.

85
00:05:49,300 --> 00:05:53,080
So go ahead and add the bouncy ball into your project.

86
00:05:53,080 --> 00:05:55,800
And that's a lot of fun, especially once a tennis ball, of course.

87
00:05:56,380 --> 00:06:02,860
And still to come is the important stuff like collision detection and also making sure that whenever

88
00:06:02,860 --> 00:06:05,860
the paddle is hitting the ball, that it's bouncing off.

89
00:06:05,870 --> 00:06:08,020
So that's another thing that we're going to be checking to see.

90
00:06:08,230 --> 00:06:11,710
And if that collision occurs, then we're going to change direction on the ball.

91
00:06:12,070 --> 00:06:13,860
So quite a few things still to come.

92
00:06:13,870 --> 00:06:16,450
And, of course, some really important stuff to the gameplay.