Flash Game Tuts » Beginner

How to Create a Brick Breaker Game in AS3 – Part 6

Mr Sun — Fri, 24 Jul 2009 12:06:48 +0000

Well, we’re almost done with our game, now we just have to add some finishing touches. I won’t make a menu system like you usually should in a game before releasing it. But, this is just a tutorial, and hopefully you’ve learned something. You probably already know how to make a menu anyway. Also, I’m not going to teach you how to do some of the things that we need because hopefully you can do it yourself. If you can’t , there’s always the source file at the bottom.

Now, where were we? Oh yes. I realized that the last lesson, we were supposed to make more levels. I taught a lot of stuff, but I forgot to make more levels for you! I apologize. Anyway, here’s an example of a 5 level game (Put it on the first frame).

//The array code for lvl 1
//All of the later levels add one more row of bricks
var lvl1Code:Array = new Array(1,1,1,1,1,1,1);
var lvl2Code:Array = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1);
var lvl3Code:Array = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1);
var lvl4Code:Array = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1);
var lvl5Code:Array = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1);
//The array that contains all of the level codes
var lvlArray:Array = new Array(lvl1Code, lvl2Code, lvl3Code, lvl4Code, lvl5Code);

It’ll be a pretty straightforward game. Next, I think the gamer needs to know that he has to click the screen to start, and not think the the game is frozen or something. So, just add a dynamic textfield to the middle of the stage. Give it an instance game of txtStart, and make sure it isn’t selectable.

Next, add this code at the end of the frame.

//setting the text's word
txtStart.text = "Click To Begin";

You can make the text different, but don’t be too mean. Next, we have to remove the text, which we can do in the beginCode() function. We aren’t going to remove the textfield itself because we need it again for every level.

//removing the "Click to Start" Text
txtStart.text = '';

Now, we have to reset it every level. I’m not going to tell you how to do it. I hope you’ve learned enough to be able to.

The next thing we have to do is display the current level, and how many lives the user has. This will be pretty simple as well, so I won’t really go into details about how to do it. But, I will give you some code to use below all the other.

//creating a function to update the text fields
addEventListener(Event.ENTER_FRAME, updateTextFields);

You can create your own text fields with and update them with that function. But, be sure to remove that listener if the gamer loses, or something bad will happen, something very bad…

And don’t think I forgot about scoring. Just define a variable at the top called score and have it update along with the other stats. Also, you have to make it increase in the Brick class every time the brick is hit. You might want to show the score when the player loses too. But, that’s just optional.

Well, those are all the finishing touches that I’m going to add on to my game at least. Here is the final product of all our work.

How to Create a Brick Breaker Game in AS3 – Part 5

Mr Sun — Fri, 24 Jul 2009 12:05:38 +0000

Now that we’ve got the basic gameplay down, we can create some levels. Because we’re making only a simple game, we aren’t going to make that many. But before we even start making multiple levels, we have to make it possible to win or lose a level. This will be pretty easy.

We’re first going make it possible to beat the level. In order for this to happen, we have to track how many bricks are on the stage. Just define the following variable at the top of the code.

var brickAmt:int = 0;

Now, we have to increment this number every time a brick is placed onto the stage. Type in this code in the Brick.as after defining _root in the beginClass() function.

//incrementing how many bricks are on the stage
_root.brickAmt ++;

Next, we have to decrement the number every time a brick is destroyed. Just type in this code in the hitTestObject if statement.

//decrementing the amount of bricks on stage
_root.brickAmt --;

That was pretty easy, right? Now, we have to add a listener that will check if the value of bricks is 0.
You can do so in the beginCode() function.

//adding a listener to check if the level is done
addEventListener(Event.ENTER_FRAME, checkLevel);

Next, we have to define this function. Place this at the end of the code, but before we run beginCode()

function checkLevel(event:Event):void{
	//checking if the bricks are all gone
	if(brickAmt == 0){
		//reset the level by increasing the level
		currentLvl ++;
		//and re-running makeLvl
		makeLvl();
	}
}

Remember at the bottom of the code when we ran beginCode()? Well, we can just have it run after listening to a mouse click. Here’s the code.

//if the mouse clicks, then begin the game
stage.addEventListener(MouseEvent.CLICK, beginCode);

Just replace beginCode(); with that. We also have to change the beginCode() function itself just slightly so it will accept a mouse event. When we define the function, just change it to:

function beginCode(event:MouseEvent):void{
	//removes the listener for a click
	stage.removeEventListener(MouseEvent.CLICK, beginCode);
	[..Code..]
}

If you test the movie, however, it looks a bit weird. The bricks appear only after clicking. This can be easily fixed. Just take the makeLvl() out of the beginCode() function and put it at the bottom of the code.

The next problem we have to fix is that the level is immediately made after you break all of the bricks, without resetting the ball’s position or anything (it may not be like that on yours, but trust me, I’ve tested it). Just place this code in the CheckLevel() function.

function checkLevel(event:Event):void{
	//checking if the bricks are all gone
	if(brickAmt == 0){
		//reset the level by increasing the level
		currentLvl ++;
		//and re-running makeLvl
		makeLvl();
		//then resetting the ball's and paddle's position
		mcBall.x = 150;
		mcBall.y = 265;
		mcPaddle.x = 230;
		//then removing all of the listeners
		mcPaddle.removeEventListener(Event.ENTER_FRAME, movePaddle);
		mcBall.removeEventListener(Event.ENTER_FRAME, moveBall);
		removeEventListener(Event.ENTER_FRAME, checkLevel);
		//then listening for a mouse click to start the game again
		stage.addEventListener(MouseEvent.CLICK, beginCode);
	}
}

Now that we can beat a level, we now have to lose a level. We’re going to have to add a lives variable at the top first. We’re also going add a variable that defines if the game is over.

//how many lives you got
var lives:int = 3;
//if the game is over
var gameOver:Boolean = false;

Then, we have to subtract a life every time the ball hits the floor and do other stuff when the lives are all gone.

if(mcBall.y >= stage.stageHeight-mcBall.height){
	//if the ball hits the bottom
	//then bounce up and lose a life
	ballYSpeed *= -1;
	lives --;
	//if there aren't any lives left
	if(lives <= 0){
		//the game is over now
		gameOver = true;
		//go to a lose frame
		gotoAndStop('lose');
	}
}

Of course, now we have to create a frame called “lose”. I’m just going to make a frame that that has the text, “YOU LOSE”. Make sure to give your frame a label of “lose”, or the code won’t work.

Also, we have to remove the bricks from the stage, because they were added dynamically and won’t go away if you just change a frame. So, type the following code into the enterFrameEvents function in Brick.as.

//checking if the player has lost
if(_root.gameOver){
	//destroy this brick
	this.parent.removeChild(this);
	//stop running this code
	removeEventListener(Event.ENTER_FRAME, enterFrameEvents);
}

For some reason, this code outputs an error. Don’t worry though, nothing is really wrong.

Now, we have to make the player be able to restart the game after losing. This will be easy. Just add a listener to the stage that will reset the game if the stage is clicked. This code should be in the “lose” frame.

//The lose frame
 
//resetting the game if the mouse is clicked
stage.addEventListener(MouseEvent.CLICK, resetGame);
 
function resetGame(event:MouseEvent):void{
	//removing this listener
	stage.addEventListener(MouseEvent.CLICK, resetGame);
	//resetting the game
	gotoAndPlay(1);
}

Well, that’s all for this lesson. The next one will be the final one, where we add some finishing touches, and fix some bugs.

How to Create a Brick Breaker Game in AS3 – Part 4

Mr Sun — Fri, 24 Jul 2009 12:04:17 +0000

Now that we’ve actually made the bricks, we can now break them with our ball… Anyway, this will be pretty easy to accomplish. But, if you are new to ActionScript 3.0 classes, it’ll be a pretty cool learning experience.

First of all, we’re going to have to create a class file for the bricks. This is easy, just go to File->New and select “ActionScript File”.

Once you’ve created the file, immediately save it as “Brick.as” in the same folder as your .fla file. Then, type the following code in:

//Classes must always be wrapped in a package
package {
	//importing display elements that we can use in this class
	import flash.display.*;
	//importing flash events that we can use (like ENTER_FRAME)
	import flash.events.*;
 
	//defining the class name and saying that it
	//extends the MovieClip class, meaning that it has the same
	//properties as a movieclip
	public class Brick extends MovieClip {
		//all classes must have a function that runs every time
		//an instance of the class is put on stage
		public function Brick(){
 
		}
	}
}

This is a skeleton of what most ActionScript classes will look like. Although making a class is not necessary for this small game, it will definitely help if you want to expand your game. In order the use the class file in your game, you must import it first, so add this code to the first line of the first frame of your main flash file.

