Tutorial: Create a Brick Breaker Game in AS2 – Part 3

Written By MrSun at 8:02 am - Saturday, January 10th, 2009
Categories: All Tutorials, AS2, Beginner Tutorials, Flash, Game Development

Step 3: Setting Up the Bricks on Stage

Ok, we’ve got the paddle and the ball. Now, the only major thing left to program is the brick. This is also the hardest to program, so it will be split up into 2 parts, setting them up, and breaking them down. Let us begin.

First of all, we need to look at how we’re going to set the bricks on the stage. We’re going to use an array with different numbers that will signify different bricks. In this tutorial, because we are keeping it simple, we will only use 2 different numbers, 1 and 0. 1 will mean to place a brick, and 0 will mean and empty space. An example for a simple level would be this:

//this would create one row of bricks
lvl1Array:Array = new Array(1,1,1,1,1,1,1);

Of course, this code will do nothing unless we create a function to actually make the bricks. The first step to this is actually making the brick MovieClip. So, mine is just going to be a plain white, with dimensions of 70×15 pixels. Also, this MovieClip should be exported for ActionScript so we can dynamically add it to the stage.
Convert your brick

Got it? Now, here comes the tricky part, programming it. First of all, we are going to define a function called makeLvl(). Then, we are going to need to make some starting variables. These variables, however, can’t be reset every time the user beats a level, so it we have to make a frame before the the frame with all of the code. If you don’t get it, then here’s a picture.
Making a new frame at the beginning

In this frame, put the following code:

//Current level player is on
var currentLvl:Number = 1;
//The array code for lvl 1
var lvl1Code:Array = new Array(1,1,1,1,1,1,1);
//The array that contains all of the level codes
var lvlArray:Array = new Array(lvl1Code);

Hopefully, I’ve explained what each of the variables do well enough that you understand. Also, in the 2nd frame, the game frame, just add a stop(); to the beginning. This way, the game doesn’t keep on looping.

Now, we’re going to go back to the game farme and we are going to add some intense code into the makeLvl() function. Here we go:

function makeLvl():Void{ //Places bricks onto Level
	//finding the array length of the lvl code
	//The index has to be currentLvl-1 because:
	//array indexes start on 0 and our lvl starts at 1
	//our level will always be 1 higher than the actual index of the array
	var arrayLength:Number = _root.lvlArray[currentLvl-1].length;
	//the current row of bricks we are creating
	var brickRow:Number = 0;
	//Now, creating a loop which places the bricks onto the stage
	for(var i:Number = 0;i<arrayLength;i++){
		//checking if it should place a brick there
		if(lvlArray[currentLvl-1][i] == 1){
			//creating a variable which holds the brick instance
			_root.attachMovie('mcBrick', 'brick'+i,_root.getNextHighestDepth());
			//setting the brick's coordinates via the i variable and brickRow
			_root['brick'+i]._x = 15+(i-brickRow*7)*75;
			_root['brick'+i]._y = 10+brickRow*20;
			//checks if the current brick needs a new row
			for(var c:Number = 1;c<=10;c++){
				if(i == c*7-1){
					brickRow ++;
makeLvl(); //finally, run the function

The next step is getting the ball to break the bricks. But, that is for a later time.

The Final Product

Source .fla File



How do you make other bricks show i have the other bricks made but when i put 2s 3s etc they dont show.


When I create a new frame, the game glitches. New key frame makes it flash, and a new frame makes the ball “skim” along the bottom of the screen.


When I test the movie it gives me the error:
**Error** Symbol=brick, layer=Layer 1, frame=1:Line 1: The class or interface ‘flash.display.MovieClip’ could not be loaded.

Total ActionScript Errors: 1 Reported Errors: 1


im getting the same problem as skillmachine.

it seems the “base class” field is not available in macromedia flash prof 8

it has the “AS 2.0 Class” field. which is supposed to be “mcbrick” in your code.

could you tell us how to set the base class in flash 8? ive just spent 5 hours straight trying to work this shit out and i just cant. ill carry on fiddling whilst i wait for a reply….


I too got the same error. I just emptied the AS2.0 class field in the movie clip properties instead of ‘flash.display.MovieClip’ . The code works fine.I have flash 8 Prof.


Leave class field empty.
Jesus,are you sure about that you put a stop() in 2nd frame?


When i do this, I get half a brick in the top left corner of the screen.

Also, what size are you running this? 500×500?


where am I supposed to put stop();? almost everything works but frame rate goes down gradually


To fix the “Can’t load mcBrick” error, only fill in the “Identifier” field. Leave the “Class” and “Base class” field empty. The screenshot you see is from his AS3 tutorial. He was probably too lazy to create a new screenshot for his AS2 tutorial.

- Benji


does it have to be this complicated?


i want to put 2 types of brick how do i define that?


Mr Sun…heeeeelp meeeee!


I downloaded the *fla file and checked the settings.
It should be:
identifier: mcBrick
class: (put in nothing)
select export for Actionscript and export in first frame
Size: 550×400


what do i need to do to put different bricks and such?


when i run the code i cant see any bricks in the game…can any1 pls help me out.. i am not getting any errors and where should i put the code for creating the bricks in 2nd frame rite…???


my question is the same as Daniels “How do you make other bricks show i have the other bricks made but when i put 2s 3s etc they dont show”


The code puts a brick in a column only if that column’s number in the lvlArray is 1. Not 0, not 2, 3, nor any other number.

Think of “1″ as being “Yes” and anything else being “Not Yes” to the question “Shall I drop a brick here?” :)


This is not working senior.