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 start by looking at how the game will look when we finish this video. So let’s play it. We have it here. This is actually the full game. There are still changes that we need to do in later weeks, but yes, we’ll actually end up with a full game. So we will have the three sad faces. And the sad faces are blocking the way for the white ball. I actually got it into a really bad angle there, didn’t I? OK, so the sad faces will block the way for the ball. They won’t score. There won’t be negative scores for hitting them, but they will just block the way.

Skip to 0 minutes and 51 seconds And then you have to hit the smiley face up there and score a point. So there are three of them. And because we are teaching arrays and for loops here, we’re probably going to do it that way instead of creating them all individually. So we’ll be using a for loop and arrays to store them. OK, so let’s try and do that. In the code, I’ve already prepared the data structure and the x and y positions of the sad ball. You’ll notice that I only use one bitmap. That’s because all the bitmaps were identical. So I could just reuse the bitmap. It’s good to not use too much data in a mobile phone game.

Skip to 1 minute and 39 seconds So I use one bitmap for the sample. And then I have the two arrays, one for x, m sad ball x, and one for y. And I have initialised them in two different ways here, basically just to show you that you can do it in these two different ways, and also because the x direction, I’ve put them all in minus 100. The y will all be 0 when they initialise. So in this way, we ensure that they will not be drawn on the screen before the game starts, and you see two different ways of initialising them. Let’s create the bitmaps. I like copy and pastes, so I’ll just copy and paste this one.

Skip to 2 minutes and 24 seconds As before when adding the bitmaps, we just have to create it like we did when we added the smiley ball. So it’s just copy and paste. And then of course, we need to change so the bitmap is not the smiley ball, but the sad ball. Here we are. See out here, you can actually see the balls being changed. Good. So that’s a bit better taken care of. Now, we prepare to write it. So we also need to set the position where they should be positioned.

Skip to 3 minutes and 6 seconds And here, we can’t just use a for loop, because they are going to be positioned in different places. We could potentially do it, but I have created some code here. I’ll just copy and paste it in.

Skip to 3 minutes and 21 seconds This is actually quite nice positions.

Skip to 3 minutes and 26 seconds You saw that actually there might be a little bit of overlap sometimes in small screens. But on most screens, this will look good. So if it doesn’t on your screen, try and change it. You can, just by your changing the numbers, here. OK, so that’s the positions. Now, we give them each of the balls an x and a y using an array.

Skip to 3 minutes and 49 seconds Let’s draw them. So here, we now need to use a for loop. So in the draw, let’s make a for loop that makes sure that we’ll go through all of the sad balls. So we need a counter. Let’s start with 0, because that’s where arrays start. They start with 0, remember, not 1. And we should go on as long as there are sad balls existing. And if we have an x for sad ball then in the array, then we know that we have sad balls. So we’ll just go to the length of the sad ball’s x array. And then we need to increase i every single time we’ve done that. So this will be the for loop.

Skip to 4 minutes and 46 seconds So we’ll go through each of the x elements in the array of the sad balls x position, assuming that there will be a y position, and yeah, draw a sad ball where we need to do that. And for that, we can actually just copy and paste one of these up here for the drawing. And we put that in. Of course, this needs now to be the sad ball. And here, instead of saying smiley ball, it should be sad ball. And then we need to have an array, and we’ll do i, because that’s the counter we’re using.

Skip to 5 minutes and 25 seconds And as long as we’re in the y, we need to go and fetch the y position of the sad ball we’re talked about right now, so in the i position. And this should actually draw the sad balls wherever they are, according to the values in the array. OK, we know it’s quite easy with user interaction, because they won’t move at all. So that’s pretty easy. So we won’t add anything to the user interaction, to the on touch or the action when the phone is moved. So that’s it. But let’s have a look that everything is looking right. Of course we know that the collision control won’t work at the moment, because we haven’t put that in.

