Creating a Breakout Clone Game in Appcelerator Titanium

Creating a Breakout Clone Game in Appcelerator Titanium

July 16, 2011

In this tutorial series, I'll be showing you how to create a basic Brick Breaker (breakout clone) style game using Titanium Mobile and targetting both iPhone and Android platforms.

Before you start:

I am using Titanium Mobile SDK 1.6.1 and XCode 3, Android 2.2 Emulator for this demo. All code is tested on a Mac.

Create a new mobile project in Titanium Developer and call it whatever you wish; for this tutorial I am calling my game "Bustin Out". One up your app.js file in your favourite IDE, mine happens to be Aptana for Titanium development, and delete all of the generated code - we don't need any of it.

The second part of this tutorial series is available here.

Creating the game objects and variables:

First things first, we need to create some basic interface components and some variables that will hold data relating to ball speed, whether the game is playing or not, etc. All of the UI components need to be added to a Window object we'll call win1. Let's create a blank Window in Titanium and add to it the following:
  • a Variable to hold the score
  • a Variable to hold the ball's speed
  • two Variables to hold the x velocity and y velocity of the ball's movement
  • an isComplete variable to determine if all bricks are broken
  • an isPlaying variable to determine if the game loop is running
  • an intervalHandle so we can stop and stop the game loop timer
  • a Variable to determine how many blocks remain
  • an Array holding a collection of 6 block colours for our brick rows
  • an Array that will hold references to all of our block objects (Views)
  • a View that represents our paddle
  • a View that represents our ball
  • a Label that will show the user the current score from the score variable
  • a Button that will start the game
Here is the code with all the game variables added:p>

Creating the blocks:

Now we need to create the blocks - these are what we will deflect the ball into off our paddle to score points and (hopefully) win the game! To do this we'll create a new function called createLevel() and create a series of 80 blocks; 10 rows of 8 blocks each. We're just working off a standard 320x480px screen here, so each block will be 40px wide and 16px high. Create this function just below where you defined all the variables.

Executing the createLevel() function:

Our blocks, paddle and ball are all created, along with the variables we need and a label to keep track of our score. Alter your buttonPlay click event now to call the createLevel() function and hide the start button.

In the next part of the tutorial, I'll show you how to add an interval timer that will keep track of all the game's properties, plus all the logic required to move the ball around the screen, move the paddle around the screen via touch events, keep score and win (or lose)!