Tutorial: Create a Brick Breaker Game in AS2
Table of Contents
Step 1: Coding Paddle Movement
Alright, I’ve decided to make a tutorial for you guys on how to create a brick breaker game in ActionScript 2.0. It’ll be very similar to my one for AS3, except coded differently. So, here we go, eh?
First of all, we’re going to make the background of the stage black, simply because it looks better, and we’re going to set the frame rate to 24. Then, we’re going to draw the paddle and we’re going to convert it into a MovieClip.
Mine is 55×10
Next, we’re going to give the paddle an instance name, mcPaddle. The instance name is case sensitive, so type it exactly the way I did.
Now, we get into some basic ActionScript. Create a new layer named “actions” where all of your code will go in. Next, type in this code:
onEnterFrame = function(){ //this function will run during every single frame
//The paddle follows the mouse
mcPaddle._x = _xmouse;
}
Hopefully, I’ve explained enough in the comments for you to get an idea of what the code does. If you test the movie, you might see a few problems. First of all, the paddle is not centered with the mouse, but is left aligned with it. This is easy to fix. Just replace:
mcPaddle._x = _xmouse;
with:
mcPaddle._x = _xmouse - mcPaddle._width*.5;
This code basically makes it so instead of using the paddle’s _x value, which is the left side of the paddle, it uses the middle of the paddle instead to follow the mouse.
Another problem with this code is that the paddle sometimes runs off stage. We don’t want this, it annoys the user. So, we’re going to add the following code to the onEnterFrame function.
//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;
}
This code will keep your paddle in bounds, no matter how large the stage is or how wide your paddle is. I’m leaving the explanation of the code up to you to figure out yourself. After all, you can never become a real programmer if you just copy and paste the code without any idea of what it means.
And now I conclude part one of this tutorial with the final code you should have in your file with an example of what mine looks like.
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;
}
}
Good Tutorial! It was chosen for the home page of http://www.tutorialsroom.com
Waiting for your next tutorial 🙂
January 11th, 2009 at 3:28 pm
Tutorial added!
http://www.tutorialand.com
January 12th, 2009 at 6:35 am
[…] Create a Brick Breaker Game in AS2 […]
February 11th, 2009 at 1:26 pm
is my movie suppost to look like your when im done copying the code because it doesnt movie im using flash mx is that the problem
March 17th, 2009 at 8:43 am
not working in flash mx, why?
March 30th, 2009 at 9:08 am
The problem probably isn’t that you’re using flash mx.
March 31st, 2009 at 12:55 am
ok…i am a total boom. i cannot even change the background color! omg…
April 13th, 2009 at 1:00 pm
ok.. i did it.. now how to get the code into the actions layer?
April 13th, 2009 at 1:05 pm
Code isnt Working..Paddle Movement
May 13th, 2009 at 8:08 am
This coding does not work in mx 2004. And it’s very aggravating. Is there anyway to fix it? The paddle just won’t stay on the stage.
May 18th, 2009 at 12:26 pm
hi, i like this tutorial so much….
to anonymous, i think u should change ur flash to Flash8..
im looking forward to make a game!!!
May 24th, 2009 at 8:17 am
Hi, i followed what you’ve said to knowledge, but my mcPaddle doesn’t move.
I have these errors;
Discription; Statement block must be terminated by ‘}’
Source; if(_xmouse > Stage.width – mcPaddle._width / 2){
Discription; Syntax error.
Source; N/A
Discription; Statement block must be terminated by ‘}’
Source; onEnterFrame = function(){ //this function will run during every single frame
Discription; Syntax error.
Source; N/A
New to flash, so don’t really knpw what this means.
Regards,
Tim
May 29th, 2009 at 6:47 pm
Tim:
use this:
if(_xmouse > Stage.width – mcPaddle._width/2){
code goes here
}
don’t for get the other brace to tell flash that the if statement is over.
oh, and to the author:
instead of that code to center the paddle w/ the mouse, you can just set the registration point of the paddle to the center when you create it.
June 9th, 2009 at 8:39 pm
I have flash 8 and no matter what I do to the code the paddle refuses to stay on the stage
June 17th, 2009 at 8:48 am
I have CS4 and I can’t even get the first peace of code to work this is the error I keep getting.
Statement must appear within on/onClipEvent handler
and thats for line one.
July 10th, 2009 at 3:28 pm
is this correct:
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;
}
}
coz if it is nothing happens anybody know why?
July 12th, 2009 at 1:36 am
Nice article! Thank you very much. I am learning AS3 know….
August 4th, 2009 at 2:58 am
hi
i like this tutorial
i record the steps as a video in Youtube
http://www.youtube.com/watch?v=gJxa05gueqg
i hope it will be helpful
August 5th, 2009 at 1:46 pm
good tutorial…
October 9th, 2009 at 9:49 pm
I get this error!
**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 1: Statement must appear within on/onClipEvent handler
onEnterFrame = function(){
Total ActionScript Errors: 1 Reported Errors: 1
October 10th, 2009 at 5:39 pm
Try separating the comment on it’s own line of code. Sometimes code and comments don’t mix well.
onEnterFrame = function(){ //this function will run during every single frame
anything after // is a comment.
it should look like this:
onEnterFrame = function(){
//this function will run during every single frame
Try that.
October 18th, 2009 at 2:32 pm
Hi!
A made my program following the instructions, but the paddle does not move. And then I downloaded the source file and the paddle moves.
I compared everything but did not find any differences.
What could be the reason for this?
Thank you for your help.
November 12th, 2009 at 2:31 pm
I know what could be a problem when the paddle does not move.
I slipped over the task that I have to give a name to the paddle instance as well. And the tutorial would be clearer if the symbol’s name won’t be the same as the instance name!
I gave a name to the instance paddle and it worked fine!
Thank you for this tutorial.
I continue to build my game! :—-)
November 13th, 2009 at 12:42 pm
i’ve had the problem were the paddle goes off the screen too far to the left and doesnt go far enough to the right but i fixed it, if anyone els has this problem, feel free to use this code i used but according to the size of you’re paddle you may need to adjust it here’s the code i used enjoy =D
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 = 590 – mcPaddle._width;
}
}
November 14th, 2009 at 10:54 am
it seems i was missing halve of my code for some reason???? here’s the whole for those of you that need it
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 = 590 – mcPaddle._width;
}
}
November 14th, 2009 at 10:56 am
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 = 590 – mcPaddle._width;
}
}
November 14th, 2009 at 10:59 am
HI!!!
Very Nice script thx Guys!
January 17th, 2010 at 5:20 am
ok i cant get this to work i put in all the code and i tested it and the paddle stayed in place. please help!
here is what i put in actions layer
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;
}
}
February 10th, 2010 at 2:35 am
I’m using mx 2004 and the paddle won’t budge an inch. :/
help please?
February 14th, 2010 at 11:39 am
[…] How to Create a Brick Breaker Game in AS2 […]
February 25th, 2010 at 9:31 am
Can you make these programs in Flash MX 2004? I want to make a game like this.
March 16th, 2010 at 12:03 pm
wierd.. im a noobie with flash i just started to play with it and it says that my script is correct but when i press play movie of play scene it doesnt work.. Or do i need to press something else?
April 20th, 2010 at 3:10 pm
This does not work in CS4 AT ALL.
May 12th, 2010 at 6:46 pm