Skip to 6 minutes and 12 seconds But let’s have a look to see that positions– yes, they’re positioned where we would expect them. And you see they will just go through when you come to it. There we are, just going through. So let’s then add some collision control. Here of course, we also need to have a for loop. So let’s go down to the update game method, here. And I’ll just add it here. So we need a for loop again that goes through the different values of the sad ball. So therefore, of course, we need to have a for loop that counts from 1 to the end of the end of the array. So it’s similar to the one we did in draw.

Skip to 7 minutes and 2 seconds And we need the length. And then we need to have i++. Now, we know that it’s going to be completely– almost completely, I should say– the same as what we had here, because this is where we are doing the test of the smiley ball. And it is just collision control will be just like the smiley ball. So let’s copy and paste this in for starters and do the changes that are necessary. Well, we know that it’s going to be the sad ball. So let’s go in and do the sad ball x here, and then we know that’s it’s going to be from the array. So that will change, as well.

Skip to 7 minutes and 43 seconds So here, as well– I’ll just copy and paste that, here– and here, but it needs to be y, so we have to be careful. And we’ll do it again. And let’s again do y, because that was what it was before. Now, we found the distance between the ball and the paddle. OK, I’m using the paddle, here. It’s a little bit odd, because it’s actually not a paddle. But again, I am reusing a variable that is pretty much doing the same thing. Maybe it should be renamed, but I’ve decided not to do it here. OK, let’s see. We also have mBall well, the mBall speed is actually not. Yes, well, we need that.

Skip to 8 minutes and 30 seconds But that’s still going to be the ball, of course. It’s not the sad ball we’re looking at here. Here, we’re look at the ball’s speed after we have hit it. The next time we’ll see a smiley ball. The smiley ball we have to look for, that’s here and here. And we need to change that to y.

Skip to 8 minutes and 50 seconds And do we have any other smiley balls? No, we don’t have any other smiley balls. Of course we don’t want to increase the score, so we’ll just remove that. And I think that should actually do it. Let’s see. Let’s see. So here we have the ball. It’s very exciting. If I could hit it, that would be helpful.

Skip to 9 minutes and 16 seconds Oh, we had a big glitch, there. Can’t happen in the emulator. Yay! Did you see? It hit it! Yay.

Skip to 9 minutes and 26 seconds And it’s going in the right direction, as expected. And we have a game in our hands. Oof! It’s actually quite fascinating to see the first time. OK, so you saw that the ball was going through the big ball before. This is happening on the emulator because it’s slow. It is something that can happen sometimes with the detecting, because of course, the ball can jump over an obstacle if there’s a break in the game. It’s a rare occasion, and it will not happen on a phone. So yes, let’s not go into that in this code. If you want to look at it, there are some really advanced ways you can check for that, as well, in collision control.

Skip to 10 minutes and 15 seconds But that would be extracurricular, so to speak. But yeah, now we have a game. Fantastic! So of course, you want to make this you own game. And there are many ways you could do that, of course. You could of course start by changing the sad balls’ positions or the smiley balls’ position, so that it becomes a different challenge. What about trying to add more balls to the game, both sad balls and smiley balls? You should be able to do that. It would probably be easier, of course, to start with the sad balls, because there you have an array. But if you want more smiley balls, it is basically just to change it into an array of the smiley ball.

Skip to 11 minutes and 2 seconds You could also do that. If you want something that’s a bit more advanced and actually harder than it sounds, try and add boxes. Add boxes as obstacles. It’s not as easy as you you’d think, which is one the reasons why I’ve actually chosen circles for this, because you can’t then use Pythagoras. You’d have to do other kinds of mathematics. So maybe that should be for the advanced experts quarter. OK, have fun with it.

Adding arrays and loops to the game

In this video, you’ll find out how to add new features to the game by applying your new knowledge of arrays and loops. You’ll also learn how to test the changes you have made and debug any problems.

With the concepts we have studied this week now you can create multiple obstacles. By applying collision detection logic we studied last week we can make it harder to score points. With these newly acquired skills you can improve your game even more!

There is a downloadable guide to support this video, which you may find helpful to open in a new window.

Share this video:

This video is from the free online course:

Begin Programming: Build Your First Mobile Game

University of Reading