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

How to Create a Brick Breaker Game in AS3 – 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 it’s time to create some code for our lil’ ball. We’re going to do the same thing we did for the paddle and add an enter frame event listener to it in the beginCode() function.

//Adds a listener to the ball which
//runs a function every time a frame passes
mcBall.addEventListener(Event.ENTER_FRAME, moveBall);

Then, we’re going to create the function which moves the ball.

function moveBall(event:Event):void{
	//Code for moving ball goes here
}

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 moveBall() function:

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 moveBall() function.

//Bouncing the ball off of the walls
if(mcBall.x >= stage.stageWidth-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.stageHeight-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 us delve into this code.

//This code should be placed in the moveBall() function
if(mcBall.hitTestObject(mcPaddle)){
	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. Here's an example of what the final ActionScript should look like:

//VARIABLES
//These variables are needed for moving the ball
var ballXSpeed:Number = 8; //X Speed of the Ball
var ballYSpeed:Number = 8; //Y Speed of the Ball
//First I defined a function where all of
//the code needed to start the game is placed
//This includes listeners, variable definitions, and other stuff
function beginCode():void{
	//Adds a listener to the paddle which
	//runs a function every time a frame passes
	mcPaddle.addEventListener(Event.ENTER_FRAME, movePaddle);
	//Adds a listener to the ball which
	//runs a function every time a frame passes
	mcBall.addEventListener(Event.ENTER_FRAME, moveBall);
}

function movePaddle(event:Event):void{
	//The paddle follows the mouse
	mcPaddle.x = mouseX - mcPaddle.width / 2;
	//Keeping the paddle in the stage

	//If the mouse goes off too far to the left
	if(mouseX < mcPaddle.width / 2){
		//Keep the paddle on stage
		mcPaddle.x = 0;
	}
	//If the mouse goes off too far to the right
	if(mouseX > stage.stageWidth - mcPaddle.width / 2){
		//Keep the paddle on stage
		mcPaddle.x = stage.stageWidth - mcPaddle.width;
	}
}

function moveBall(event:Event):void{
	//Code for moving ball goes here
	mcBall.x += ballXSpeed; //Move the ball horizontally
	mcBall.y += ballYSpeed; //Move the ball vertically
	//Bouncing the ball off of the walls
	if(mcBall.x >= stage.stageWidth-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.stageHeight-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;
	}
	//Hitting the paddle
	if(mcBall.hitTestObject(mcPaddle)){
		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;
}

beginCode();