Creating a Breakout Clone Game in Appcelerator Titanium - Part 2

Creating a Breakout Clone Game in Appcelerator Titanium - Part 2

July 21, 2011

In the first part of this two part tutorial series, I showed you how to setup all the variables and objects we required for our game called Bustin Out - a break out clone. In this second tutorial we'll create the game loop, track scores and bust some blocks.

Haven't seen part one of this tutorial yet? Click here to go to part one now.

Introducing the interval timer:

Let's assign that intervalHandler object to a new interval timer, which will call our gameLoop() function every 17 milliseconds - this equates to roughly 60 frames per second. We'll do this in a function called playGame(), which is going to be called on our buttonPlay click event.

Here is the code:

Creating the game loop:

Now we need to create the game loop - this function is going to do all our hard processing, including workout out the position of our ball, it's X and Y velocity, and whether we are breaking bricks, hitting walls etc. Create the gameLoop() function and add into your code above the playGame() function.


Notice there is a call in here to two other functions, rectIntersects() and setScoreLabel()? We will need to create these two functions as well. The rectIntersects() function is used to determine whether the bounds of the ball interferes with the bounds of another object - in this case either a block or our paddle. We can then perform changes in block visibility/destruction and x and y velocity movement accordingly. The setScoreLabel() is pretty self explanatory - it takes in the current score variable and simply pads it to six digits in length and displays this as the text on our score label.


Moving about our paddle with touch events:

The final step is to now register some touch events on our Window (win1) object that will let us move the paddle to the left and right with our finger. This in turn will allow the player to position the paddle so the ball hits it, and travels in an upwards direction ready to break some more blocks!


As one more final step, edit your tiapp.xml file and turn off the statusbar (set to false) and set the fullscreen property to true. You can also change the XML properties to only allow portrait orientations for your game. When you have done that, run the app in the emulator.. you should be able to move the paddle left and right by tapping and holding on the screen.


You should now have a playable game! Sure it's not the prettiest thing in the world, but why not extend it to have menu's, bonuses, better graphics and any other elements you can think of? If you use this code and extend it then leave me a comment, I'd love to check out what you've done. Have fun!