Flash Game Tuts - Free Flash Game Tutorials in AS2 and AS3

How to Create a Brick Breaker Game in AS2 – Part 2

Part 2: Programming the Ball

The next obvious step in creating a brick breaker game is making the ball. So, I’m just going to make a small 10×10 pixel white circle into the symbol, “mcBall”.

I’m also going to give my ball an instance name of mcBall.

Now, before we actually create the code for ball movement, we need 2 variables. Can you guess what they are? Great job! They are the x speed variable and the y speed variable! You’re such a smart little child. Add the following code to the very beginning (line 1) of your code. I like to organize all my variables so that they are all in the same place.

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

You can change these values if you want, but this is what I’m going to use. Now, we have to use these variables to make the ball move. We should now add the following code to the onEnterFrame() function:

//MOVING THE BALL
mcBall._x += ballXSpeed;
mcBall._y += ballYSpeed;

Of course, when you test the movie, the ball is just going to move diagonally without any force stopping it. The next step is to make the ball bounce off of the walls. This is pretty easy if you think about it. All you have to do is multiply the x speed by -1 if it hits a vertical wall, and the same for the y speed with a horizontal wall. Let’s do it. Add the following code to the onEnterFrame() function:

	//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 you test the movie, then the ball will just keep on bouncing off the walls. Of course, we're going to change the bottom bounce, but for now we'll keep it like this. The next step is making the ball bounce off of the paddle. This might take a little more math skills. We don't want the ball to keep on moving at the same angle the whole time, so we're going to make it change depending on which part of the paddle it hits. Because this will take some intense calculations, we're going to make a new function called calcBallAngle(). So, let's first add this code to the onEnterFrame() function.

if(mcBall.hitTest(mcPaddle)){
	//calculate the ball angle if ball hits paddle
	calcBallAngle();
}

This part is simple. It just runs the calcBallAngle() function whenever the ball hits the paddle. Now, here's the code for the actual function. It's pretty intense.

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

I've commented the code out pretty extensively. Just read it and hopefully you'll understand.

That's basically all that I'm going to teach you today. Join us next time!