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


Written By MrSun at 8:01 am - Saturday, January 10th, 2009
Categories: Beginner Tutorials, Flash

Step 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”.
My lil' ball
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!

The Final Product

Source .fla File

29 Comments

Alec:

hi i dont understand why the ball is not working can you help ………


Liam:

For some reason when I put calcBallAngle(); in the onEnterFrame; section, it constantly makes the ball bounce within a certain area, then launches it off screen. After I delete the caclBallAngle() from the code, it worked fine. But I am using Adobe Flash CS3. To the next page!


Jesus:

My ball works, but it only works when my paddle is on the far right hand corner of the screen… Got any suggestions?


Anonymous:

Couldnt you have been more specific!?
I mean, I dont know where to apply what actions to the ball…
Do I apply it to the

onEnterFrame

section I made earlier or what!?
Or does it go to the ball itself!?


jessica:

can you be more specific about where the function calcBallAngle goes?


HELP:

Where does this go?
function calcBallAngle():Void{
var ballPosition:Number = ball._x – paddle._x
var hitPercent:Number = (ballPosition / (paddle._width – ball._width)) – .5
ballXSpeed = hitPercent * 10
ballYSpeed *= -1
}


Aarmad:

Where the hell does the code go??? you couldve put it unbroken to save confusion.


Johnny:

My ball isn’t working either


xdeath:

what do you all mean where does it go?
the fuunction can be placed anywere it is a bloddy custom function it doesn’t really matter were its placed it will still do its job!

and as for the whole my ball is only working within a curtain area, well this should work fine but you need to make sure your ball is called mcBall.

jesus if the code is only working sometimes i would be checking the collision part of your code in this example we were shown to use hitTest so you should check what you but there.

his code all works i’m guessing if people are having problems it is because you’ve tried changing things without understanding what you were doing.

hmm…a suggestion on this example thoughin games like this we can increase then speed of the ball and decrease it as well. normally depending on how you hit it and stuff. but it seems to easy and how it is hit is correct right now but it also depends on what direction the ball is moving e.g. left or right.

not bad but.


Anonymous:

My ball doesnt work :< I think you need to show screen shots of where the actions go and then show all the actions together so we know what goes where


Anonymous:

my ball just goes straight through the bottom whats wrong


Striker:

hi
i like this tutorial
i record the steps as a video in Youtube
part2:
http://www.youtube.com/watch?v=Cb665mjn8-A
i hope it will be helpful
i don’t complete yet the other parts
thanx 🙂


NewbieGameMaker:

I have a question i cant figure out to put the

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

code
Please help

My name says all….


NewbieGameMaker:

I’ve Found my REAL Problem my probrlem is

Here
var ballXSpeed:Number = 10;
var ballYSpeed:Number = 10;

Because when i typed

onEnterFrame = function(){
mcBall._x += 10;
mcBall._y += 10;
}

It worked just fine

Somehow my Variables aren’t working…

Please help


NewbieGameMaker:

Nvm i fixed instead of

Var ballySpeed:Number = 10
i put

Var ballySpeed = 10

AND IT WORKS


regan:

hey guys if your code isn’t working just compare it to this and see what the difference is:
//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 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 = 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;
}


Alonzo:

Hey,
I have a little question regarding to the ball:
In case i have 4 Balls, How can i make it that every one of them will go in a different angle and time?

many thanks,
Alonzo


Abocreature:

I know I most likely won’t get an answer, but when the ball hits the right of the paddle, the angle is the same as if it were to hit the middle. Whereas, on the left side, it works fine.


geecnique:

what do u guys mean by where the code goes? the code goes in between the {}
right after the onEnterFrame = function(){

Same thing goes for the code for the ball.

I have a problem that I cant open any source files in Flash MX 2004, which else am I supposed to use for as2?
thx


help!:

the ball doesn´t bounce off the walls!!Help!


NewbieProgrammer:

Hey guys i got it working here is my code..

ballXSpeed = 10;
ballYSpeed = 10;
this.onEnterFrame = function() {
mcBall._x += ballXSpeed;
mcBall._y += ballYSpeed;
mcPaddle._x = _xmouse-mcPaddle._width*.5;
if (_xmouseStage.width-mcPaddle._width/2) {
mcPaddle._x = Stage.width-mcPaddle._width;
}
if (mcBall._x>=Stage.width-mcBall._width) {
ballXSpeed *= -1;
}
if (mcBall._x=Stage.height-mcBall._height) {
ballYSpeed *= -1;
}
if (mcBall._y<=0) {
ballYSpeed *= -1;
}
if (mcBall.hitTest(mcPaddle)) {
calcBallAngle();
}
function calcBallAngle() {
var ballPosition = mcBall._x-mcPaddle._x;
var hitPercent = (ballPosition/(mcPaddle._width-mcBall._width))-.5;
ballXSpeed = hitPercent*10;
ballYSpeed *= -1;
}
};


noobie:

My ball is not bouncing off the entire stage.. it jus bounces half way and disaapears in the bottom…any help??????????????


Haystack:

The way I put in the code:

The two “var” statements go before the OnEnterFrame block. (There are no curly braces { } involved here, by the way.)

All of the stuff except the CalcBallAngle function goes into the OnEnterFrame block, after the bits from the previous step of the tutorial that handle paddle movement. If you’re getting weird ball movement, double-check your code to make sure all the curly braces are in the right places (as shown in the code on this page) — it’s easy to get blocks of code jumbled up while still having what Flash considers the correct pairings of braces.

I put CalcBallAngle’s code in its own block after the OnEnterFrame block, mainly for better readability. It will also work fine inside the OnEnterFrame block.


Michael:

my ball dosn’t move i hate this first it was my paddle now the ball
this is all the source in my action.
//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 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 = 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;
}


Azzy:

After finishing this section, this came up:

Scene=Scene 1, Layer=actions, Frame=1: Line 44: ‘{‘ expected
function calcBallAngle():Void{

Scene=Scene 1, Layer=actions, Frame=1: Line 59: Unexpected ‘}’ encountered
}

Help? lol I’m a n00b at coding so…yeah. P:


revan black:

fuck your code


revan black:

fuck your code
balls dont work jackass


komi:

WHERE DOES THE CODE GO?????????????????????????


«
»