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


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

Step 4: Hit Testing the Bricks

Now that we’ve actually made the bricks, we can now break them with our ball… Anyway, this will be pretty easy to accomplish. All you have to do is change this code in the makeLvl() function:

		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 ++;
				}
			}
		}

to this:

		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;
			//giving this brick some actions
			_root['brick'+i].onEnterFrame = function(){
				if(this.hitTest(_root.mcBall)){//if this touches the ball
					//then destroy this mofugger!
					this.removeMovieClip();
					//and make the ball bounce away
					ballYSpeed *= -1;
				}
			}
			//checks if the current brick needs a new row
			for(var c:Number = 1;c<=10;c++){
				if(i == c*7-1){
					brickRow ++;
				}
			}
		}

That was pretty easy, wasn’t it? Definitely much easier than what had to be done in AS3. Well, since we have time, I’m going to post here what your code should look like at this time:

Frame 1:

//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);

Frame 2:

stop();
//These variables are needed for moving the ball
var ballXSpeed:Number = 10; //X Speed of the Ball
var ballYSpeed:Number = 10; //Y Speed of the Ball
 
onEnterFrame = function(){ //this function will run during every single frame
	//The paddle follows the mouse
	mcPaddle._x = _xmouse - mcPaddle._width*.5;
 
	//If the mouse goes off too far to the left
	if(_xmouse < mcPaddle._width / 2){
		//Keep the paddle on stage
		mcPaddle._x = 0;
	}
	//If the mouse goes off too far to the right
	if(_xmouse > Stage.width - mcPaddle._width / 2){
		//Keep the paddle on stage
		mcPaddle._x = Stage.width - mcPaddle._width;
	}
 
	//MOVING THE BALL
	mcBall._x += ballXSpeed;
	mcBall._y += ballYSpeed;
	//Bouncing the ball off of the walls
	if(mcBall._x >= Stage.width-mcBall._width){
		//if the ball hits the right side
		//of the screen, then bounce off
		ballXSpeed *= -1;
	}
	if(mcBall._x <= 0){
		//if the ball hits the left side
		//of the screen, then bounce off
		ballXSpeed *= -1;
	}
	if(mcBall._y >= Stage.height-mcBall._height){
		//if the ball hits the bottom
		//then bounce up
		ballYSpeed *= -1;
	}
	if(mcBall._y <= 0){
		//if the ball hits the top
		//then bounce down
		ballYSpeed *= -1;
	}
 
 
 
	if(mcBall.hitTest(mcPaddle)){
		//calculate the ball angle if ball hits paddle
		calcBallAngle();
	}
}
 
function calcBallAngle():Void{
	//ballPosition is the position of the ball is on the paddle
	var ballPosition:Number = mcBall._x - mcPaddle._x;
	//hitPercent converts ballPosition into a percent
	//All the way to the left is -.5
	//All the way to the right is .5
	//The center is 0
	var hitPercent:Number = (ballPosition / (mcPaddle._width - mcBall._width)) - .5;
	//Gets the hitPercent and makes it a larger number so the
	//ball actually bounces
	ballXSpeed = hitPercent * 10;
	//Making the ball bounce back up
	ballYSpeed *= -1;
}
 
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;
			//giving this brick some actions
			_root['brick'+i].onEnterFrame = function(){
				if(this.hitTest(_root.mcBall)){//if this touches the ball
					//then destroy this mofugger!
					this.removeMovieClip();
					//and make the ball bounce away
					ballYSpeed *= -1;
				}
			}
			//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 Final Product

Source .fla File

6 Comments

Daniel:

What part of the coding do you edit so that other-colored bricks show?


Liam:

Ah this tutorial worked, for some if you hit the ball on the exact side of your paddle, it jams/bounces all on the inside of the paddle. Same is true if you sandwich it with the wall, it will keep bouncing left and right in an upward then downward motion on the left and right walls. Is it stuck in the padding?

A good tutorial, sketchy in one or two places, but its learning. Now to customize!


Dave::

This code has a huge flaw in it. The slaw in the hitTesting becomes apparent when the levels get harder and more rows of bricks appear. If the ball hits the exact side of the bricks, it simply starts vibrating, instead of bouncing away like it’s supposed to.


Dave::

Line one, sentence 2: flaw*


NewbieProgrammer:

Ok.. This is my problem

In the Array Function
it works but it only allows one brick to be on screen at once whichever brick is placed last is the only one on screen…

HELP PLEASE


chris:

i cant see my bricks, ive checked for error’s and there are none plus ive been through the code a few times and i have copied it exactly!! can anyone help??


«
»