Want to keep learning?

This content is taken from the University of Reading's online course, Begin Programming: Build Your First Mobile Game. Join the course to learn more.

Skip to 0 minutes and 11 seconds So we now have both the ball and the paddle on the screen. Of course, if we are running it, we can see that there’s no collision detection. They don’t collide. The ball, the little ball here, is just moving about minding its own business. And that’s, of course, slightly annoying, because we don’t have a game. So let’s add some collision control, collision detection. It’s actually one of those things that are normally quite hard to do in games. That’s been written in plenty of papers and done a lot of research into how to do these things correctly. But here we can use the fact that we are actually working with circles.

Skip to 0 minutes and 58 seconds If we’re looking at this image here, we’ll see that we know that two poles will only collide if the radiuses of the two balls is higher than– sorry, is lower– than the distance between the two centrums. The centrum of the two circles. So for us to detect a collision, we will just need to find out if the distance between the two circles is lower than the two radiuses. And how do we do that? Well, if we’re familiar with maths, and from maths we know about Pythagoras Theorem, we know that the c here, the c squared is equal to the a squared plus b squared. And we can actually utilise that to find the distance between two circles.

Skip to 1 minute and 58 seconds So if c is less than or equal to r1 plus r2, well, that’s the same as saying c squared is less than or equal to r1 plus r1 squared. So if you put that into the code, we’ll know that we have a collision. Let’s try and do that. Well first of all, we know that we would only collide if the ball, if the small ball, is moving towards the paddle. And to make life a little bit easier here, I will do that by saying that if the m ball, speed y, is positive, then it’s going towards the paddle.

Skip to 2 minutes and 52 seconds It’s not exactly correct, we can come into situations where it won’t work, it would look different to what we would expect, but in most cases this will work. It’s just to simplify things a little bit. OK. The next thing we need to do is to– we’ll need to have a float that is the distance between the ball and the paddle. So inside here we will calculate that. So the distance between the ball and the paddle will be, let’s see, the n paddle x, because that’s the position, minus the m ball x multiplied by this again, because that’s squared.

Skip to 3 minutes and 53 seconds And then we have to– at the other distance, the other side in the Pythagoras, that would then be the m canvas height, because that’s where the paddle is in the y, minus the n ball y, here we have it. And that we also need to square.

Skip to 4 minutes and 24 seconds So this would be the distance between the ball and the paddle. It would be the distance in x between the paddle squared plus the distance between the paddle and the ball in the y direction squared.

Skip to 4 minutes and 46 seconds Now I’ll write a little bit of pseudo code. So if the m, the minimum distance, between the ball and paddle is higher than or equal to the actual distance between ball and paddle, then we have a collision. So if we have that, we should do something. And let’s just say that we’ll change that, so that the ball speed in y should change to, let’s say, minus 200. Yes, minus 200. Yeah, that’s a value that’s going upwards, so that will be fine. OK. Obviously, this would look strange, it won’t look like real physics. OK.

Skip to 5 minutes and 57 seconds So all we need to do is to find this minimum distance, but the minimum distance will actually be the radius of the ball, and the little ball, squared. And we know that the radius of the paddle and the little ball will be half the distance of the width and the height. The width and the height are the same, so it would basically be the paddle’s distance– sorry, the paddle’s width– halved plus the ball’s width halved. And then we will square it, because they need to be squared according to the maths. I could do that here, but then we would do it in every single time we update in the game.

Skip to 6 minutes and 58 seconds And we know that the size of the ball, the size the paddle, will not change. Once we have them set up with the graphics, we’ll know the size of them. So we could actually set that up in the set up, when we’re setting up the game. So if we do that up here, and we then, sorry, we’ll take this and I’ll copy it in here and say, OK, so this here is equal to the n paddle’s width halved, plus the n ball’s width halved. And then we would need to multiply it by itself. So we square it. That would be that distance. And then all we need to do now is declare it, so we’ll just declare it up here.

