WEBVTT

0
00:00.030 --> 00:02.580
Now we've done most of the easy parts,

1
00:02.610 --> 00:05.790
getting a paddle and a ball up and running on our screen.

2
00:06.120 --> 00:08.700
The next few parts are going to be a little bit more tricky.

3
00:09.270 --> 00:13.530
And the first thing we're going to tackle is how to detect collision when the

4
00:13.530 --> 00:18.530
ball hits the wall at the top and the bottom and getting the ball to bounce.

5
00:19.470 --> 00:21.210
Now, we only need to detect

6
00:21.240 --> 00:24.660
collision on the top and the bottom walls

7
00:24.930 --> 00:29.190
because when the ball hits the right or of the left edges of the program,

8
00:29.490 --> 00:33.300
it should actually be caught by one of the paddles. And if it isn't,

9
00:33.360 --> 00:35.730
then that means that player has missed the ball

10
00:35.940 --> 00:37.440
and it's a point to the other side.

11
00:37.920 --> 00:42.920
So we need to focus on how can we detect when the ball has collided with the top

12
00:43.830 --> 00:45.060
or bottom walls,

13
00:45.420 --> 00:50.420
when has its position gone past a certain point that it probably is going to

14
00:51.210 --> 00:54.810
collide with the wall. We've done something similar in snake, but it's again

15
00:54.870 --> 00:58.260
time to revisit this topic. Now on top of that,

16
00:58.260 --> 01:01.650
we have to figure out how do we get the ball to actually bounce?

17
01:01.980 --> 01:06.090
And what does bouncing actually mean in terms of changing the position of the

18
01:06.090 --> 01:06.923
ball?

19
01:06.960 --> 01:11.960
When the ball is constantly going up in the Y value and going up in the X value

20
01:12.390 --> 01:14.340
in order to travel in this direction,

21
01:14.670 --> 01:19.170
what actually happens to the X and Y values when it bounces?

22
01:19.530 --> 01:22.440
Which one gets reduced and which one stays constant?

23
01:23.430 --> 01:28.430
Have a think about those questions and play around with some of those numbers

24
01:29.220 --> 01:33.630
and see if you can complete this challenge by yourself. If you get stuck

25
01:33.690 --> 01:35.250
or if you just want to check the answer,

26
01:35.490 --> 01:37.950
then come back and I'll go through the solution with you.

27
01:40.680 --> 01:43.590
All right. So it's going to be inside our while loop

28
01:43.800 --> 01:48.180
where I'm going to be detecting the collision with the wall.

29
01:48.720 --> 01:52.440
And in order to detect the collision with the wall, essentially,

30
01:52.470 --> 01:57.450
what I'm going to say is that if the screen is 600 by 800,

31
01:57.870 --> 02:00.870
when the ball is at a Y position

32
02:00.900 --> 02:03.390
that is above 300,

33
02:03.420 --> 02:05.940
remember 300 is half of 600,

34
02:06.270 --> 02:11.270
and the Y-axis goes from 0 to 300 and 0 to -300.

35
02:12.780 --> 02:15.630
So once the ball is past 300,

36
02:15.930 --> 02:19.770
then it's going to be way past the wall, right? So at that point,

37
02:19.800 --> 02:22.230
I can be pretty sure that it's going to hit the wall

38
02:22.260 --> 02:23.970
or it has it already hit the wall.

39
02:24.540 --> 02:27.810
So that will be my criteria for detecting collision.

40
02:28.170 --> 02:33.170
So it can say if the ball.ycor is greater than 300,

41
02:36.960 --> 02:41.610
well in that case it's basically gone too far up and it's hit the top wall. Now,

42
02:41.670 --> 02:44.820
in addition, I can add a or statement to say

43
02:44.850 --> 02:49.620
if the ball.ycor is less than -300,

44
02:49.980 --> 02:53.670
then that means it's gone too far down and it's hit the bottom wall.

45
02:54.120 --> 02:57.690
So in this case, it needs to bounce.

46
02:58.930 --> 03:02.350
So we need to figure out how to get our ball to bounce.

47
03:02.770 --> 03:07.770
And we're going to create a bounce method in our ball class in order to tell it

48
03:08.260 --> 03:10.270
how to do this. Firstly,

49
03:10.300 --> 03:15.300
we're going to need to figure out a new Y because the Y coordinate needs to

50
03:15.580 --> 03:17.530
essentially reverse. So,

51
03:17.530 --> 03:22.510
whereas previously our Y coordinate was going up and up and up increasing each

52
03:22.510 --> 03:26.860
time, when it hits the wall it needs to reverse direction.