1 2	//IMPORTS import Brick;

We also have to change our previous brick MovieClip, mcBrick, to the class, Brick. This way, all of the code we place into Brick.as will be used in the Brick MovieClip.

So, right click the mcBrick MovieClip in your library and click on linkage. This window will pop up.

Now, find where it says “Class” (it’s going to be highlighted), and set it from “mcBrick” to “Brick”. Now, we have a class. Of course, now we’re going to have to change the makeLvl() function slightly. Now we don’t add “mcBrick” to the stage, but just “Brick”. Just change the following:

var brick:MovieClip = new mcBrick();

to:

var brick:Brick = new Brick();

If you test it out, it will work out exactly the same as before. Now, we add code to “Brick.as”. Let’s go.

We can’t access the root level of the document through the Brick() function, so we’re going to add two listeners to it.

public function Brick(){
	//Code that will be run when the brick is added to the stage
	addEventListener(Event.ADDED, beginClass);
	//Enter frame code
	addEventListener(Event.ENTER_FRAME, enterFrameEvents);
}

Next, we define those two functions.

//private function are just functions that you can't access
//from the main timeline, but only within the class itself
private function beginClass(event:Event):void{
 
}
private function enterFrameEvents(event:Event):void{
 
}

In order to access the main timeline, we have to type in MovieClip(root). But, this is quite a bit of typing, so we can shorten it by putting it into a variable. Because I’m guessing that most of you have used ActionScript 2.0 before, I’m going to call this variable _root. Because this variable is non-existent in AS3, we can define it as anything. In this case, it actually will be the root of the document. Place this code after the class definition:

public class Brick extends MovieClip {
	//The main timeline!
	private var _root:MovieClip;
//etc etc etc

Then, we can define the variable within the beginClass() function:

//defining _root as the document root
_root = MovieClip(root);

Now, we can easily access the main timeline within the class. Go on, test it out. Make a trace statement or two.

Now, let’s make some hit testing, eh?

private function enterFrameEvents(event:Event):void{
	//hit testing with the ball
	if(this.hitTestObject(_root.mcBall)){
		//making the ball bounce off vertically
		_root.ballYSpeed *= -1;
		//destroying this brick
		this.parent.removeChild(this);
		//stop running this code
		removeEventListener(Event.ENTER_FRAME, enterFrameEvents);
	}
}

This will make the ball bounce off and destroy the brick every time it touches it. Pretty cool, right? Well, that’s all for this part of the tutorial. Next, we’re going to make more levels and add a win/lose system!

Final Code for Main Flash File Frame 1:

//IMPORTS
import Brick;
//Current level player is on
var currentLvl:int = 1;
//The array code for lvl 1
var lvl1Code:Array = new Array(1,1,1,1,1,1,1);
//The array that contains all of the level codes
var lvlArray:Array = new Array(lvl1Code);

Final Code for Main Flash File Frame 2:

stop();
//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);
	//making the level
	makeLvl();
}
 
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;
}
 
function makeLvl():void{ //Places bricks onto Level
	//finding the array length of the lvl code
 
	//The index has to be currentLvl-1 because:
	//array indexes start on 0 and our lvl starts at 1
	//our level will always be 1 higher than the actual index of the array
	var arrayLength:int = lvlArray[currentLvl-1].length;
	//the current row of bricks we are creating
	var brickRow:int = 0;
	//Now, creating a loop which places the bricks onto the stage
	for(var i:int = 0;i<arrayLength;i++){
		//checking if it should place a brick there
		if(lvlArray[currentLvl-1][i] == 1){
			//creating a variable which holds the brick instance
			var brick:Brick = new Brick();
			//setting the brick's coordinates via the i variable and brickRow
			brick.x = 15+(i-brickRow*7)*75;
			brick.y = 10+brickRow*20;
			//checks if the current brick needs a new row
			for(var c:int = 1;c<=10;c++){
				if(i == c*7-1){
					brickRow ++;
				}
			}
			//finally, add the brick to stage
			addChild(brick);
		}
	}
}
 
beginCode();

Final Code for Brick.as

