Tutorial: Create a Brick Breaker Game in AS2 – Part 2
Table of Contents
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”.
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!
hi i dont understand why the ball is not working can you help ………
March 4th, 2009 at 3:44 pm
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!
March 13th, 2009 at 6:27 am
My ball works, but it only works when my paddle is on the far right hand corner of the screen… Got any suggestions?
March 13th, 2009 at 10:05 am
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!?
March 28th, 2009 at 5:57 pm
can you be more specific about where the function calcBallAngle goes?
April 27th, 2009 at 5:10 pm
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
}
April 30th, 2009 at 3:13 am
Where the hell does the code go??? you couldve put it unbroken to save confusion.
May 7th, 2009 at 3:53 am
My ball isn’t working either
June 17th, 2009 at 9:05 am
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.
July 5th, 2009 at 2:35 am
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
July 21st, 2009 at 4:20 pm
my ball just goes straight through the bottom whats wrong
August 3rd, 2009 at 8:43 pm
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 🙂
August 5th, 2009 at 1:51 pm
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….
August 8th, 2009 at 3:51 pm
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
August 8th, 2009 at 3:58 pm
Nvm i fixed instead of
Var ballySpeed:Number = 10
i put
Var ballySpeed = 10
AND IT WORKS
August 8th, 2009 at 4:05 pm
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;
}
August 8th, 2009 at 5:59 pm
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
September 29th, 2009 at 9:53 am
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.
October 5th, 2009 at 9:24 pm
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
October 21st, 2009 at 3:50 pm
the ball doesn´t bounce off the walls!!Help!
November 29th, 2009 at 5:50 pm
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;
}
};
December 13th, 2009 at 1:00 pm
My ball is not bouncing off the entire stage.. it jus bounces half way and disaapears in the bottom…any help??????????????
December 27th, 2009 at 1:40 pm
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.
January 29th, 2010 at 6:03 pm
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;
}
February 10th, 2010 at 2:53 am
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:
March 4th, 2010 at 11:59 am
fuck your code
April 1st, 2010 at 9:54 pm
fuck your code
balls dont work jackass
April 1st, 2010 at 9:54 pm
WHERE DOES THE CODE GO?????????????????????????
April 30th, 2010 at 5:44 am