Skip to 8 minutes and 7 seconds And we get a private float.

Skip to 8 minutes and 16 seconds So now we’ve actually added that to the code. We have now set the minimum distance that we need to have between the ball and the paddle, and we use it. Now, notice that we’re not making the square root, because we actually don’t need to know the exact distance. All we want to see is if it’s smaller. And we can do that without using the square root. Let’s see if this actually detects something.

Skip to 8 minutes and 48 seconds So we have the game. Let’s see. Yes. It’s certainly detected something– oh, well, well off it goes, it’s bouncing still off the bottom. But yes, it is hitting the ball. Of course, we see that– yes, the physics are off the scale, it really doesn’t do what we expect it to do, it’s not bouncing off the circle. But it is detecting the circle and changing the speed. So what we need to do now is find some way of adding appropriate, or something that looks like physics, at least, into that if statement.

Skip to 9 minutes and 31 seconds Now what I’ll do here is tease a little bit, because it’s actually quite hard to do real physics. But if I forget about the speed of the ball and the weight of the little ball , and just say when you hit the big ball, the paddle, we you hit the paddle, let’s just change the speed so that it flies out from the paddle in the direction that the paddle– if that had all the weight in the physics– that the paddle would send the ball off in the direction, so that the direction would be from the radius to the radius of the little ball and in a straight line. That’s relatively simple to calculate.

Skip to 10 minutes and 20 seconds Because to do that, we would just need to set the speed to be the speed of the ball from the m ball at x minus the m paddle x at the speed of y from m ball y to the m canvas height. So we could easily change that and put that into the code. So let’s do that. The m ball speed y would be the m ball y minus the m canvas height. And I like doing x first, so let’s put m ball x– speed x, sorry– should be equal to the m ball x minus the m paddle x. We have it there. And now the speed would change.

Skip to 11 minutes and 23 seconds Of course, this would probably go very fast, but let’s see that the speed changes in the direction that we want it to go. We might have speed issues. And we’ll run it. Oh, it’s not going fast, it’s going very slow. But you see, the direction of the ball was in a direction that was more expected. Close to what we’d expect, looking at it as a physical system. So we need to change the speed, so that the speed before and after– before it hits and after it hits– is the same. So if I create a float here that says the speed of ball, what the speed of ball be?

Skip to 12 minutes and 12 seconds Well, the speed of the ball would be– well, similar to the image before, we’ll have to use Pythagoras Theorem here to actually calculate the speed of the ball. Because it would be the square root of m speed x squared plus m speed y squared. See, we’re making use of Pythagoras quite a lot here. So we need to have it as a float maths. I’ll use here a function from maths, which is square root, we find square root, and it returns what’s called a double. So I’ll just say it will be a float, because we know we don’t to be a float, the speed would be quite low.

Skip to 12 minutes and 58 seconds So the square root all m ball speed x squared, so just do m ball speed x here. Oh, not paddle. Silly me. Ball speed x. And then plus the ball speed y m ball speed y. Now we square them and that will give us the speed of the ball before they have hit. They hit here. I changed them again. So we’ll just copy and paste this over and I’ll call this new, let’s call it new speed of ball. And that was actually– it will be same, because now we change m speed and we’ll get the new speed.

Skip to 13 minutes and 57 seconds And then we just want to update the speed so that they become the same as what– so that the actual x and y speed will increase so that the velocity is the same before and after. To do that, we just have to update the x and y with the fraction between what the speed was before and after. So we’ll just say that the m ball speed x and the m ball– is equal to the m ball speed x, multiplied by the fraction between the speed of the ball before divided by the new speed of the ball. And we also need to do that in y.

