1 00:00:00,030 --> 00:00:02,580 Now we've done most of the easy parts, 2 00:00:02,610 --> 00:00:05,790 getting a paddle and a ball up and running on our screen. 3 00:00:06,120 --> 00:00:08,700 The next few parts are going to be a little bit more tricky. 4 00:00:09,270 --> 00:00:13,530 And the first thing we're going to tackle is how to detect collision when the 5 00:00:13,530 --> 00:00:18,530 ball hits the wall at the top and the bottom and getting the ball to bounce. 6 00:00:19,470 --> 00:00:21,210 Now, we only need to detect 7 00:00:21,240 --> 00:00:24,660 collision on the top and the bottom walls 8 00:00:24,930 --> 00:00:29,190 because when the ball hits the right or of the left edges of the program, 9 00:00:29,490 --> 00:00:33,300 it should actually be caught by one of the paddles. And if it isn't, 10 00:00:33,360 --> 00:00:35,730 then that means that player has missed the ball 11 00:00:35,940 --> 00:00:37,440 and it's a point to the other side. 12 00:00:37,920 --> 00:00:42,920 So we need to focus on how can we detect when the ball has collided with the top 13 00:00:43,830 --> 00:00:45,060 or bottom walls, 14 00:00:45,420 --> 00:00:50,420 when has its position gone past a certain point that it probably is going to 15 00:00:51,210 --> 00:00:54,810 collide with the wall. We've done something similar in snake, but it's again 16 00:00:54,870 --> 00:00:58,260 time to revisit this topic. Now on top of that, 17 00:00:58,260 --> 00:01:01,650 we have to figure out how do we get the ball to actually bounce? 18 00:01:01,980 --> 00:01:06,090 And what does bouncing actually mean in terms of changing the position of the 19 00:01:06,090 --> 00:01:06,923 ball? 20 00:01:06,960 --> 00:01:11,960 When the ball is constantly going up in the Y value and going up in the X value 21 00:01:12,390 --> 00:01:14,340 in order to travel in this direction, 22 00:01:14,670 --> 00:01:19,170 what actually happens to the X and Y values when it bounces? 23 00:01:19,530 --> 00:01:22,440 Which one gets reduced and which one stays constant? 24 00:01:23,430 --> 00:01:28,430 Have a think about those questions and play around with some of those numbers 25 00:01:29,220 --> 00:01:33,630 and see if you can complete this challenge by yourself. If you get stuck 26 00:01:33,690 --> 00:01:35,250 or if you just want to check the answer, 27 00:01:35,490 --> 00:01:37,950 then come back and I'll go through the solution with you. 28 00:01:40,680 --> 00:01:43,590 All right. So it's going to be inside our while loop 29 00:01:43,800 --> 00:01:48,180 where I'm going to be detecting the collision with the wall. 30 00:01:48,720 --> 00:01:52,440 And in order to detect the collision with the wall, essentially, 31 00:01:52,470 --> 00:01:57,450 what I'm going to say is that if the screen is 600 by 800, 32 00:01:57,870 --> 00:02:00,870 when the ball is at a Y position 33 00:02:00,900 --> 00:02:03,390 that is above 300, 34 00:02:03,420 --> 00:02:05,940 remember 300 is half of 600, 35 00:02:06,270 --> 00:02:11,270 and the Y-axis goes from 0 to 300 and 0 to -300. 36 00:02:12,780 --> 00:02:15,630 So once the ball is past 300, 37 00:02:15,930 --> 00:02:19,770 then it's going to be way past the wall, right? So at that point, 38 00:02:19,800 --> 00:02:22,230 I can be pretty sure that it's going to hit the wall 39 00:02:22,260 --> 00:02:23,970 or it has it already hit the wall. 40 00:02:24,540 --> 00:02:27,810 So that will be my criteria for detecting collision. 41 00:02:28,170 --> 00:02:33,170 So it can say if the ball.ycor is greater than 300, 42 00:02:36,960 --> 00:02:41,610 well in that case it's basically gone too far up and it's hit the top wall. Now, 43 00:02:41,670 --> 00:02:44,820 in addition, I can add a or statement to say 44 00:02:44,850 --> 00:02:49,620 if the ball.ycor is less than -300, 45 00:02:49,980 --> 00:02:53,670 then that means it's gone too far down and it's hit the bottom wall. 46 00:02:54,120 --> 00:02:57,690 So in this case, it needs to bounce. 47 00:02:58,930 --> 00:03:02,350 So we need to figure out how to get our ball to bounce. 48 00:03:02,770 --> 00:03:07,770 And we're going to create a bounce method in our ball class in order to tell it 49 00:03:08,260 --> 00:03:10,270 how to do this. Firstly, 50 00:03:10,300 --> 00:03:15,300 we're going to need to figure out a new Y because the Y coordinate needs to 51 00:03:15,580 --> 00:03:17,530 essentially reverse. So, 52 00:03:17,530 --> 00:03:22,510 whereas previously our Y coordinate was going up and up and up increasing each 53 00:03:22,510 --> 00:03:26,860 time, when it hits the wall it needs to reverse direction. 54 00:03:27,130 --> 00:03:28,750 So if it was increasing, 55 00:03:28,810 --> 00:03:32,740 it needs to decrease. If it was decreasing, it needs to increase. 56 00:03:33,250 --> 00:03:38,250 So basically we need the opposite of what it currently is. To do that, 57 00:03:38,680 --> 00:03:41,770 the easiest way is to create a attribute 58 00:03:41,800 --> 00:03:45,010 which I'm going to call x_move and another 59 00:03:45,010 --> 00:03:47,290 which I'm going to call y_move. 60 00:03:48,640 --> 00:03:51,160 These are going to start out at 10, 61 00:03:51,610 --> 00:03:55,300 and every time we move our ball we're going to say, 62 00:03:55,800 --> 00:04:00,210 self.xcor + self.x_move, 63 00:04:00,660 --> 00:04:03,510 and plus self.y_move. 64 00:04:03,960 --> 00:04:06,210 This basically hasn't changed anything. 65 00:04:06,210 --> 00:04:09,390 It's just that every single time the ball moves, 66 00:04:09,660 --> 00:04:13,950 it's going to increase in the X coordinate by 10 pixels 67 00:04:14,370 --> 00:04:19,290 and also increased by 10 pixels in the Y coordinate. Now, 68 00:04:19,320 --> 00:04:21,060 when we bounce however, 69 00:04:21,510 --> 00:04:24,390 we need to change our y_move 70 00:04:24,630 --> 00:04:29,630 so that it's the opposite in terms of direction of what it used to be. 71 00:04:31,020 --> 00:04:35,310 So if it used to be +10 we want it to be now -10, 72 00:04:35,790 --> 00:04:40,170 and if it used to be -10, we want it to be now +10. To do that, 73 00:04:40,230 --> 00:04:43,110 all we need to do is multiply it by - 1. 74 00:04:43,680 --> 00:04:48,680 So that means if y_move is currently equal to 10 and 10 is being added to the Y 75 00:04:48,990 --> 00:04:51,750 coordinate, then this ball is moving upwards. 76 00:04:52,170 --> 00:04:56,760 But when we reverse the direction by multiplying it by -1, 77 00:04:57,120 --> 00:04:59,490 now that is now -10. 78 00:04:59,940 --> 00:05:03,570 So we're now adding -10 to the Y coordinate 79 00:05:03,600 --> 00:05:08,520 which is the same as subtracting 10. So this is some basic high school math 80 00:05:08,550 --> 00:05:13,080 that's going to get our pong program to start moving in the right direction. 81 00:05:14,040 --> 00:05:17,370 Now, back in the main.py under these conditions 82 00:05:17,400 --> 00:05:19,770 when the ball has hit the top or the bottom, 83 00:05:20,130 --> 00:05:22,650 we're going to get the ball to bounce. 84 00:05:23,550 --> 00:05:28,380 And now if I hit run, you should see that when the ball hits the top screen, 85 00:05:28,650 --> 00:05:32,580 it comes right back, exactly in the way that we want it to. 86 00:05:33,120 --> 00:05:35,130 But the only thing that we might need to tweak 87 00:05:35,280 --> 00:05:39,450 is look at how far it's gone before it actually bounces. It completely disappeared 88 00:05:40,140 --> 00:05:42,870 of the screen before it actually makes a bounce. 89 00:05:43,260 --> 00:05:46,320 So we can adjust these values accordingly. 90 00:05:46,350 --> 00:05:50,490 So I think it works best that when we actually have it as 280. 91 00:05:51,000 --> 00:05:55,680 So remember that the width of the ball is 20 pixels 92 00:05:55,980 --> 00:05:58,580 so if we're 20 pixels away from the wall, 93 00:05:58,730 --> 00:06:02,240 then that's pretty much where we need to bounce. So if I run this again, 94 00:06:02,270 --> 00:06:06,980 you can see that the ball hits close to the wall and then it comes right back. 95 00:06:08,300 --> 00:06:12,320 So this will take a little bit of thinking to get your head around it. 96 00:06:12,650 --> 00:06:17,650 The best way to really understand this is to print out the values of the new_y 97 00:06:19,070 --> 00:06:20,840 and also of the y_move 98 00:06:21,080 --> 00:06:26,060 and also after you've modified the move in the bounce. Look at those numbers 99 00:06:26,150 --> 00:06:30,320 and you'll eventually be able to understand what's actually happening to the 100 00:06:30,320 --> 00:06:33,140 position of the ball. But effectively, 101 00:06:33,170 --> 00:06:38,030 all that we're doing is we're defining an amount that the ball is going to move 102 00:06:38,090 --> 00:06:40,400 by in the X and the Y axis. 103 00:06:40,850 --> 00:06:45,850 We're adding that amount to the X and Y coordinates in order to move the ball. 104 00:06:47,000 --> 00:06:50,180 And when the ball needs to bounce off the top and bottom walls, 105 00:06:50,450 --> 00:06:55,450 we reverse the y_move number so that we get it to subtract instead of add. 106 00:06:57,890 --> 00:07:00,230 And that moves it in the opposite direction.