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 4 seconds [VIDEO GAME MUSIC]

Skip to 0 minutes and 11 seconds I hope that you managed to implement the code so that the ball now stays on the screen and doesn’t leave the screen in the top and the bottom. You can see my code here. This is how I have implemented it. So if you didn’t– you can look at it and see how I managed to do it. Also, notice that I’ve now added comments to the lines. I won’t be doing that in the videos because I want you to write the comments yourself. It’s a good way of finding out if you understand the lines. So when I have added the lines, do that yourself in your own code. And then see if you can explain it using normal words.

Skip to 1 minute and 1 second And then next week, you’ll be able to see if the comments are the same as mine, or matches what I have written in the next week’s code. OK, let’s add some more functionality. Let’s get the paddle in, the ball in the bottom of the screen that can move, and which will be able to control so that we keep the little white in play. And yeah, let’s do that. It’s actually not that difficult to get it on the screen so that we can move it. Because we actually got most of the code from last week when we had the small ball that we could control on the screen. So we kind of have to copy what we have then.

Skip to 1 minute and 48 seconds So first of all, we know that we need to have what’s called a private bitmap. And let’s call it mPaddle. I like the word paddle for this. So let’s do that. And then we also need a float, a float in the x direction. We don’t need the y direction because this will never go up and down. This will only go from side to side. And I’ll just initialise that with 0. That’s actually all the data that we need for this path. Obviously, we need to set it up as well. I say obviously. You might not know this, but in this method, this is the very first thing that is run when the code starts running.

Skip to 2 minutes and 39 seconds We’ll need to set up the paddle like we set up the ball. And because I hate typing– well, I don’t hate typing. I hate typing more than necessary– I’ll just copy and paste it. OK. So in here, now I’ve actually said that the paddle will be a small, red ball. Yes, it’s called a small, red ball because at the beginning of my code, it was actually a red ball. But we found out that red and green as a background is not really nice to people with colour blindness. So I changed the colour from red to white. But it’s still called a small, red ball. That’s actually a little bit naughty of me. OK.

Skip to 3 minutes and 16 seconds If we remove the small, red ball here and just take the dot away and say dot, we’ll see the different types of resources that I’ve added to the game. And here we’ll need a yellow ball. It’s the big yellow ball that we’re going to use. So now we have a paddle which will be a yellow ball. We just haven’t added it to the screen. And we’re not drawing it to the screen. So let’s go to the set up here, and let’s set up the position of the mPaddle. So if we say mPaddle x, let’s have it in the middle of the screen. So we’ll have the mCanvas, and it’s in the x. So it would be the mCanvasWidth.

Skip to 4 minutes and 7 seconds And to be in the middle, it needs to be divided by 2. Good. So now we have the data set up for the paddle at the beginning of the game. Next thing we need is to then draw it. And we know how to draw because we have this line here what’s drawing the ball. So this will be similar. We just need to have the canvas and draw. It helps if I could write. Draw bitmap. And then the mPaddle.

Skip to 4 minutes and 45 seconds And we need to draw it in the mPaddle x. And this time we need to minus it with the mPaddles– width. Get width here. Divided by 2. And then the y is different. Because here we actually don’t need to put it in an M, mBall y and Paddle y. We need to just put it at the bottom of the screen, which will be mCanvasHeight.

Skip to 5 minutes and 24 seconds Then we need to remember that we need the height as well, of the ball. We need to still have the mPaddle’s height divided by 2, because we still have the problem with the top left corner. We want it to be the middle of the image. So mPaddle get height divided by 2. And then the null, I actually don’t know what that is. So before– oh, it’s if we wanted to put a paint. That’s something that we don’t want here. We just want the image. Good.