//Classes must always be wrapped in a package
package {
	//importing display elements that we can use in this class
	import flash.display.*;
	import flash.events.*;
 
	//defining the class name and saying that it
	//extends the MovieClip class, meaning that it has the same
	//properties as a movieclip
	public class Brick extends MovieClip {
		//The main timeline!
		private var _root:MovieClip;
		//all classes must have a function that runs every time
		//an instance of the class is put on stage
		public function Brick(){
			//Code that will be run when the brick is added to the stage
			addEventListener(Event.ADDED, beginClass);
			//Enter frame code
			addEventListener(Event.ENTER_FRAME, enterFrameEvents);
		}
		//private function are just functions that you can't access
		//from the main timeline, but only within the class itself
		private function beginClass(event:Event):void{
			//defining _root as the document root
			_root = MovieClip(root);
		}
		private function enterFrameEvents(event:Event):void{
			//hit testing with the ball
			if(this.hitTestObject(_root.mcBall)){
				//making the ball bounce off vertically
				_root.ballYSpeed *= -1;
				//destroying this brick
				this.parent.removeChild(this);
				//stop running this code
				removeEventListener(Event.ENTER_FRAME, enterFrameEvents);
			}
		}
	}
}

How to Create a Brick Breaker Game in AS3 – Part 3

Mr Sun — Fri, 24 Jul 2009 12:03:13 +0000

Ok, we’ve got the paddle and the ball. Now, the only major thing left to program is the brick. This is also the hardest to program, so it will be split up into 2 parts, setting them up, and breaking them down. Let us begin.

First of all, we need to look at how we’re going to set the bricks on the stage. We’re going to use an array with different numbers that will signify different bricks. In this tutorial, because we are keeping it simple, we will only use 2 different numbers, 1 and 0. 1 will mean to place a brick, and 0 will mean not to. An example for a simple level would be this:

//this would create one row of bricks
lvl1Array:Array = new Array(1,1,1,1,1,1,1);

Of course, this code will do nothing unless we create a function to actually make the bricks. The first step to this is actually making the brick movieclip. So, mine is just going to be a plain white, with dimensions of 70×15 pixels. Also, this movieclip should be exported for ActionScript so we can dynamically add it to the stage.

Got it? Now, here comes the tricky part, programming it. First of all, we are going to define a function called makeLvl(). Then, we are going to need to make some starting variables. These variables, however, can’t be reset every time the user beats a level, so it we have to make a frame before the the frame with all of the code. If you don’t get it, then here’s a picture.

In this frame, put the following code:

//Current level player is on
var currentLvl:int = 1;
//The array code for lvl 1
var lvl1Code:Array = new Array(1,1,1,1,1,1,1);
//The array that contains all of the level codes
var lvlArray:Array = new Array(lvl1Code);

Hopefully, I’ve explained what each of the variables do well enough that you understand. Also, in the 2nd frame, the game frame, just add a stop(); to the beginning. This way, the game doesn’t keep on looping.

Now, we’re going to go back to the game farme and we are going to add some intense code into the makeLvl() function. Here we go:

function makeLvl():void{ //Places bricks onto Level
	//finding the array length of the lvl code
 
	//The index has to be currentLvl-1 because:
	//array indexes start on 0 and our lvl starts at 1
	//our level will always be 1 higher than the actual index of the array
	var arrayLength:int = lvlArray[currentLvl-1].length;
	//the current row of bricks we are creating
	var brickRow:int = 0;
	//Now, creating a loop which places the bricks onto the stage
	for(var i:int = 0;i<arrayLength;i++){
		//checking if it should place a brick there
		if(lvlArray[currentLvl-1][i] == 1){
			//creating a variable which holds the brick instance
			var brick:MovieClip = new mcBrick();
			//setting the brick's coordinates via the i variable and brickRow
			brick.x = 15+(i-brickRow*7)*75;
			brick.y = 10+brickRow*20;
			//checks if the current brick needs a new row
			for(var c:int = 1;c<=10;c++){
				if(i == c*7-1){
					brickRow ++;
				}
			}
			//finally, add the brick to stage
			addChild(brick);
		}
	}
}

Now, just put makeLvl(); into the beginCode() function and you’re set. The next step is getting the ball to break the bricks. But, that is for a later time. Here is the code you should have:

First Frame:

//Current level player is on
var currentLvl:int = 1;
//The array code for lvl 1
var lvl1Code:Array = new Array(1,1,1,1,1,1,1);
//The array that contains all of the level codes
var lvlArray:Array = new Array(lvl1Code);

Game Frame:

stop();
//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);
	//making the level
	makeLvl();
}
 
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;
}
 