53
03:27.130 --> 03:28.750
So if it was increasing,

54
03:28.810 --> 03:32.740
it needs to decrease. If it was decreasing, it needs to increase.

55
03:33.250 --> 03:38.250
So basically we need the opposite of what it currently is. To do that,

56
03:38.680 --> 03:41.770
the easiest way is to create a attribute

57
03:41.800 --> 03:45.010
which I'm going to call x_move and another

58
03:45.010 --> 03:47.290
which I'm going to call y_move.

59
03:48.640 --> 03:51.160
These are going to start out at 10,

60
03:51.610 --> 03:55.300
and every time we move our ball we're going to say,

61
03:55.800 --> 04:00.210
self.xcor + self.x_move,

62
04:00.660 --> 04:03.510
and plus self.y_move.

63
04:03.960 --> 04:06.210
This basically hasn't changed anything.

64
04:06.210 --> 04:09.390
It's just that every single time the ball moves,

65
04:09.660 --> 04:13.950
it's going to increase in the X coordinate by 10 pixels

66
04:14.370 --> 04:19.290
and also increased by 10 pixels in the Y coordinate. Now,

67
04:19.320 --> 04:21.060
when we bounce however,

68
04:21.510 --> 04:24.390
we need to change our y_move

69
04:24.630 --> 04:29.630
so that it's the opposite in terms of direction of what it used to be.

70
04:31.020 --> 04:35.310
So if it used to be +10 we want it to be now -10,

71
04:35.790 --> 04:40.170
and if it used to be -10, we want it to be now +10. To do that,

72
04:40.230 --> 04:43.110
all we need to do is multiply it by - 1.

73
04:43.680 --> 04:48.680
So that means if y_move is currently equal to 10 and 10 is being added to the Y

74
04:48.990 --> 04:51.750
coordinate, then this ball is moving upwards.

75
04:52.170 --> 04:56.760
But when we reverse the direction by multiplying it by -1,

76
04:57.120 --> 04:59.490
now that is now -10.

77
04:59.940 --> 05:03.570
So we're now adding -10 to the Y coordinate

78
05:03.600 --> 05:08.520
which is the same as subtracting 10. So this is some basic high school math

79
05:08.550 --> 05:13.080
that's going to get our pong program to start moving in the right direction.

80
05:14.040 --> 05:17.370
Now, back in the main.py under these conditions

81
05:17.400 --> 05:19.770
when the ball has hit the top or the bottom,

82
05:20.130 --> 05:22.650
we're going to get the ball to bounce.

83
05:23.550 --> 05:28.380
And now if I hit run, you should see that when the ball hits the top screen,

84
05:28.650 --> 05:32.580
it comes right back, exactly in the way that we want it to.

85
05:33.120 --> 05:35.130
But the only thing that we might need to tweak 

86
05:35.280 --> 05:39.450
is look at how far it's gone before it actually bounces. It completely disappeared

87
05:40.140 --> 05:42.870
of the screen before it actually makes a bounce.

88
05:43.260 --> 05:46.320
So we can adjust these values accordingly.

89
05:46.350 --> 05:50.490
So I think it works best that when we actually have it as 280.

90
05:51.000 --> 05:55.680
So remember that the width of the ball is 20 pixels

91
05:55.980 --> 05:58.580
so if we're 20 pixels away from the wall,

92
05:58.730 --> 06:02.240
then that's pretty much where we need to bounce. So if I run this again,

93
06:02.270 --> 06:06.980
you can see that the ball hits close to the wall and then it comes right back.

94
06:08.300 --> 06:12.320
So this will take a little bit of thinking to get your head around it.

95
06:12.650 --> 06:17.650
The best way to really understand this is to print out the values of the new_y

96
06:19.070 --> 06:20.840
and also of the y_move

97
06:21.080 --> 06:26.060
and also after you've modified the move in the bounce. Look at those numbers

98
06:26.150 --> 06:30.320
and you'll eventually be able to understand what's actually happening to the

99
06:30.320 --> 06:33.140
position of the ball. But effectively,

100
06:33.170 --> 06:38.030
all that we're doing is we're defining an amount that the ball is going to move

101
06:38.090 --> 06:40.400
by in the X and the Y axis.

102
06:40.850 --> 06:45.850
We're adding that amount to the X and Y coordinates in order to move the ball.

103
06:47.000 --> 06:50.180
And when the ball needs to bounce off the top and bottom walls,

104
06:50.450 --> 06:55.450
we reverse the y_move number so that we get it to subtract instead of add.

105
06:57.890 --> 07:00.230
And that moves it in the opposite direction.