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 Let’s begin by looking at the end result of this week. So what we’re working towards now. OK. First of all we notice that there’s a yellow ball here in the corner instead of a small ball. When we click it we get something that looks more like a game actually. So we’ve got a paddle here on the end that I could control. If you were doing it on the phone you would see that it is using the motion sensor to move. We got the small white ball that is moving around. But it’s just moving around. It’s actually not being directly changed by any of my use input. It’s just moving.

Skip to 0 minutes and 53 seconds But we also noticed something, and that is that it’s bouncing off the walls.

Skip to 0 minutes and 59 seconds It’s not going outside. Those are two things that are important. Of course we also have the two paddles. We have a smiley face up there that we could see that we’re scoring points when we’re hitting.

Skip to 1 minute and 13 seconds And the little ball reflects from it. But this video, we will be looking at the little wire ball. We’ll focus on that first, because it’s really good when we are trying to solve problems in computer science and on computers to break it down into smaller problems. So let’s just focus on the white ball and get that fixed. So it access we would expect. So the first thing we observe was that the ball was actually not on the screen. And it’s really easy to remove from the beginning before we start the game because we could just place it somewhere else on the screen. So let’s put it at minus 100 by minus 100.

Skip to 1 minute and 50 seconds Because the top end of the screen is 0, 0, so if we put it at minus 100 and minus 100 and why? It will be somewhere to the left and above the top of the screen. So now it will actually not show up. We notice that the ball was not reacting to any use inputs. And that’s actually very simple to fix and make it like that. Because we don’t need to change anything when we are touching the screen or when the phone is moved, so we just delete everything in the methods action untouched and action when the phone moved. And there will be no reactions to use inputs. So that’s pretty simple.

Skip to 2 minutes and 35 seconds So we just did that in the code already. Let’s fix first so that it does not leave the screen. So I’ll start out by giving you the speed. I’ll fix it in the acceleration first. So let’s focus on the acceleration. Let’s have it go to the left. That is a minus 100. So I’ll put minus 100, and we’ll just see that that works. That it is how I– what I think it will be. So we now see there’s no ball on the screen all. Good. So that’s fixed. We put it in the middle, which we expected, and it starts going to the left. So exactly as we expect. But of course, it is leaving the screen, and that’s a problem.

Skip to 3 minutes and 21 seconds So now we need to use a conditional, because what we want to do now is check if the ball has left the left side of the screen. And if it has, do something about it. So I suggest that the good place to do that would be in update game because this is where all the updates should happen in between showing the state of the game in our draw. So let’s put it in here. And here we then need an if statement that checks if the ball is outside of the left side. We know the left side is zero.

Skip to 4 minutes and 0 seconds So what we need to do is have an conditional, an if statement that– let’s say check if the n-ball x is lower than zero. Because n-ball x is the position of the screen. 0 is left side of the screen. So if it’s minus, it will be outside of the screen. Let’s try that. And then, if it does get there, let’s first start out with saying OK, we just upped the speed of x and put it to zero in the first instance. Just to see that this works. OK. Let’s run it. And we are ready, so I will click it. We see it moves and it stops. So it definitely works. The if statement works.

Skip to 4 minutes and 49 seconds However, we notice that the ball is halved. And that’s because of course n-ball x is the middle of the circle. So actually in reality what we’re checking right now is if the middle of the circle is going outside of the screen, we’ll stop. So what we now need is n-ball x to be less than zero, plus the width of the ball halved. Because if we do that, then when the centre of the ball is half the width away, it will recognise that some of the ball is going outside of the screen. So let’s do that. N-ball– and remember that if we have n-ball we can actually get the width of it, and then half it.

Skip to 5 minutes and 49 seconds Because now then we are checking that the ball is not going outside the left side. Yes. So of course we could just get rid of zero and plus, because that’s just maths. It’s meaningless. And we should probably say equals to, although it will very rarely be zero, or the exact value. But now I think this should actually work. Let’s see. OK. So let’s try it. And voila! Works. It stops. Good. The next thing we need of course, is for it to move, instead of just stopping. And we could of course just say 100. We know it’s 100 in minus, so to bounce off the wall, it should then just be the opposite of minus, so plus.

Skip to 6 minutes and 42 seconds So 100 in, 100 out. We know in equals out when we’re doing physics. So let’s see if that works. And we click here, and we see it bounces off as expected. Yay! And of course we get the problem on the other side. We’ll fix that. So to fix it on the y, we should probably just copy and paste this.

Skip to 7 minutes and 16 seconds And then we of course have to check y. N-ball y instead of x– no sorry. X, of course is the one we’re going to do. It’s on the right side and not up top and bottom.

Skip to 7 minutes and 33 seconds But now of course it needs to be minors, because it’s the other side. And it should be the width of the screen, which we know is the m-canvas width. That’s the one. So here we have the right side of the screen. And instead of adding the balls width by a half, we minus it, because then we are looking on the other side. And we then say minus 100. Now let’s see if that works. It should work. Let’s see. It doesn’t bounce off. Ah. [LAUGHS] I turned it the wrong way. We should have it this way, because of course right now we were checking if it was less than the right side. And therefore it would be minus 1.

Skip to 8 minutes and 25 seconds It’s always less than the right side. We need to check that it’s going over the right side. It’s good to test. It’s really easy to make mistakes when we’re doing these kinds of things. So now let’s see. Now I hope it works. Yes, it goes to the right. And yes, it goes to the left. So now the ball is bouncing. Of course right now we have a scenario. The problem here is that it can only do 100, it would almost have the same speed, and it doesn’t go up and down. We haven’t done top and right. Top and the bottom. So let’s fix that. So there’s actually a very easy way to fix the speed issue.