function makeLvl():void{ //Places bricks onto Level
	//finding the array length of the lvl code
 
	//The index has to be currentLvl-1 because:
	//array indexes start on 0 and our lvl starts at 1
	//our level will always be 1 higher than the actual index of the array
	var arrayLength:int = lvlArray[currentLvl-1].length;
	//the current row of bricks we are creating
	var brickRow:int = 0;
	//Now, creating a loop which places the bricks onto the stage
	for(var i:int = 0;i<arrayLength;i++){
		//checking if it should place a brick there
		if(lvlArray[currentLvl-1][i] == 1){
			//creating a variable which holds the brick instance
			var brick:MovieClip = new mcBrick();
			//setting the brick's coordinates via the i variable and brickRow
			brick.x = 15+(i-brickRow*7)*75;
			brick.y = 10+brickRow*20;
			//checks if the current brick needs a new row
			for(var c:int = 1;c<=10;c++){
				if(i == c*7-1){
					brickRow ++;
				}
			}
			//finally, add the brick to stage
			addChild(brick);
		}
	}
}
beginCode();

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

Mr Sun — Fri, 24 Jul 2009 12:02:06 +0000

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();

How to Create a Brick Breaker Game in AS3 – Part 1

Mr Sun — Fri, 24 Jul 2009 12:01:54 +0000

Ok, this is going to be my first tutorial on hopefully a simple subject. This is probably going to be broken up into a few parts. So, here we go.

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:

//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);
}
 
function movePaddle(event:Event):void{
	//The paddle follows the mouse
	mcPaddle.x = mouseX;
}
 
beginCode();

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 = mouseX;

with

mcPaddle.x = mouseX - mcPaddle.width / 2;

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 movePaddle function.

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

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.

//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);
}
 
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;
	}
}
 
beginCode();

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

Mr Sun — Thu, 23 Jul 2009 12:05:47 +0000

//The array code for lvl 1
//All of the later levels add one more row of bricks
var lvl1Code:Array = new Array(1,1,1,1,1,1,1);
var lvl2Code:Array = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1);
var lvl3Code:Array = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1);
var lvl4Code:Array = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1);
var lvl5Code:Array = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1);
//The array that contains all of the level codes
var lvlArray:Array = new Array(lvl1Code, lvl2Code, lvl3Code, lvl4Code, lvl5Code);

Next, add this code at the end of the frame.

//setting the text's word
txtStart.text = "Click To Begin";

You can make the text different, but don’t be too mean. Next, we have to remove the text, which we can do in the mcBg’s onRelease() function. We aren’t going to remove the text field itself because we need it again for every level.

//removing the "Click to Start" Text
txtStart.text = '';

Now, we have to reset it every level. I’m not going to tell you how to do it. I hope you’ve learned enough to be able to.

Now, we can make the scoring happen. 10 points should be awarded to the player for destroying one brick. I’ll leave it to you to find out how to do this.

The next thing we have to do is display the current level, the score, and how many lives the user has. This will be pretty simple as well, so I won’t really go into details about how to do it. Just create a dynamic text field and update it in the onEnterFrame() function. Pretty easy, eh?

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

Mr Sun — Thu, 23 Jul 2009 12:04:46 +0000

We’re first going make it possible to beat the level. In order for this to happen, we have to track how many bricks are on the stage. Just define the following variable at the top of the code.

var brickAmt:Number = 0;

Now, we have to increment this number every time a brick is placed onto the stage. Type in this code into the makeLvl() function where we actually create the brick:

//incrementing how many bricks are on the stage
_root.brickAmt ++;

Next, we have to decrement the number every time a brick is destroyed. Just type in this code in the hitTest if statement:

//decrementing how many bricks are on the stage
_root.brickAmt --;

That was pretty easy, right? Now, we have to add some code that will check if the value of bricks is 0.
You can do so in the onEnterFrame() function:

//checking if the bricks are all gone
if(brickAmt == 0){
	//reset the level by increasing the level
	currentLvl ++;
	//and re-running makeLvl
	makeLvl();
}

When this code runs, nothing will happen when you break all of the bricks because we haven’t defined more levels. But, there is one thing I want to fix before doing that. The game starts automatically, even if the player isn’t ready. So, we want to start the level only when the user first clicks on the screen. This is actually easier than you might think. The first thing we need to do is create a black rectangle that covers the entire stage. Then, we have to turn it into a MovieClip. Name it mcBg, Export it for ActionScript, and give it an instance name of mcBg. Then, add the following to the bottom of the code:

