WEBVTT 00:00.000 --> 00:19.240 Alright, welcome back. 00:19.240 --> 00:23.400 In this video, we will program the movement of the ball, and we will learn about directions 00:23.400 --> 00:24.960 and degrees in this video. 00:24.960 --> 00:27.400 So, I'm going to get right to it. 00:27.400 --> 00:30.760 I'm going to select the basketball sprite right over here. 00:30.760 --> 00:34.840 So if you don't have it selected, select now and bring in a starter code block from the 00:34.840 --> 00:37.120 event section. 00:37.120 --> 00:46.400 So when flash clicks, I'm going to zoom into the code to make it very visible. 00:46.400 --> 00:51.840 And I'm going to bring in a forever block. 00:51.840 --> 00:57.960 So when the flag is clicked forever, the ball is going to move, and if it's on the edge 00:57.960 --> 01:01.000 of the screen is going to bounce. 01:01.000 --> 01:05.000 So here's what I'm going to bring into the code. 01:05.000 --> 01:09.760 I'm going to go to motion, and instead of changing x by a number of positions, or changing 01:09.760 --> 01:18.080 y by a number of positions, I'm going to bring in the first move, ten steps, and then 01:18.080 --> 01:24.480 I'm going to bring in the special if on edge bounce. 01:24.480 --> 01:28.800 So when the flag clicks forever, the ball is going to move ten steps, and if on edge, 01:28.800 --> 01:31.840 the ball is going to bounce. 01:31.840 --> 01:36.400 Now this blue block move ten steps is a little bit special. 01:36.400 --> 01:43.160 If you remember from the earlier video, we program the platforms by changing their x-coordinate 01:43.160 --> 01:50.040 by either ten or negative ten, and we learn about the x and y coordinates. 01:50.040 --> 01:55.880 This changes x by whatever amount and changes y by whatever amount. 01:55.880 --> 02:02.240 They basically move the sprite towards the right-hand side or the left-hand side direction. 02:02.240 --> 02:09.200 And changing y by a certain amount will move the sprite in the up or downwards direction. 02:09.200 --> 02:12.880 Now this move ten steps block is a little bit different because it allows the sprite to 02:12.920 --> 02:22.480 move this many steps in whatever direction it's pointing to. 02:22.480 --> 02:24.960 Alright, small explanation break. 02:24.960 --> 02:29.040 So I have here a small dummy project that I will use to explain directions and degrees 02:29.040 --> 02:30.240 for you. 02:30.240 --> 02:33.320 You don't need to do anything or create any new projects. 02:33.320 --> 02:37.480 I only have this little sprite in the form of a car, but I'm going to use it to explain 02:37.480 --> 02:39.000 directions. 02:39.000 --> 02:43.120 So notice that this car is pointing towards the right-hand side, and if you take a close 02:43.120 --> 02:48.880 look, the direction value is set to 90. 02:48.880 --> 02:54.000 This is 90 degrees, 90 degrees is the default direction for any sprite that you create 02:54.000 --> 02:59.480 from scratch, and 90 degrees means pointing to the right-hand side, much like this car 02:59.480 --> 03:03.240 is being turned. 03:03.240 --> 03:06.600 Let's play around with this little car to see how it can be turned. 03:06.600 --> 03:10.800 So if I click on this direction, notice this little pop-up, and we have a little helper 03:10.800 --> 03:17.720 icon in the form of a circle which will help us set up directions. 03:17.720 --> 03:22.520 So if I change the direction to zero, then the car will point upwards. 03:22.520 --> 03:27.480 If I want to increase the direction, I can drag this little arrow icon and notice the 03:27.480 --> 03:34.360 car can turn to the right. 03:34.360 --> 03:39.520 And its direction value increases up until it reaches 90, which is pointing to the right. 03:39.520 --> 03:45.280 You can turn the car to the right even more than that until the car starts pointing downwards 03:45.280 --> 03:52.280 and its direction starts increasing up until the value is 180 degrees. 03:52.280 --> 03:56.520 If I bring the car back to zero and start turning it to the left of that, then that means 03:56.520 --> 03:58.520 subtracting from zero. 03:58.520 --> 04:04.120 That means turning the direction into a negative value. 04:04.120 --> 04:09.360 So notice that as I start turning the car to the left, its direction decreases as it 04:09.360 --> 04:18.640 becomes more negative until it reaches 90 degrees, which means the car turning to the left. 04:18.640 --> 04:23.160 We can turn the car even further to the left, making the Russian even more negative until 04:23.160 --> 04:29.440 the car starts pointing downwards, up until the point where we get to 180 degrees, so from 04:29.440 --> 04:32.040 the direction zero. 04:32.040 --> 04:41.320 You can turn 180 degrees to the right and 180 degrees to the left. 04:41.320 --> 04:47.520 That means a total possible rotatione of 360 degrees. 04:47.520 --> 04:53.320 So if I tell the car to rotate a 360 degrees, either to the right or to the left, then that 04:53.320 --> 04:55.360 means not changing anything at all. 04:55.360 --> 04:57.440 Let me show you. 04:57.440 --> 05:04.640 So if I tell the car to be in the direction of 29 degrees, okay, what's 360 plus 29? 05:04.640 --> 05:10.400 Well it's 389, so if I change the direction to 389 degrees, then if I hit enter, the car 05:10.400 --> 05:14.800 will still point to the same 29 degrees, because the editor was smart enough to figure out 05:14.800 --> 05:19.360 that I added another 360 degree rotation, which has no effect. 05:19.360 --> 05:23.560 Now, before we move on, I'd like to ask you a question. 05:23.560 --> 05:28.200 What do you think would happen if I changed the direction of the car by 180 degrees, either 05:28.200 --> 05:30.280 to the left or to the right? 05:30.280 --> 05:34.640 So I'm going to go to motion here, and I am going to add this turn right and turn left, 05:34.640 --> 05:39.240 and I'm going to fill in 180 degrees in both, without clicking on them to see what it 05:39.240 --> 05:40.880 actually does. 05:40.880 --> 05:45.760 What do you think would be the effect of turning the car right, 180 degrees, and turning the 05:45.760 --> 05:48.440 car left 180 degrees? 05:48.440 --> 05:52.200 I'd like you to pause the video and think about what would happen if you clicked on these 05:52.200 --> 05:53.520 blocks. 05:53.520 --> 05:58.360 And then if you have an answer, click on the blocks to see if you were right. 05:58.360 --> 06:00.880 So what did you find? 06:00.880 --> 06:06.200 You probably found that if you click on either turning right by 180 degrees, or turning left 06:06.200 --> 06:10.840 by 180 degrees, the car will turn in the opposite direction. 06:10.840 --> 06:15.400 So if I click on this block, see how the car turns in the opposite direction. 06:15.400 --> 06:20.280 If I click multiple times, the car just flips its direction around regardless of whether 06:20.280 --> 06:28.200 I click on the turn right by 180 degrees, or the turn left by 180 degrees, all right. 06:28.200 --> 06:29.920 So keep that in mind. 06:29.920 --> 06:35.840 Turning right or left by 180 degrees will turn a sprite in the opposite direction. 06:35.840 --> 06:39.120 So let's bring what we've learned to our little pong game. 06:39.120 --> 06:41.800 So we're programming the basketball sprite. 06:41.800 --> 06:46.040 And I want the basketball sprite to start in the dead center of the screen. 06:46.040 --> 06:48.960 So that is at x and y equals zero. 06:48.960 --> 06:52.120 And I want the ball to point in a random direction. 06:52.120 --> 06:53.600 So how do we do that? 06:53.600 --> 06:57.840 Well, we are going to go to the motion section in the code, and I'm going to bring in this 06:57.840 --> 06:59.920 go to x and y block. 06:59.920 --> 07:04.280 I'm going to specify x to be zero and white to be zero. 07:04.280 --> 07:05.600 Okay. 07:05.600 --> 07:10.600 And then I also going to bring in this block point in direct action 90. 07:10.600 --> 07:15.280 But instead of 90, I'm going to put an around block that will say a random number between 07:15.280 --> 07:17.600 zero and 360. 07:17.600 --> 07:21.680 That means any direction in the possible 360 degrees. 07:21.680 --> 07:25.880 So I'm going to go to the operator section, this green section, and I'm going to pick 07:25.880 --> 07:29.080 this rounded block, pick random 1 to 10. 07:29.080 --> 07:33.360 I'm going to snap it inside the 90 where the direction home was, and I'm going to specify 07:33.360 --> 07:35.960 random 1, 2, 3, 60. 07:35.960 --> 07:37.160 All right. 07:37.160 --> 07:38.320 So let's try it out. 07:38.320 --> 07:41.600 I'm going to click on the green flag and notice what the board does. 07:41.600 --> 07:46.080 It starts in the center of the screen, and it bounces in between the walls of the stage, 07:46.080 --> 07:47.480 which is awesome. 07:47.480 --> 07:51.800 If I start the project again, it always starts from the dead center of the screen, and 07:51.800 --> 07:54.280 it shoots in a random direction. 07:54.280 --> 07:55.600 This is awesome. 07:55.600 --> 07:59.640 Now the ball bounces around the stage, and it starts in the center of the screen. 07:59.640 --> 08:00.640 All right. 08:00.640 --> 08:05.640 I'm going to stop the project now, and I'm going to implement a small reflection mechanism. 08:05.640 --> 08:07.040 What do I mean by that? 08:07.040 --> 08:11.160 Well, when the ball touches either of the platforms, I want it to bounce back so that 08:11.160 --> 08:16.160 the ball only bounces in between the side walls of the stage and between the two platforms. 08:16.160 --> 08:18.440 Let's go through the platforms like it now does. 08:18.440 --> 08:19.840 So let me do the following. 08:19.840 --> 08:23.920 I'm going to go to the control section, the orange section, and I'm going to bring in 08:23.920 --> 08:28.440 an F block, and in the diamond-shaped hole, I'm going to go to sensing, and I'm going 08:28.440 --> 08:30.760 to bring in this first touching block. 08:30.760 --> 08:34.280 And instead of the mouse pointer, I'm going to select the downbar. 08:34.280 --> 08:38.280 So if the sprite touches the downbar, I want it to bounce back. 08:38.280 --> 08:42.240 For now, that will imply turning in the opposite direction. 08:42.440 --> 08:46.480 Now, you learned a couple of minutes ago, we're turning in the opposite direction. 08:46.480 --> 08:49.920 Means it means changing the direction by 180 degrees. 08:49.920 --> 08:53.240 So I'm going to go to motion, and I'm going to take this turn block. 08:53.240 --> 08:55.960 I'm going to turn right by 180 degrees. 08:55.960 --> 08:56.960 All right. 08:56.960 --> 09:01.840 Now, I'm going to bring this if block in between the two blue blocks in the forever loop. 09:01.840 --> 09:04.880 So let's click the green flag and see what happens. 09:04.880 --> 09:07.240 So the ball is moving in a random direction. 09:07.240 --> 09:11.520 And if it touches the red bar, the downbar, notice that it bounces back. 09:11.520 --> 09:12.520 All right. 09:12.520 --> 09:17.680 If I click the green flag again, because this exact example is not super conclusive, notice 09:17.680 --> 09:22.000 that the ball is now moving a little sideways, not necessarily up and down. 09:22.000 --> 09:26.640 And if it touches the red bar, it should go exactly 180 degrees back. 09:26.640 --> 09:30.000 See, it turns exactly in the opposite direction. 09:30.000 --> 09:31.080 All right. 09:31.080 --> 09:32.080 This is nice. 09:32.080 --> 09:35.560 I'm going to stop this, and I'm going to add a similar condition for the UP blue bar 09:35.560 --> 09:36.560 as well. 09:36.560 --> 09:38.160 So I'm going to go to control. 09:38.160 --> 09:40.120 I'm going to bring in an if block. 09:40.120 --> 09:43.960 From the sensing, I'm going to add a similar diamond-shaped touching block, and I'm going 09:43.960 --> 09:45.720 to select UP bar. 09:45.720 --> 09:46.720 All right. 09:46.720 --> 09:49.760 And inside, I'm going to again turn 180 degrees. 09:49.760 --> 09:54.520 So I'm going to go into motion, I'm going to bring in the turn block, specify 180 degrees 09:54.520 --> 09:58.640 inside, and I'm going to bring this block right below the other block. 09:58.640 --> 10:00.680 So just like this, all right. 10:00.680 --> 10:02.920 So we have two blocks one after another. 10:02.920 --> 10:05.800 And right now, we should have an almost functional game. 10:05.800 --> 10:09.720 If I click the green flag, now we see that we can control both the blue and the red 10:09.720 --> 10:10.880 bars. 10:10.880 --> 10:14.920 But we get into this very silly situation, where the ball can bounce back in between the 10:14.920 --> 10:19.680 players, which is not a very fun game because it can get stuck like that forever. 10:19.680 --> 10:21.160 All right. 10:21.160 --> 10:24.960 So we need a smarter way to have the ball bounce in between the platforms. 10:24.960 --> 10:29.400 So I'm going to stop the project now, and I'm going to implement an actual proper bouncing, 10:29.400 --> 10:32.680 so the ball will move something like this into the platform. 10:32.680 --> 10:37.000 And instead of bouncing 180 degrees back, it will bounce like it was reflected from 10:37.000 --> 10:38.760 the platform. 10:38.760 --> 10:40.640 This is going to be interesting. 10:40.640 --> 10:42.440 So here's what I'm going to do. 10:42.440 --> 10:48.680 I'm going to take the turn right by 180 degrees, and I'm going to pull it into the open space. 10:48.680 --> 10:53.680 And instead of that, I'm going to bring in the point in direction, block, and instead 10:53.680 --> 10:58.920 of 90, I'm going to go to operators, the green section, and I'm going to bring in this 10:58.920 --> 11:01.400 rounded difference operator here. 11:01.400 --> 11:06.320 In the first hole, I'm going to put in 180, and in the other hole, I'm going to put 11:06.320 --> 11:08.320 in the direction of the sprite. 11:08.320 --> 11:11.960 So I'm going to go to motion, and I'm going to scroll down and bring in this rounded 11:11.960 --> 11:13.760 direction. 11:13.760 --> 11:19.520 Block So, what this blue block do is it sets the direction of the spreet to be 180 minutes. 11:19.520 --> 11:23.160 What the direction of the spreety was before this blue block was executed. 11:23.160 --> 11:26.360 Let me show this to you with the little car project that I have here. 11:26.360 --> 11:30.120 So I have this little car sprite, and I'm going to remove the turn blocks, and I'm going 11:30.120 --> 11:34.320 to add the point interaction block, and I'm going to have the same operation here. 11:34.320 --> 11:38.280 So I'm going to go to operators, bring in the difference, block, and I'm going to 11:38.280 --> 11:44.040 say 180 minus, and I'm going to go to motion, and I'm going to bring in the direction value. 11:44.040 --> 11:46.160 So let me show you the effect of that. 11:46.160 --> 11:50.440 Assume the car goes like this towards the edge of the stage, and I hit this block. 11:50.440 --> 11:51.560 Look what happens. 11:51.560 --> 11:54.640 The car turns as though it bounces off the edge of the stage. 11:54.640 --> 11:59.000 If it goes like this, and I hit this block again, that same effect. 11:59.000 --> 12:02.960 It seems as though it's reflected off of the horizontal edge of the stage. 12:02.960 --> 12:06.800 So this is the effect that we're after, with our basketball sprite bouncing off of our 12:06.800 --> 12:08.680 horizontal platforms. 12:08.680 --> 12:12.320 So I'm going to go back to my project, and I'm going to copy this point in direction 12:12.320 --> 12:17.800 180 minus direction, block by right clicking on the blue area, duplicate, and put it under 12:17.800 --> 12:22.640 the second if block the touching up bar, and then turn right by 180 degrees. 12:22.640 --> 12:23.920 I'm going to drag it out. 12:23.920 --> 12:25.400 I'm going to remove it. 12:25.400 --> 12:29.960 Now, the expected effect is going to be that when the basketball touches either of the 12:29.960 --> 12:34.600 bars, the blue or the red one is going to bounce off of them, as it bounces off of the 12:34.600 --> 12:36.720 left and right edges of the screen. 12:36.720 --> 12:40.880 So let me click on the flag now, and let me control the players up and down bars. 12:40.880 --> 12:43.560 So we have here the exact effect that we're after. 12:43.560 --> 12:47.160 So notice how the ball bounces back and forth between the platforms. 12:47.160 --> 12:48.160 This is very nice. 12:48.160 --> 12:50.400 I'm going to stop the project now. 12:50.400 --> 12:51.400 All right. 12:51.400 --> 12:53.200 So we've done a lot in this video. 12:53.200 --> 12:57.760 We programmed the ball to bounce off of the stage and off our player's platforms by implementing 12:57.760 --> 13:01.160 a reflection mechanism by changing direction. 13:01.160 --> 13:02.480 This is very cool. 13:02.480 --> 13:06.960 In the next video, we will implement the rest of the game, including scoring. 13:06.960 --> 13:10.040 I'm really excited, so I'm waiting for you in the next video.