Skip to 9 minutes and 7 seconds Because if you notice, this 100 down here, if we get to this position, would actually be m-ball x. And we just take the minus of m-ball x, effectively. So actually, what we could go down here– is we know the speed will be m-ball x. It’s just saying now we want the m-ball x speed to be negative of what it was before.

Skip to 9 minutes and 36 seconds So that should fix that problem. And actually, thinking about it, if we hit it here at the moment, it will be minus 100, because it’s the m-ball x speed, and that would be minus 100. So if you’re going in and hitting on the left side, we know it’s minus 100. And to get 100 would be to do minus minus 100, right? So we could actually just do the same up there. So let’s copy and paste this one up. Now of course we have– we actually have that– it’s the same in here. But let’s just see if it works. Let’s just see how that works. Let’s run it. See? Yes, it bounces. And it bounces. Fantastic. Excellent. It works.

Skip to 10 minutes and 34 seconds Oops. There’s a little problem there. But it seemed to work. Ooh, yeah. OK. That’s something that we must fix. I think I know what that is. Let’s look at that later.

Skip to 10 minutes and 49 seconds Yes. Let’s do that one later. Now what we need to do is to try and see– to put in a speed up here that’s different than minus 100. I suggest to change that to 100 because if the screen is bigger or smaller, 100 might not be appropriate. And I like to make it more related to what the screen size is of the device. And what I often do is take something like OK, so the speed and in x should be connected to the canvas width. Because then it’s related to the size in the x direction, which is good.

Skip to 11 minutes and 35 seconds And I find that a third of the speed in camera width is a good speed for me, so I just set that to be the speed. And now we’ll have another speed. And it’s slightly slower on this emulator. But it really depends on the size of the screen. And now of course the thing we had before works. Good.

Skip to 12 minutes and 3 seconds So let’s see. There’s something here that we should able to improve on. If you notice, this line and this line are the same. So we should be able to put the logic together, just by putting an and.

Skip to 12 minutes and 29 seconds And adding this here, after the and. And let’s remove this. Because now we’re just saying if the ball is outside of the left side– sorry. It shouldn’t be an and, it should be an all. I’m really not focusing here. Let’s focus.

Skip to 12 minutes and 55 seconds And where is it on my keyboard? Here we are. That’s why we have the all. So instead of saying and it’s actually or, so if the ball is outside of the screen to the left, or the ball is outside of the screen to the right, change the speed so it becomes the negative of the speed it is now. Good.

Skip to 13 minutes and 18 seconds And we see it is definitely still in the right. And ooh, we have that problem. We have that problem. Let’s try it again.

Skip to 13 minutes and 30 seconds That’s a really annoying problem. Let’s fix it. OK. Let’s see.

Skip to 13 minutes and 39 seconds We know it could bounce. We know it could bounce. We just have that issue. Let’s fix that. I think that’s due in. OK, so the problem here is that we have an issue with how the ball is updating. Let’s look at this picture here. The ball it’s outside. It’s not outside. It’s inside the screen, first off. But because it’s travelling to the left, it goes over the line and little bit. I’ve exaggerated it here. It gets checked, and it starts going to the right. But if it doesn’t get back into the screen before the next update, it will then again be negative, and start going out this other screen.

Skip to 14 minutes and 29 seconds And it could actually stand there and bounce off, and keep bouncing off it could never get into the screen again. Now that’s an issue. But we can actually put that, a solution to that problem, in the logic. Because if we realise that we can only get outside of the screen to the left if the speed is negative, and we can only get outside of the screen to the right if the speed is positive, we add that to the logic and then we’ll never have this problem. Let’s try and do that.

Skip to 15 minutes and 8 seconds When we’re going outside to the left, it has to be negative. So we need now we need the and. Now we need the and. And then we need to say n-speed– n-ball speed x is negative. So less than zero. I like having parentheses around here. Street speaking is probably not necessary in this instance because of the precedents of the operators, but I just think it reads easier to have parentheses around big statements like this. And if we’re doing the same on the right, it should be an and. The m-ball speed of x is positive here.

Skip to 15 minutes and 53 seconds Now we are checking that the speed is both– you know we’re outside the screen and the speed is going even more out of the screen, and then we change the speed. Let’s check that out. Hopefully that works. Let’s see. It bounces off nicely. Should probably have it going for a little bit of time. But it seems to work, which is really, really good. Excellent. So that’s fine. That’s all well and good. You try and have it running for some time longer on your own computer to see. But it should work now. So that fixes that wobbling problem there. OK. So we now also know of course that the ball should be moving in the y direction.

Skip to 16 minutes and 46 seconds So let’s put some y direction in here. And we should have height there, because now we’re looking in y. And when we’re looking in y it’s height of the screen that’s the important. And that’s before– I will do– divide it by 3. And let’s see what happens. Let’s see. It did definitely bounce off. But of course we got the button problem here, and probably also the top button problem. So that’s an issue. Now I would like you to fix the top and the bottom. I think you should be able to. Try it out. Trying and have a go at it. You can use the same kind of logic that I’ve used here. And test for the top and the bottom.

Skip to 17 minutes and 37 seconds And make the ball go in the opposite direction.

Introduction to conditional statements

In this video you’ll learn about conditional statements and how they’re used in programming. You’ll be making use of them in the game, and will also get an introduction into Boolean logic, and how this can be used to make your conditional statements even more powerful.

You may find it helpful to download/print the Guide to conditional statements in the game, which provides additional information and step-by-step instructions on making the changes covered in the video.

Share this video:

This video is from the free online course:

Begin Programming: Build Your First Mobile Game

University of Reading