mcBg.onRelease = function(){ //creating a function that will run when bg is clicked
	//move the bg out of range so it isn't bothersome
	mcBg._x = 800;
}

Now, we have to add the entire onEnterFrame() function to this, so it looks like this:

mcBg.onRelease = function(){ //creating a function that will run when bg is clicked
	//move the bg out of range so it isn't bothersome
	mcBg._x = 800;
	_root.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;
		}
 
		//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 <= 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(mcBall.hitTest(mcPaddle)){
			//calculate the ball angle if ball hits paddle
			calcBallAngle();
		}
 
		//checking if the bricks are all gone
		if(brickAmt == 0){
			//reset the level by increasing the level
			currentLvl ++;
			//and re-running makeLvl
			makeLvl();
		}
	}
}

This is pretty solid code, but it does have some issues. One problem we have to fix is that the level is immediately made after you break all of the bricks, without resetting the ball’s position or anything (it may not be like that on yours, but trust me, I’ve tested it). Just paste in this code where we level up in the onEnterFrame() function:

//checking if the bricks are all gone
if(brickAmt == 0){
	//reset the level by increasing the level
	currentLvl ++;
	//and re-running makeLvl
	makeLvl();
	//reset the ball's position
	mcBall._x = 175;
	mcBall._y = 250;
	//then move the background back
	mcBg._x = 0;
	//and remove all of these events
	_root.onEnterFrame = null;
}

Now that we can beat a level, we now have to lose a level. We’re going to have to add a lives variable at the top first. We’re also going add a variable that defines if the game is over.

//how many lives you got
var lives:Number = 3;
//if the game is over
var gameOver:Boolean = false;

Then, we have to subtract a life every time the ball hits the floor and do other stuff when the lives are all gone.

if(mcBall._y >= Stage.height-mcBall._height){
	//if the ball hits the bottom
	//then bounce up and lose a life
	ballYSpeed *= -1;
	lives --;
	//if there aren't any lives left
	if(lives <= 0){
		//the game is over now
		gameOver = true;
		//go to a lose frame
		gotoAndStop('lose');
	}
}

Also, we have to remove the bricks from the stage, because they were added dynamically and won’t go away if you just change a frame. So, type the following code into the brick’s onEnterFrame function.

if(_root.gameOver){//if game's over
	this.removeMovieClip();//then remove this from stage
}

Now, we have to make the player be able to restart the game after losing. This will be easy. Just add the mcBg back to the stage that will reset the game if the stage is clicked. This code should be in the “lose” frame:

mcBg._x = 0; //putting the mcBg back
mcBg.onRelease = function(){
	gotoAndPlay(1);//restart the game
}

Well, that’s all for this lesson. The next one will be the final one, where we add some finishing touches, and fix some bugs.

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

Mr Sun — Thu, 23 Jul 2009 12:03:45 +0000

Now that we’ve actually made the bricks, we can now break them with our ball… Anyway, this will be pretty easy to accomplish. All you have to do is change this code in the makeLvl() function:

		if(lvlArray[currentLvl-1][i] == 1){
			//creating a variable which holds the brick instance
			_root.attachMovie('mcBrick', 'brick'+i,_root.getNextHighestDepth());
			//setting the brick's coordinates via the i variable and brickRow
			_root['brick'+i]._x = 15+(i-brickRow*7)*75;
			_root['brick'+i]._y = 10+brickRow*20;
			//checks if the current brick needs a new row
			for(var c:Number = 1;c<=10;c++){
				if(i == c*7-1){
					brickRow ++;
				}
			}
		}

to this:

		if(lvlArray[currentLvl-1][i] == 1){
			//creating a variable which holds the brick instance
			_root.attachMovie('mcBrick', 'brick'+i,_root.getNextHighestDepth());
			//setting the brick's coordinates via the i variable and brickRow
			_root['brick'+i]._x = 15+(i-brickRow*7)*75;
			_root['brick'+i]._y = 10+brickRow*20;
			//giving this brick some actions
			_root['brick'+i].onEnterFrame = function(){
				if(this.hitTest(_root.mcBall)){//if this touches the ball
					//then destroy this mofugger!
					this.removeMovieClip();
					//and make the ball bounce away
					ballYSpeed *= -1;
				}
			}
			//checks if the current brick needs a new row
			for(var c:Number = 1;c<=10;c++){
				if(i == c*7-1){
					brickRow ++;
				}
			}
		}