Skip to 6 minutes and 2 seconds That would draw it. Now it will be static, because we have the mPaddle x. It will never change. But we want it to change. So here, what we want to do is to actually just set it. When we’re touching the screen, we want the mPaddle to change to one of the x’s because that’s where the user clicked on the screen. So that will sort that out. And then we also want the code to change when the phone is moving. Remember, we had code similar to this for changing the little ball. So we should get something like that as well, but for the paddle. So let’s add PaddleSpeed x and mPaddle speed x.

Skip to 6 minutes and 56 seconds Now the problem here, of course, is that we don’t have a paddle speed x. So let’s add that up here.

Skip to 7 minutes and 8 seconds And let’s set it to 0. And when we set up the beginning, we would also want that to be 0, because we don’t want the ball to start out moving. It should be still when we start the game. Now we’re changing it no matter what when the phone has moved. But of course we know that there will be issues with moving outside of the screen. And we don’t want that. So we need some if statements here. Let’s say that if mPaddle x is less than 0, that then we don’t want the paddle to move at all. Then we just set the mPaddle speed x, to 0. So we overwrite the change in direction if it’s lower than 0.

Skip to 8 minutes and 11 seconds And likewise, if the mPaddle x is higher than the mCanvasWidth, then we also want to overwrite the setting. So let’s do that. So then the mPaddle speed is equal to 0. Excellent. Now, from the game code, when we had the game code in the first week, there we also changed the mBall x and y depending on the speed. We see it here. And obviously, we’ll also need similar code for the mPaddle. So mPaddle x equals mPaddle x. And then plus the seconds elapsed times the mPaddleSpeed x.

Skip to 9 minutes and 30 seconds If you have the opportunity, try to see how that works in a device. And you’ll probably see that it doesn’t work because there’s still an issue here. Now, it actually relates to that wobbly issue that we had in the image. Now we have the opportunity or possibility of actually stepping outside of the screen. So we get a situation where the mPaddle x goes outside, over the edge, so to speak. It goes into 0. So it becomes a negative or gets higher than the mCanvasWidth, and that’s a problem. Because if it is that, mPaddle x will always be 0.

Skip to 10 minutes and 15 seconds So what we need to do up here is ensure that the mPaddle x will never be lower than 0 and will never be higher than the mCanvasWidth. So we’ll need to add that to the statements. So not only do we set the mPaddleSpeed x to 0, we also want the mPaddle x– I was a little bit too fast on the trigger there– mPaddle x to become 0 here as well. And in this one, let’s add that if the mPaddleSpeed is 0 here and is higher than the canvas, then we also want the mPaddle x here to become the mCanvasWidth.

Skip to 11 minutes and 9 seconds And now, that should work.

Skip to 11 minutes and 14 seconds And this did work, but if you look at it closely you’ll see that the little ball, the paddle, is wobbling a little bit. And we therefore, we could actually add a test to see if the mPaddleSpeed is also negative. Then we want to do this. And here if the mPaddleSpeed is positive, well, then we want to do it. Because we actually only want to ensure that the ball is travelling outside of the screen, similar to the wobbling problem that we had earlier. Let’s test that. Hmm. Still not working. I wonder what that could be. Oh, maybe this is the problem. Yes, that is the problem. Because we will still be bouncing at 0 and change the mPaddleSpeed.

Skip to 12 minutes and 20 seconds So we would still be looking. You see, this is actually showing how difficult sometimes it is to do these if statements. Let’s test this to see if that works.

Skip to 12 minutes and 37 seconds And this indeed works, so yeah. Sorry, guys, if you don’t have a device. This is actually quite an interesting situation. But this, this will actually make the mPaddle go to the end, check if it gets over, and only change the mPaddleSpeed if it does go over and get the paddle inside the screen again.

Adding conditional statements to the game (Part 1)

In this video you’ll find out how to add conditional statements to your game code, and to use if statements to add more complex functionality to the game.

There is a guide to complement the video, which you can find at the bottom of this Step. You may find it useful to keep this guide open while you are working on the program code.

Share this video:

This video is from the free online course:

Begin Programming: Build Your First Mobile Game

University of Reading