Skip to 14 minutes and 50 seconds If you find it hard to follow, I know this is quite mathematical– unfortunately computer programmes often are quite mathematical– but if you find it a little bit difficult to follow, try and draw it, try and draw it and see if you can see what I’m doing here. I’m just making use of and Pythagoras Theorem, and I’m also making use of how fractions of vectors are working. But if you try and draw it up, it will be easier for you to follow. Let’s test it. And see now the speed is the same, before and after. And it’s going in a direction that we expect. Let’s see if I can get it to go in another direction.

Skip to 15 minutes and 41 seconds It’s actually quite hard to hit it. There we are. It goes almost straight now, as we expect. And now I’m giving you a little bit of an angle. And now it’s doing something that we’d expect. Our eyes are not thinking, oh, this was wrong. It’s actually doing something that looks proper in a physical world. Now, we still have the problem that the ball will hit the bottom. We’ll remove that. And we do that because we can just easily change it. Because this is actually done down here. So let’s just remove this one here and let’s see what happens. So if we let it fall through, you see, it falls through.

Skip to 16 minutes and 31 seconds So now it’s gone. So we need to do something about when it’s gone. Because we are not losing the game. And I’ve actually created a functionality for that. So if the n ball y is higher than or equal to the n canvas height, well, then we know we’ve lost the game. So what we need to do is to change the state of the game. And there’s something called set state. This will actually change the state of the game. And I know that this will be a little bit beyond what we are teaching here, but in what I call the game thread, we can actually set different states.

Skip to 17 minutes and 16 seconds So if you want to change the state of the game, you could do that by using this. Set state and then game thread dot. And if the ball drops down, it will be a lose, a loss. So we’ll just set the state of the game here, and we’ll run it, and we’ll see. We lose. So, yeah. I would also like to give a score. Give a point for actually hitting it. I find it’s quite hard to hit the ball. So I’ll do that. And I’ve actually created a function that will update the score. So here, we update the score, and I just give one point for hitting. Do that in here. We know this is a hit.

Skip to 17 minutes and 56 seconds So now I’ll update in the score. Let’s try that. Let’s see. Yes. We have a score. It’s going off. Fantastic.

Skip to 18 minutes and 6 seconds This is actually quite an achievement. I hope you enjoyed doing this. Now, the next step is, of course, to put in the smiley face in the top of the screen. You should be able to do that using the same methods that I have done here. Of course, it’s slightly easier because this won’t be moving. So you just add the smiley face and then put in collision control between that and the small ball, and give it a point, instead, for finding the smiley ball, instead of doing the paddle, and getting a point for hitting the paddle. Try and see if you can do that.

Adding conditional statements to the game (Part 2)

This video follows on from Part 1 (in the previous Step, continuing to demonstrate how conditionals are used in the game. We’ll be covering how to use the debugger in the IDE to identify problems or ‘bugs’ in the code and fix them.

For more details on the mathematics and code that show how collisions are detected in the game, you can download the guide found at the bottom of this Step. Or alternatively, you may find opening the guide in a separate Window (right click > Open in a new window) or printing it out is useful to refer to while viewing the video.

If you get stuck at any point:

  • Try looking at the comments in the discussion at the end of the relevant step(s) to see if other learners have been having the same issues and if anyone has been able to offer a solution.

  • If you are following our educators or mentors, they may have already answered your query. You can check if their responses are relevant by filtering the comments using the ‘Following’ tab.

  • If you can answer a problem, please share this with other learners in the comments area.

  • Visit the Begin Programming FAQs we’ve put together for you.

  • Put a brief description of the problem in your favourite search engine (eg Google) and look for responses that match your experience and operating system. We find that replies on StackOverflow are particularly useful as they are rated.

  • If you’ve received an error message, search on the exact message in quotation marks.

  • If you find a useful answer, please ‘like’ it to make it easier for others to find. Once you’ve got the software set up, don’t go away! Why not read through the comments here and discussions at the end of the week to see if you can help others.

Share this video:

This video is from the free online course:

Begin Programming: Build Your First Mobile Game

University of Reading