That was pretty easy, wasn’t it? Definitely much easier than what had to be done in AS3. Well, since we have time, I’m going to post here what your code should look like at this time:

Frame 1:

//Current level player is on
var currentLvl:Number = 1;
//The array code for lvl 1
var lvl1Code:Array = new Array(1,1,1,1,1,1,1);
//The array that contains all of the level codes
var lvlArray:Array = new Array(lvl1Code);

Frame 2:

stop();
//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 < 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;
	}
 
	//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 <= 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(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;
}
 
function makeLvl():Void{ //Places bricks onto Level
	//finding the array length of the lvl code
	//The index has to be currentLvl-1 because:
	//array indexes start on 0 and our lvl starts at 1
	//our level will always be 1 higher than the actual index of the array
	var arrayLength:Number = _root.lvlArray[currentLvl-1].length;
	//the current row of bricks we are creating
	var brickRow:Number = 0;
	//Now, creating a loop which places the bricks onto the stage
	for(var i:Number = 0;i<arrayLength;i++){
		//checking if it should place a brick there
		if(lvlArray[currentLvl-1][i] == 1){
			//creating a variable which holds the brick instance
			_root.attachMovie('mcBrick', 'brick'+i,_root.getNextHighestDepth());
			//setting the brick's coordinates via the i variable and brickRow
			_root['brick'+i]._x = 15+(i-brickRow*7)*75;
			_root['brick'+i]._y = 10+brickRow*20;
			//giving this brick some actions
			_root['brick'+i].onEnterFrame = function(){
				if(this.hitTest(_root.mcBall)){//if this touches the ball
					//then destroy this mofugger!
					this.removeMovieClip();
					//and make the ball bounce away
					ballYSpeed *= -1;
				}
			}
			//checks if the current brick needs a new row
			for(var c:Number = 1;c<=10;c++){
				if(i == c*7-1){
					brickRow ++;
				}
			}
		}
	}
}
 
makeLvl(); //finally, run the function

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

Mr Sun — Thu, 23 Jul 2009 12:02:44 +0000

First of all, we need to look at how we’re going to set the bricks on the stage. We’re going to use an array with different numbers that will signify different bricks. In this tutorial, because we are keeping it simple, we will only use 2 different numbers, 1 and 0. 1 will mean to place a brick, and 0 will mean and empty space. An example for a simple level would be this:

//this would create one row of bricks
lvl1Array:Array = new Array(1,1,1,1,1,1,1);

Of course, this code will do nothing unless we create a function to actually make the bricks. The first step to this is actually making the brick MovieClip. So, mine is just going to be a plain white, with dimensions of 70×15 pixels. Also, this MovieClip should be exported for ActionScript so we can dynamically add it to the stage.

In this frame, put the following code:

//Current level player is on
var currentLvl:Number = 1;
//The array code for lvl 1
var lvl1Code:Array = new Array(1,1,1,1,1,1,1);
//The array that contains all of the level codes
var lvlArray:Array = new Array(lvl1Code);

Now, we’re going to go back to the game farme and we are going to add some intense code into the makeLvl() function. Here we go:

function makeLvl():Void{ //Places bricks onto Level
	//finding the array length of the lvl code
	//The index has to be currentLvl-1 because:
	//array indexes start on 0 and our lvl starts at 1
	//our level will always be 1 higher than the actual index of the array
	var arrayLength:Number = _root.lvlArray[currentLvl-1].length;
	//the current row of bricks we are creating
	var brickRow:Number = 0;
	//Now, creating a loop which places the bricks onto the stage
	for(var i:Number = 0;i<arrayLength;i++){
		//checking if it should place a brick there
		if(lvlArray[currentLvl-1][i] == 1){
			//creating a variable which holds the brick instance
			_root.attachMovie('mcBrick', 'brick'+i,_root.getNextHighestDepth());
			//setting the brick's coordinates via the i variable and brickRow
			_root['brick'+i]._x = 15+(i-brickRow*7)*75;
			_root['brick'+i]._y = 10+brickRow*20;
			//checks if the current brick needs a new row
			for(var c:Number = 1;c<=10;c++){
				if(i == c*7-1){
					brickRow ++;
				}
			}
		}
	}
}
 
makeLvl(); //finally, run the function

The next step is getting the ball to break the bricks. But, that is for a later time.