Flash Game Tuts » Advanced

How to Create a Tower Defense Game in AS3 – Part 7

Mr Sun — Sun, 26 Jul 2009 12:07:28 +0000

Welcome back! This part of the tutorial is where we just add all of the finishing touches to the game! Unlike the other parts of the tutorial, I won’t comment any of the code I give you, as the knowledge you have learned from this tutorial should tell you what’s going on. Luckily for you, there aren’t too many finishing touches for us to make, so your brain won’t hurt too much.

One of the things I want to do is show the player the range of the turret. If you’ve ever played a tower defense game, you you should know what I’m talking about. A translucent circle will appear to show the player how far the turret can shoot. We’re going to show this both when somebody hovers over an empty block and when somebody hovers over a turret. Let’s start with hovering over an empty block.

Lets first start by opening up “source.fla”. Add this code to the top. Don’t ask any questions… or else…

var rangeCircle:Shape = new Shape();
rangeCircle.graphics.beginFill(0x006600,.5);
rangeCircle.graphics.drawCircle(12.5,12.5,100);
rangeCircle.graphics.endFill();

Open up “EmptyBlock.as”, would you? Find the thisMouseOver() function and add the following code to it:

_root.rangeCircle.x = this.x;
_root.rangeCircle.y = this.y;
_root.addChild(_root.rangeCircle);

Find the thisMouseOut() function and add this code to it:

_root.removeChild(_root.rangeCircle);

Add the same thing to the thisClick() function and the work will be done for empty blocks. Now, let’s do the same thing for Turrets.

Open up “Turret.as”. Add this code to the Turret() function (the main function):

this.addEventListener(MouseEvent.MOUSE_OVER, thisMouseOver);
this.addEventListener(MouseEvent.MOUSE_OUT, thisMouseOut);

Next, add these two functions to the end of the class:

private function thisMouseOver(e:MouseEvent):void{
	_root.rangeCircle.x = this.x-12.5;
	_root.rangeCircle.y = this.y-12.5;
	_root.addChild(_root.rangeCircle);
}
private function thisMouseOut(e:MouseEvent):void{
	_root.removeChild(_root.rangeCircle);
}

Good stuff. Now, it should work if you hover over the turrets.

Now, what else can we add to our little game? The answer is: it’s up to you to decide what to add. It’s also up to you to use what you’ve learned to do it right. Thank you and good night.

How to Create a Tower Defense Game in AS3 – Part 6

Mr Sun — Sun, 26 Jul 2009 12:06:41 +0000

Welcome to the 6th part of the tutorial, Expanding on the Game! Well, what do I mean by “Expanding”? Well, by expanding, I mean that we’re going to create more enemies and more levels. Sounds pretty cool, doesn’t it?

The first thing we’re going to do before creating stronger enemies is to make the enemies give you money when you kill them. This will be easy. Just open up “Enemy.as” and find this code in eFrameEvents():

//destroy this if health is equal to or below 0
if(health <= 0){
	destroyThis();
}

Just add the following code to the if statement:

_root.money += 5;

Now, we can continue on to making better enemies. Open up “source.fla” and find the makeEnemies function. We’re going to have some major renovations to this functions. Just replace the function with this new code:

function makeEnemies():void{//this function will add enemies to the field
	if(enemyTime < enemyLimit){//if it isn't time to make them yet
		enemyTime ++;//then keep on waiting
	} else {//otherwise
		var theCode:int = enemyArray[currentLvl-1][currentEnemy];//get the code from the array
		if(theCode != 0){//if it isn't an empty space
			var newEnemy:Enemy = new Enemy(theCode);//then create a new enemy and pass in the code
			enemyHolder.addChild(newEnemy);//and add it to the enemyholder
		}
		currentEnemy ++;//move on to the next enemy
		enemyTime = 0;//and reset the time
	}
}

Okay, so the renovations weren’t too major. The only thing we changed was that instead of checking for the code of “1″, we check for any code that isn’t equal to “0″. Then, we pass that value into the Enemy class.

We’ll also have to make some changes in the startGame() functions. Don’t worry, they’ll be just as minor as the ones we just made. Replace the code inside of the function with this:

function startGame():void{//we'll run this function every time a new level begins
	for(var i:int=0;i<enemyArray[currentLvl-1].length;i++){
		if(enemyArray[currentLvl-1][i] != 0){
			enemiesLeft ++;
		}
	}
}

The only thing we changed here was that now we check for all numbers not equal to 0, instead of just counting those set as 1.

Of course, now we’re going to have to make some changes to the Enemy class. Open up “Enemy.as” and find the topmost code where we define the variables and define the Enemy() function. Just replace that with this:

private var _root:MovieClip;
public var xSpeed:int;//how fast it's going horizontally
public var ySpeed:int;//how fast it's going vertically
public var maxSpeed:int = 3;//how fast it can possibly go
public var health:int;
public var level:int;//this will be set to the number passed in
 
public function Enemy(code:int){
	this.addEventListener(Event.ADDED, beginClass);
	this.addEventListener(Event.ENTER_FRAME, eFrameEvents);
 
	level = code;//set the level to the value passed in for use in other functions
}

Not too many changes have been made. Now, we’re using that variable that was passed into the Enemy() function and making it usable. We’re also making the health undefined so we can change it based on the level. In fact, let’s change them now. Add this to the top of the beginCode() function:

health = level*5;

This will set the health based on the level of the enemy. Next, let’s make him worth a bit more points, shall we? Find the code that we added in the beginning of the tutorial. Simply replace it with this:

_root.money += 5*level;

Now, we can make more levels with better enemies! You can customize your own levels, or use the ones I created by setting these values in the enemyArray:

enemyArray = [//defining the array
			[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],//1's will just represent an enemy to be created
			[2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],//another row means another level
			[3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3],
			[100],
			[5,6,7,6,5,6,7,6,5,6,7,6,5,6,7,6,5,6,7,6,5,6,7,6,5,6,7,6,5],
			[250,250,250]
			  ];

Of course, I’d suggest creating your own levels, as mine aren’t what you would call the best. Anyways, this wraps up the second to last part of this tutorial. Join us next time when finish up this little game!

How to Create a Tower Defense Game in AS3 – Part 5

Mr Sun — Sun, 26 Jul 2009 12:05:30 +0000

Welcome back to the 5th installment of this tutorial series. In this lesson, we’ll make some playable levels, along with a winning and losing situation. Let’s dig in, shall we?

Lets start off by opening up the main source file. Find where this code is:

enemyArray = [//defining the array
			[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],//1's will just represent an enemy to be created
			[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],//another row means another level
			[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]
			  ];

Let’s review this code for a bit. Each of those arrays within that enemyArray represents a level. So, right now, we’re set up for 3 different levels, with an increasing amount of enemies in each level. Now that we’ve covered this, we can continue on to making it possible to advance levels.

In order to do this, we must open up “Enemy.as”. Find the destroyThis() function. Add this code to the bottom.

_root.enemiesLeft --;

Next, we’ll have to go back to “source.fla”. Find the eFrame() function. There should only be one line of code in there right now. We’re going to add some. Add the following code to the bottom of the eFrame() function:

if(enemiesLeft==0){//if there are no more enemies left
	currentLvl ++;//continue to the next level
	currentEnemy = 0;//reset the amount of enemies there are
	startGame();//restart the game
}

Now, try testing out the game. Functionally, it’s working 100%. Practically, it’s not a great game. In order to make this game better, we’re going to have to show some information to the user while they’re playing, like the current level, the score, etc. This is exactly what we’re going to do now.

Create four dynamic text boxes at the bottom left portion of the stage, each at 12 point font. Here’s an example of what yours should look like, with an example of what information we’re going to put into them later:

Got that? Now, we just have to give each of these dynamic text fields an instance name. Label them accordingly:

txtLevel
txtMoney
txtLives
txtEnemiesLeft

Now, let’s dive into some code, shall we?

The first thing we need to do is actually define the money and the lives variables. Just add this code to the top:

var money:int=100;//how much money the player has to spend on turrets
var lives:int=20;//how many lives the player has

Okay, good stuff. Let’s first make these two variables mean something before we update the text. We first have to make it so the player loses lives so he/she can lose the game. Open up “Enemy.as” and find this code:

//checking what direction it goes when finishing the path
if(_root.finDir == 'UP'){//if it finishes at the top
	if(this.y <= -25){//if the y value is too high
		destroyThis();//then remove this guy from the field
	}
} else if(_root.finDir == 'RIGHT'){//and so on for other directions
	if(this.x >= 550){
		destroyThis();
	}
} else if(_root.finDir == 'DOWN'){
	if(this.y >= 300){
		destroyThis();
	}
} else if(_root.startDir == 'LEFT'){
	if(this.x <= 0){
		destroyThis();
	}
}

All we have to do is make the player lose a life after all of these conditionals. It should look like this now:

//checking what direction it goes when finishing the path
if(_root.finDir == 'UP'){//if it finishes at the top
	if(this.y <= -25){//if the y value is too high
		destroyThis();//then remove this guy from the field
		_root.lives --;//take away a life
	}
} else if(_root.finDir == 'RIGHT'){//and so on for other directions
	if(this.x >= 550){
		destroyThis();
		_root.lives --;
	}
} else if(_root.finDir == 'DOWN'){
	if(this.y >= 300){
		destroyThis();
		_root.lives --;
	}
} else if(_root.startDir == 'LEFT'){
	if(this.x <= 0){
		destroyThis();
		_root.lives --;
	}
}

Next, we’ll make each of the turrets cost a certain amount of money. I’m thinking $20 is a good price. Open up “EmptyBlock.as” and find the thisClick function. Change it to this:

private function thisClick(e:MouseEvent):void{
	if(_root.money >= 20){//if the player has enough money
		_root.makeTurret(this.x,this.y);//make the turret
		//remove all the listeners so it can't be clicked on again
		this.buttonMode = false;
		this.graphics.beginFill(0x333333);
		this.graphics.drawRect(0,0,25,25);
		this.graphics.endFill();
		this.removeEventListener(MouseEvent.MOUSE_OVER, thisMouseOver);
		this.removeEventListener(MouseEvent.MOUSE_OUT, thisMouseOut);
		this.removeEventListener(MouseEvent.CLICK, thisClick);
 
		_root.money -= 20; //spend the money
	}
}

Now, we can update these text fields. Once again, find the eFrame() function in “source.fla”. Add the following code which will update all the text fields with the needed information:

//Updating the text fields
txtLevel.text = 'Level '+currentLvl;
txtMoney.text = '$'+money;
txtLives.text = 'Lives: '+lives;
txtEnemiesLeft.text = 'Enemies Left:  '+enemiesLeft;

Now, let’s create some winning and losing scenarios for the player. When the player has beaten all of the levels, then a win screen should show up. The same thing should happen with a lose screen when the player loses all of his/her lives. Let’s create these two frames, shall we?

Before, we create the frames, we have to add a layer called “labels”. This will just let us easily navigate to the required frames. Next, create a frame labeled “win” and add whatever message you want to inform the player that they’ve won. Do the same with a “lose” frame.

Now, we have to make it possible for the player to restart the game. We’ll let them do it by clicking anywhere on the screen. Copy and paste this code to the “win” frame.

stage.addEventListener(MouseEvent.CLICK, restartGame);//adding a mouse event listener for clicking the stage
function restartGame(e:MouseEvent):void{
	gotoAndStop(1);//go to the first frame
	stage.removeEventListener(MouseEvent.CLICK, restartGame);//remove the listener
}

We don’t need to define the function again in the “lose” frame, so you can just add this code to it:

stage.addEventListener(MouseEvent.CLICK, restartGame);//adding a mouse event listener for clicking the stage

All right, the next thing we have to do is navigate to the desired frame when the player wins or loses. Go back to “source.fla” and find the eFrame() function. Add the following code to the very beginning of it:

//if there aren't any levels left
if(currentLvl > enemyArray.length){
	gameOver=true;//set the game to be over
 
	//reset all the stats
	currentLvl = 1;
	currentEnemy = 0;
	enemyTime = 0;
	enemyLimit = 12;
	enemiesLeft = 0;
 
	removeEventListener(Event.ENTER_FRAME, eFrame);//remove this listener
	removeChild(roadHolder);//remove the pieces of road
	gotoAndStop('win');//go to the win frame
}
if(lives<=0){//if the user runs out of lives
	gameOver=true;//set the game to be over
 
	//reset all the stats
	currentLvl = 1;
	currentEnemy = 0;
	enemyTime = 0;
	enemyLimit = 12;
	enemiesLeft = 0;
 
	removeEventListener(Event.ENTER_FRAME, eFrame);//remove this listener
	removeChild(roadHolder);//remove the pieces of road
	gotoAndStop('lose');//go to the lose frame
}

Sweet. This concludes this installment of the tutorial series. Join us next time when we expand on the game!

How to Create a Tower Defense Game in AS3 – Part 4

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

Well, it’s now time to let the enemies we just created be destroyed. Let’s dig in, shall we?

First, we’ll define a single health variable for the Enemy. Just add this code to “Enemy.as” where we define all of the variables:

public var health:int = 5;

Next, we’re going to have to create a new class. We’ve done this many times before, so hopefully I don’t need to remind you how to do it. Just create a new ActionScript file and save it as “Bullet.as”. Now, we’re just going to have to place a bit of code into it:

package {
	import flash.display.MovieClip;
	import flash.events.*;
	public class Bullet extends MovieClip {
		private var _root:*;
		//these two variables below must be set to public so that we can edit them outside the class
		public var target;//the target that this guy is moving towards
		public var damage:int;//how much damage this guy inflicts on the enemy
 
		private var xSpeed:Number;//how fast it's moving horizontally
		private var ySpeed:Number;//how fast it's moving vertically
		private var maxSpeed:Number = 5;//how fast it can go
		public function Bullet() {
			addEventListener(Event.ADDED,beginClass);//this will run every time this guy is made
			addEventListener(Event.ENTER_FRAME,eFrame);//this will run every frame
		}
		private function beginClass(e:Event):void {
			_root = MovieClip(root);//setting the root
 
			//drawing this guy (it'll be a small white circle)
			this.graphics.beginFill(0xFFFFFF);
			this.graphics.drawCircle(0,0,2);
			this.graphics.endFill();
		}
		private function eFrame(e:Event):void {
			var yDist:Number=target.y+12.5 - this.y;//how far this guy is from the enemy (x)
			var xDist:Number=target.x+12.5 - this.x;//how far it is from the enemy (y)
			var angle:Number=Math.atan2(yDist,xDist);//the angle that it must move
			ySpeed=Math.sin(angle) * maxSpeed;//calculate how much it should move the enemy vertically
			xSpeed=Math.cos(angle) * maxSpeed;//calculate how much it should move the enemy horizontally
			//move the bullet towards the enemy
			this.x+= xSpeed;
			this.y+= ySpeed;
 
			if(this.hitTestObject(target)){//if it touches the enemy
				target.health -= damage;//make it lose some health
				destroyThis();//and destroy this guy
			}
			if(target == null || _root.gameOver == true){//destroy it if game is over
				destroyThis();
			}
		}
		public function destroyThis():void{
			//this function will just remove this guy from the stage
			this.removeEventListener(Event.ENTER_FRAME, eFrame);
			MovieClip(this.parent).removeChild(this);
		}
	}
}

The next thing we need to do is define some variables for the Turret. Open up “Turret.as” and add in the following code where we define the variables:

private var angle:Number; //the angle that the turret is currently rotated at
private var radiansToDegrees:Number = 180/Math.PI;//this is needed for the rotation
private var damage:int = 3;//how much damage this little baby can inflict
private var range:int = 100;//how far away (in pixels) it can hit a target
private var enTarget;//the current target that it's rotating towards
private var cTime:int = 0;//how much time since a shot was fired by this turret
private var reloadTime:int = 12;//how long it takes to fire another shot
private var loaded:Boolean = true;//whether or not this turret can shoot

Those are a lot of variables, aren’t they? Well, this is a pretty complex task, so we’re going to need all of them. So, brace yourself, for we are now going to jump into some code. Add this code to the eFrameEvents function in “Turret.as”:

//FINDING THE NEAREST ENEMY WITHIN RANGE
var distance:Number = range;//let's define a variable which will be how far the nearest enemy is
enTarget = null;//right now, we don't have a target to shoot at
for(var i:int=_root.enemyHolder.numChildren-1;i>=0;i--){//loop through the children in enemyHolder
	var cEnemy = _root.enemyHolder.getChildAt(i);//define a movieclip that will hold the current child
	//this simple formula with get us the distance of the current enemy
	if(Math.sqrt(Math.pow(cEnemy.y - y, 2) + Math.pow(cEnemy.x - x, 2)) < distance){
		//if the selected enemy is close enough, then set it as the target
		enTarget = cEnemy;
	}
}
//ROTATING TOWARDS TARGET
if(enTarget != null){//if we have a defined target
	//turn this baby towards it
	this.rotation = Math.atan2((enTarget.y-y), enTarget.x-x)/Math.PI*180 - 90;
	if(loaded){//if the turret is able to shoot
		loaded = false;//then make in unable to do it for a bit
		var newBullet:Bullet = new Bullet();//create a bullet
		//set the bullet's coordinates
		newBullet.x = this.x;
		newBullet.y = this.y;
		//set the bullet's target and damage
		newBullet.target = enTarget;
		newBullet.damage = damage;
		_root.addChild(newBullet);//add it to the stage
	}
}
//LOADING THE TURRET
if(!loaded){//if it isn't loaded
	cTime ++;//then continue the time
	if(cTime == reloadTime){//if time has elapsed for long enough
		loaded = true;//load the turret
		cTime = 0;//and reset the time
	}
}

Now, if you test the movie out, the turrets should be shooting at those darn red dots. Now, we have to make those dots die! In the eFrameEvents() function in “Enemy.as”, add the following code:

//remove this from stage when game is over
if(_root.gameOver){
	destroyThis();
}

Pretty hot stuff, ain’t it? Well, this concludes the fourth installment of this tutorial. Join us next time when we make levels and have winning and losing scenarios!

How to Create a Tower Defense Game in AS3 – Part 3

Mr Sun — Sun, 26 Jul 2009 12:03:57 +0000

Welcome back. In this part of the tutorial, we are going to add enemies to the field and we’re going to program them to move through the paths.

Let us begin by first creating an Enemy class. Do this by creating a new external ActionScript file saved as “Enemy.as” and adding the following code to it:

package{
	//imports
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.*;
	//defining the class
	public class Enemy extends MovieClip{
		private var _root:MovieClip;
		public var xSpeed:int;//how fast it's going horizontally
		public var ySpeed:int;//how fast it's going vertically
		public var maxSpeed:int = 3;//how fast it can possibly go
 
		public function Enemy(){
			this.addEventListener(Event.ADDED, beginClass);
			this.addEventListener(Event.ENTER_FRAME, eFrameEvents);
		}
		private function beginClass(e:Event):void{
			_root = MovieClip(root);//defining the root
 
			//checking what the start direction is
			if(_root.startDir == 'UP'){//if it's starting up
				this.y = 300;//set the y value off the field
				this.x = _root.startCoord;//make the x value where it should be
				this.xSpeed = 0;//make it not move horizontally
				this.ySpeed = -maxSpeed;//make it move upwards
			} else if(_root.startDir == 'RIGHT'){//and so on for other directions
				this.x = -25;
				this.y = _root.startCoord;
				this.xSpeed = maxSpeed;
				this.ySpeed = 0;
			} else if(_root.startDir == 'DOWN'){
				this.y = -25;
				this.x = _root.startCoord;
				this.xSpeed = 0;
				this.ySpeed = maxSpeed;
			} else if(_root.startDir == 'LEFT'){
				this.x = 550;
				this.y = _root.startCoord;
				this.xSpeed = -maxSpeed;
				this.ySpeed = 0;
			}
 
			//draw the actual enemy, it's just a red ball
			this.graphics.beginFill(0xFF0000);
			this.graphics.drawCircle(12.5,12.5,5);
			this.graphics.endFill();
		}
		private function eFrameEvents(e:Event):void{
			//move it based on x and y value
			this.x += xSpeed;
			this.y += ySpeed;
 
			//checking what direction it goes when finishing the path
			if(_root.finDir == 'UP'){//if it finishes at the top
				if(this.y <= -25){//if the y value is too high
					destroyThis();//then remove this guy from the field
				}
			} else if(_root.finDir == 'RIGHT'){//and so on for other directions
				if(this.x >= 550){
					destroyThis();
				}
			} else if(_root.finDir == 'DOWN'){
				if(this.y >= 300){
					destroyThis();
				}
			} else if(_root.startDir == 'LEFT'){
				if(this.x <= 0){
					destroyThis();
				}
			}
 
			//remove this from stage when game is over
			if(_root.gameOver){
				destroyThis();
			}
		}
		public function destroyThis():void{
			//this function will make it easier to remove this from stage
			this.removeEventListener(Event.ENTER_FRAME, eFrameEvents);
			this.parent.removeChild(this);
		}
	}
}

Now that’s a lot of code. The next thing we have to do is to add a function in the main “source.fla” that will add these guys to the field. But, let’s first create a bunch of variables that’ll help with the process. It’ll be simple. Just define them variable where all others are defined:

var currentEnemy:int = 0;//the current enemy that we're creating from the array
var enemyTime:int = 0;//how many frames have elapsed since the last enemy was created
var enemyLimit:int = 12;//how many frames are allowed before another enemy is created
var enemyArray:Array = new Array();//this array will tell the function when to create an enemy
var enemiesLeft:int;//how many enemies are left on the field
enemyArray = [//defining the array
			[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],//1's will just represent an enemy to be created
			[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],//another row means another level
			[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]
			  ];

Sweet. Now we can add an enterFrame function that’ll create the enemies for us. Add this to the bottom of your code:

addEventListener(Event.ENTER_FRAME, eFrame);//adding an eFrame function
function eFrame(e:Event):void{
	makeEnemies();//we'll just make some enemies
}
 
function makeEnemies():void{//this function will add enemies to the field
	if(enemyTime < enemyLimit){//if it isn't time to make them yet
		enemyTime ++;//then keep on waiting
	} else {//otherwise
		var theCode:int = enemyArray[currentLvl-1][currentEnemy];//get the code from the array
		if(theCode == 1){//if it's set as 1
			var newEnemy:Enemy = new Enemy();//then create a new enemy
			enemyHolder.addChild(newEnemy);//and add it to the enemyholder
		}
		currentEnemy ++;//move on to the next enemy
		enemyTime = 0;//and reset the time
	}
}

Also, we have to create an enemyHolder. We should do this after the road is put down, so all the enemies will appear on top of it. Add this code right after we run the makeRoad() function:

var enemyHolder:Sprite = new Sprite();
addChild(enemyHolder);

Next, we have to count the amount of enemies that are going to be created. Add this code to the startGame() function:

for(var i:int=0;i<enemyArray[currentLvl-1].length;i++){
	if(enemyArray[currentLvl-1][i] == 1){
		enemiesLeft ++;
	}
}

Now, there is one final thing to do in order to make these enemies work. Find the “DirectBlock.as” file for me, would you? Add this code to the beginClass() function:

if(directType == 'START'){
	if(directType == 'START'){//if this is a start block
		//then define the startDir and StartCoord based on it's coordinates
		if(this.x == 0){
			_root.startDir = 'RIGHT';
			_root.startCoord = this.y;
		} else if (this.y == 0){
			_root.startDir = 'DOWN';
			_root.startCoord = this.x;
		} else if (this.x == 525){
			_root.startDir = 'LEFT';
			_root.startCoord = this.y;
		} else if (this.y == 275){
			_root.startDir = 'UP';
			_root.startCoord = this.x;
		} else {
			//this level won't work if not any of these values
		}
	} else if (directType == 'FINISH'){//if this is a finish block
		//then define the finDir based on it's coordinates
		if(this.x == 0){
			_root.finDir = 'LEFT';
		} else if (this.y == 0){
			_root.finDir = 'UP';
		} else if (this.x == 525){
			_root.finDir = 'RIGHT';
		} else if (this.y == 275){
			_root.finDir = 'DOWN';
		} else {
			//this level won't work if not any of these values
		}
	}

Next, add this code to the eFrame() function:

if(directType != 'START' && directType != 'FINISH'){//if this isn't a start of finish block
	//then it'll act as a directioning block
	for(var i:int = 0;i<_root.enemyHolder.numChildren;i++){//create a loop
		var enTarget = _root.enemyHolder.getChildAt(i);//this will hold a certain enemy
		//if the enTarget's coordinates are too close to this block
		if(this.x >= enTarget.x - enTarget.width*.5 && this.x <= enTarget.x + enTarget.width*.5
		&& this.y >= enTarget.y - enTarget.height*.5 && this.y <= enTarget.y + enTarget.height*.5){
			//then move the enemy's direction based on what direction this block points to
			if(directType == 'UP'){
				enTarget.xSpeed = 0;
				enTarget.ySpeed = -enTarget.maxSpeed;
			} else if(directType == 'RIGHT'){
				enTarget.xSpeed = enTarget.maxSpeed;
				enTarget.ySpeed = 0;
			} else if(directType == 'DOWN'){
				enTarget.xSpeed = 0;
				enTarget.ySpeed = enTarget.maxSpeed;
			} else if(directType == 'LEFT'){
				enTarget.xSpeed = enTarget.maxSpeed;
				enTarget.ySpeed = 0;
			}
		}
	}
}

Phew! That was a lot of code, wasn’t it? Well, what these snippets of code do is simply direct the enemies to where they should start and where they should go.

That’s all for this part of the tutorial. Next time, we’ll make the turret detect and attack the enemies!

How to Create a Tower Defense Game in AS3 – Part 2

Mr Sun — Sun, 26 Jul 2009 12:02:42 +0000

Okay, so in this part of the tutorial, we are going to make it so when the user clicks on any of the empty blocks, a turret is created. The first step to take in to create a Turret class. You know the drill, create a new ActionScript File, save it as “Turret.as”, and type in the following code:

package{//creating the basic skeleton
	imporProxy-Connection: keep-alive
Cache-Control: max-age=0
 
flash.display.MovieClip;
	import flash.events.*;
	public class Turret extends MovieClip{
		private var _root:MovieClip;
 
		public function Turret(){
			//adding the required listeners
			this.addEventListener(Event.ADDED, beginClass);
			this.addEventListener(Event.ENTER_FRAME, eFrameEvents);
		}
		private function beginClass(e:Event):void{
			_root = MovieClip(root);
 
			//drawing the turret, it will have a gray, circular, base with a white gun
			this.graphics.beginFill(0x999999);
			this.graphics.drawCircle(0,0,12.5);
			this.graphics.endFill();
			this.graphics.beginFill(0xFFFFFF);
			this.graphics.drawRect(-2.5, 0, 5, 20);
			this.graphics.endFill();
		}
		private function eFrameEvents(e:Event):void{
 
			if(_root.gameOver){//destroy this if game is over
				this.removeEventListener(Event.ENTER_FRAME, eFrameEvents);
				MovieClip(this.parent).removeChild(this);
			}
		}
	}
}

This will be only the beginning of what we program into the Turret. Next, we have to define a function in the _root of the document that will create the turrets. Add this code to the bottom in your source .fla file:

function makeTurret(xValue:int,yValue:int):void{//this will need to be told the x and y values
	var turret:Turret = new Turret();//creating a variable to hold the Turret
	//changing the coordinates
	turret.x = xValue+12.5;
	turret.y = yValue+12.5;
	addChild(turret);//add it to the stage
}

Now, we can finally make it so the turret is created when the user clicks on an empty block. Find the function thisClick() in “EmptyBlock.as”. Add the following code to that:

_root.makeTurret(this.x,this.y);//make the turret
//remove all the listeners so it can't be clicked on again
this.buttonMode = false;
this.graphics.beginFill(0x333333);
this.graphics.drawRect(0,0,25,25);
this.graphics.endFill();
this.removeEventListener(MouseEvent.MOUSE_OVER, thisMouseOver);
this.removeEventListener(MouseEvent.MOUSE_OUT, thisMouseOut);
this.removeEventListener(MouseEvent.CLICK, thisClick);

Now, if you test out the game, a turret should appear whenever you click on any empty block!

Well, that’s it for this tutorial. Next time, we’ll add enemies and program them!

How to Create a Tower Defense Game in AS3 – Part 1

Mr Sun — Sun, 26 Jul 2009 12:01:36 +0000

The tower defense genre is one that has become extremely popular over the years. Although they can become quite complicated to develop, they are almost always very fun to play. I am here to walk you through the creation of one of these games. Let us begin, shall we?

In this section of the tutorial, we’re going to set up the roads and stuff onto the stage. However, the first thing we need to do is create a blank flash document with a black background with the frames per second set at 24.

Now, we have to create two classes. In order to do this, simply create two external ActionScript files by selecting File -> New -> ActionScript File, twice. The first class we’ll create is one for an empty block that towers can be placed in. Add the following code to it:

package{
	//importing required classes for this to work
	import flash.display.MovieClip;
	import flash.events.*;
	public class EmptyBlock extends MovieClip{//defining the class as EmptyBlock
		private var _root:MovieClip;//creating a _root variable to access root easily
 
		public function EmptyBlock(){//this function will always run once EmptyBlock is called
			this.addEventListener(Event.ADDED, beginClass);//create a function that will run once
			this.addEventListener(Event.ENTER_FRAME, eFrameEvents);//create a enterFrame function
		}
		private function beginClass(e:Event):void{
			_root = MovieClip(root);//setting the _root as the root level
 
			this.buttonMode = true;//make this act like a button
			this.addEventListener(MouseEvent.MOUSE_OVER, thisMouseOver);//adding function for mouseOver
			this.addEventListener(MouseEvent.MOUSE_OUT, thisMouseOut);//adding function for mouseOut
			this.addEventListener(MouseEvent.CLICK, thisClick);//adding function for clicking
		}
		private function eFrameEvents(e:Event):void{
			if(_root.gameOver){//remove this and listeners if game is over
				this.removeEventListener(Event.ENTER_FRAME, eFrameEvents);
				this.removeEventListener(MouseEvent.MOUSE_OVER, thisMouseOver);
				this.removeEventListener(MouseEvent.MOUSE_OUT, thisMouseOut);
				this.removeEventListener(MouseEvent.CLICK, thisClick);
				MovieClip(this.parent).removeChild(this);
			}
		}
		private function thisMouseOver(e:MouseEvent):void{
			//changing the background so the user know's it's clickable
			this.graphics.drawRect(0,0,25,25);
			this.graphics.endFill();
		}
		private function thisMouseOut(e:MouseEvent):void{
			//changing the background back
			this.graphics.beginFill(0x333333);
			this.graphics.drawRect(0,0,25,25);
			this.graphics.endFill();
		}
		private function thisClick(e:MouseEvent):void{
			//we'll add code that'll make a turret be made later
		}
	}
}

I’ve commented the code extensively if you need any explanation. Now, save this file as “EmptyBlock.as” in the same folder as your source .fla file. Now, take the second external ActionScript file. We will turn this into a special block which will act as a marker for the road. There are going to be 6 types of this special block, the four different directional notifiers, and the start and finish block. They won’t look any different than any other block, but they will be very important later. Add this code to that second class:

package{
	//imports
	import flash.display.*;
	import flash.events.*;
	import flash.geom.*;
	public class DirectBlock extends MovieClip{//we'll call it a DirectBlock
		private var _root:MovieClip;//again, defining a _root
		private var directType:String;//what kind of special block is this
 
		//this time, we have to accept some values to make it easier to place, like the type and coordinates
		public function DirectBlock(type:String,xVal:int,yVal:int){
			directType = type;//set the directType so that all other functions can use it
			//add the required event listeners
			this.addEventListener(Event.ADDED, beginClass);
			this.addEventListener(Event.ENTER_FRAME, eFrame);
 
			//setting the coordinates
			this.x = xVal;
			this.y = yVal;
		}
		private function beginClass(e:Event):void{
			_root = MovieClip(root);//setting the _root again
 
			//making this into a 25x25 square
			this.graphics.beginFill(0x111111);
			this.graphics.drawRect(0,0,25,25);
			this.graphics.endFill();
		}
		private function eFrame(e:Event):void{
			if(_root.gameOver == true){//destroy this if the game's over
				this.removeEventListener(Event.ENTER_FRAME, eFrame);
				MovieClip(this.parent).removeChild(this);
			}
			//we'll add more code to this later
		}
	}
}

This will just set up the blocks. Now, we must return back to the main .fla file. Create a new layer to place actions in, and add the following code:

stop();
 
//setting vars to step in for turns and special blocks
var S:String = 'START';
var F:String = 'FINISH';
var U:String = 'UP';
var R:String = 'RIGHT';
var D:String = 'DOWN';
var L:String = 'LEFT';
 
var startDir:String;//the direction the enemies go when they enter
var finDir:String;//the direction the enemies go when they exit
var startCoord:int;//the coordinates of the beginning of the road
var lvlArray:Array = new Array();//this array will hold the formatting of the roads
 
lvlArray = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
			0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
			0,0,0,0,R,1,1,D,0,0,R,1,1,D,0,0,R,1,1,D,0,0,
			0,0,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,
			0,0,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,
			S,D,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,R,1,F,
			0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,0,0,0,
			0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,0,0,0,
			0,R,1,1,U,0,0,R,1,1,U,0,0,R,1,1,U,0,0,0,0,0,
			0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
			0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
			0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
			];
 
//the names of these variables explain what they do
var currentLvl:int = 1;
var gameOver:Boolean = false;
 
function startGame():void{//we'll run this function every time a new level begins
	//right now we don't have any code
}
 
var roadHolder:Sprite = new Sprite();//create an object that will hold all parts of the road
addChild(roadHolder);//add it to the stage
function makeRoad():void{
	var row:int = 0;//the current row we're working on
	var block;//this will act as the block that we're placing down
	for(var i:int=0;i<lvlArray.length;i++){//creating a loop that'll go through the level array
		if(lvlArray[i] == 0){//if the current index is set to 0
			block = new EmptyBlock();//create a gray empty block
			block.graphics.beginFill(0x333333);
			block.graphics.drawRect(0,0,25,25);
			block.graphics.endFill();
			addChild(block);
			//and set the coordinates to be relative to the place in the array
			block.x= (i-row*22)*25;
			block.y = row*25;
		} else if(lvlArray[i] == 1){//if there is supposed to be a row
			//just add a box that will be a darker color and won't have any actions
			block = new Shape();
			block.graphics.beginFill(0x111111);
			block.graphics.drawRect(0,0,25,25);
			block.graphics.endFill();
			block.x= (i-row*22)*25;
			block.y = row*25;
			roadHolder.addChild(block);//add it to the roadHolder
		} else if(lvlArray[i] is String){//if it's a string, meaning a special block
			//then create a special block
			block = new DirectBlock(lvlArray[i],(i-row*22)*25,row*25);
			addChild(block);
		}
		for(var c:int = 1;c<=16;c++){
			if(i == c*22-1){
				//if 22 columns have gone by, then we move onto the next row
				row++;
			}
		}
	}
}
//run these functions at the start
makeRoad();
startGame();

Now, if you test out your game, you’ll see nice little road set up for you. However, we need to keep that empty space in the bottom so we can add stats and other cool stuff.

Well, that concludes this first part of the tutorial. Next time we’ll make it so you can add turrets!

How to Create a Tower Defense Game in AS2 – Part 7

Mr Sun — Sat, 25 Jul 2009 12:07:48 +0000

Now, what can we add to our little game? The answer is: it’s up to you to decide what to add. It’s also up to you to use what you’ve learned to do it right. Thank you and good night.

How to Create a Tower Defense Game in AS2 – Part 6

Mr Sun — Sat, 25 Jul 2009 12:06:07 +0000

Open up “source.fla” and find the makeEnemies function. We’re going to have some major renovations to this functions. Just replace the function with this new code:

function makeEnemies():Void{//this function will add enemies to the field
	if(enemyTime &lt; enemyLimit){//if it isn't time to make them yet
		enemyTime ++;//then keep on waiting
	} else {//otherwise
		var theCode:Number = enemyArray[currentLvl-1][currentEnemy];//get the code from the array
		if(theCode != 0 &amp;&amp; theCode != null){//if it's not set at 0
			//then create a new enemy and add it to the enemy holder
			enemyHolder.createEmptyMovieClip('enemy'+currentEnemy,enemyHolder.getNextHighestDepth());
			//now we're going to draw the enemy. It'll just be a tiny red circle
			enemyHolder['enemy'+currentEnemy].beginFill(0xFF0000);//coloring them red gray
			enemyHolder['enemy'+currentEnemy].moveTo(0, 2.5);//move the entire shape a certain way
			//create 4 curves so that it'll look like a circle
			enemyHolder['enemy'+currentEnemy].curveTo(0,10,5,10);
			enemyHolder['enemy'+currentEnemy].curveTo(10,10,10,5);
			enemyHolder['enemy'+currentEnemy].curveTo(10,0,5,0);
			enemyHolder['enemy'+currentEnemy].curveTo(0,0,0,5);
			enemyHolder['enemy'+currentEnemy].endFill();//end the fill
 
			//add a few variables to the enemy
			enemyHolder['enemy'+currentEnemy].enLevel = theCode;//setting its level to be what # it is
			enemyHolder['enemy'+currentEnemy].maxSpeed = 3;//how fast it can possibly go
			enemyHolder['enemy'+currentEnemy].xSpeed = 0;
			enemyHolder['enemy'+currentEnemy].ySpeed = 0;
			enemyHolder['enemy'+currentEnemy].health = 5*theCode;
 
			//checking what the start direction is
			if(_root.startDir == 'UP'){//if it's starting up
				enemyHolder['enemy'+currentEnemy]._y = 300;//set the y value off the field
				enemyHolder['enemy'+currentEnemy]._x = _root.startCoord;//make the x value where it should be
				enemyHolder['enemy'+currentEnemy].xSpeed = 0;//make it not move horizontally
				enemyHolder['enemy'+currentEnemy].ySpeed = -enemyHolder['enemy'+currentEnemy].maxSpeed;//make it move upwards
			} else if(_root.startDir == 'RIGHT'){//and so on for other directions
				enemyHolder['enemy'+currentEnemy]._x = -25;
				enemyHolder['enemy'+currentEnemy]._y = _root.startCoord;
				enemyHolder['enemy'+currentEnemy].xSpeed = enemyHolder['enemy'+currentEnemy].maxSpeed;
				enemyHolder['enemy'+currentEnemy].ySpeed = 0;
			} else if(_root.startDir == 'DOWN'){
				enemyHolder['enemy'+currentEnemy]._y = -25;
				enemyHolder['enemy'+currentEnemy]._x = _root.startCoord;
				enemyHolder['enemy'+currentEnemy].xSpeed = 0;
				enemyHolder['enemy'+currentEnemy].ySpeed = enemyHolder['enemy'+currentEnemy].maxSpeed;
			} else if(_root.startDir == 'LEFT'){
				enemyHolder['enemy'+currentEnemy]._x = 550;
				enemyHolder['enemy'+currentEnemy]._y = _root.startCoord;
				enemyHolder['enemy'+currentEnemy].xSpeed = -enemyHolder['enemy'+currentEnemy].maxSpeed;
				enemyHolder['enemy'+currentEnemy].ySpeed = 0;
			}
 
			enemyHolder['enemy'+currentEnemy]._x += 5;//fixing the x value
			enemyHolder['enemy'+currentEnemy]._y += 5;//fixing up the y value
 
			enemyHolder['enemy'+currentEnemy].onEnterFrame = function(){//give it some functions
				this._x += this.xSpeed;
				this._y += this.ySpeed;
 
				//checking what direction it goes when finishing the path
				if(_root.finDir == 'UP'){//if it finishes at the top
					if(this._y &lt;= -25){//if the y value is too high
						_root.lives --;//take away a life
						_root.money -= 5*this.enLevel;//don't let the player gain any money
						this.removeMovieClip();//take it away from the stage
					}
				} else if(_root.finDir == 'RIGHT'){//and so on for other directions
					if(this._x &gt;= 550){
						_root.lives --;
						_root.money -= 5*this.enLevel;
						this.removeMovieClip();
					}
				} else if(_root.finDir == 'DOWN'){
					if(this._y &gt;= 300){
						_root.lives --;
						_root.money -= 5*this.enLevel;
						this.removeMovieClip();
					}
				} else if(_root.startDir == 'LEFT'){
					if(this._x &lt;= 0){
						_root.lives --;
						_root.money -= 5*this.enLevel;
						this.removeMovieClip();
					}
				}
 
				if(this.health &lt;= 0){
					_root.enemiesLeft --;
					_root.money += 5*this.enLevel;
					this.removeMovieClip();
				}
			}
		}
		currentEnemy ++;//move on to the next enemy
		enemyTime = 0;//and reset the time
	}
}

There aren’t very many renovations that we’ve made, but they will make our code much more flexible. It allows us to create different enemy levels by setting the enLevel to be equal to the code that is placed into the enemy array. The enLevel in turn lets us dynamically change the amount of health the enemy has and the amount of money that it gives you when you kill it. Right now the health and money it gives you is 5 times the enemy level.

Now, we can make more levels with better enemies! You can customize your own levels, or use the ones I created by setting these values in the enemyArray:

enemyArray = [//defining the array
			[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],//1's will just represent an enemy to be created
			[2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],//another row means another level
			[3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3],
			[100],
			[5,6,7,6,5,6,7,6,5,6,7,6,5,6,7,6,5,6,7,6,5,6,7,6,5,6,7,6,5],
			[250,250,250]
			  ];

How to Create a Tower Defense Game in AS2 – Part 5

Mr Sun — Sat, 25 Jul 2009 12:05:40 +0000

Welcome back to the 5th installment of this tutorial series. In this lesson, we’ll make some playable levels, along with a winning and losing situation. Let’s dig in, shall we?

Lets start off by opening up the main source file. Find where this code is:

enemyArray = [//defining the array
			[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],//1's will just represent an enemy to be created
			[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],//another row means another level
			[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]
			  ];

In order to do this, we must first count the number of enemies we actually have on stage. This is actually very easy to do. Find the startGame() function (~line 45) that has no code in it, and add the following:

enemiesLeft = enemyArray[currentLvl-1].length;

Now, we have to decrease this number every time an enemy is destroyed. We can do this by adding one line of code to where we remove the Enemy from the stage in the makeEnemies() function. Add the following code (~line 346):

_root.enemiesLeft --;

Now, find the main _root.onEnterFrame() function (~line 287). There should only be one line of code in there right now. We’re going to add some. Add the following code to the bottom of it:

if(enemiesLeft==0){//if there are no more enemies left
	currentLvl ++;//continue to the next level
	currentEnemy = 0;//reset the amount of enemies there are
	startGame();//restart the game
}

Got that? Now, we just have to give each of these dynamic text fields an instance name. Label them accordingly:

txtLevel
txtMoney
txtLives
txtEnemiesLeft

Now, let’s dive into some code, shall we?

The first thing we need to do is actually define the money and the lives variables. Just add this code to the top:

var money:Number=100;//how much money the player has to spend on turrets
var lives:Number=20;//how many lives the player has

Okay, good stuff. Let’s first make these two variables mean something before we update the text. We first have to make it so the player loses lives so he/she can lose the game.

In order to do this, we must add the following code to the Enemy’s onEnterFrame() function (~line 353):

//checking what direction it goes when finishing the path
if(_root.finDir == 'UP'){//if it finishes at the top
	if(this._y &lt;= -25){//if the y value is too high
		_root.lives --;//take away a life
		_root.money -= 5;//don't let the player gain any money
		this.removeMovieClip();//take it away from the stage
	}
} else if(_root.finDir == 'RIGHT'){//and so on for other directions
	if(this._x &gt;= 550){
		_root.lives --;
		_root.money -= 5;
		this.removeMovieClip();
	}
} else if(_root.finDir == 'DOWN'){
	if(this._y &gt;= 300){
		_root.lives --;
		_root.money -= 5;
		this.removeMovieClip();
	}
} else if(_root.startDir == 'LEFT'){
	if(this._x &lt;= 0){
		_root.lives --;
		_root.money -= 5;
		this.removeMovieClip();
	}
}
if(this.health &lt;= 0){
	_root.enemiesLeft --;
	_root.money += 5;
	this.removeMovieClip();
}

Note that we also are giving the player money for killing the enemies. Next, we’ll make each of the turrets cost a certain amount of money. I’m thinking $20 is a good price. Find the block’s onRelease function (~line 80). We have to wrap all of its contents with if(_root.money >= 20){money-=20;......}. This way, the final onRelease function will look like this:

_root['block'+i].onRelease = function(){
	if(_root.money &gt;= 20){//if there's enough money
		_root.money -= 20;//spend it and make a turret
		//this function will run when the empty block is clicked on
 
		//change this guy's color back
		var newColor = new Color(this);
		newColor.setRGB(0x333333);
		//set all other mouse functions to null in order to keep it from being clicked again
		this.onRollOver = null;
		this.onRollOut = null;
		this.onRelease = null;
		//create an empty turret movieclip that will be on the top root layer
		_root.createEmptyMovieClip('t'+this._name,_root.getNextHighestDepth());
 
		//drawing the turret, it will have a gray, circular, base with a white gun
		_root['t'+this._name].beginFill(0x999999);//coloring the base light gray
		_root['t'+this._name].moveTo(0, 12.5);//move the entire shape a certain way
		//create 4 curves so that it'll look like a circle
		_root['t'+this._name].curveTo(0,25,12.5,25);
		_root['t'+this._name].curveTo(25,25,25,12.5);
		_root['t'+this._name].curveTo(25,0,12.5,0);
		_root['t'+this._name].curveTo(0,0,0,12.5);
		_root['t'+this._name].endFill();//end the fill so we can make a new one
 
		//creating the gun
		_root['t'+this._name].createEmptyMovieClip('gun',_root['t'+this._name].getNextHighestDepth());
		_root['t'+this._name].gun.beginFill(0xFFFFFF);
		_root['t'+this._name].gun.lineTo(-2,-2);
		_root['t'+this._name].gun.lineTo(2,-2);
		_root['t'+this._name].gun.lineTo(2,15);
		_root['t'+this._name].gun.lineTo(-2,15);
		_root['t'+this._name].gun.lineTo(-2,-2);
		_root['t'+this._name].gun.endFill();
		//setting the gun to be on the center of the turret
		_root['t'+this._name].gun._x = 12.5;
		_root['t'+this._name].gun._y = 12.5;
		//set the turrets coordinates to be the blocks coordinates
		_root['t'+this._name]._x = this._x;
		_root['t'+this._name]._y = this._y;
 
		_root['t'+this._name].angle = 0; //the angle that the turret is currently rotated at
		_root['t'+this._name].radiansToDegrees = 180/Math.PI;//this is needed for the rotation
		_root['t'+this._name].damage = 3;//how much damage this little baby can inflict
		_root['t'+this._name].range = 100;//how far away (in pixels) it can hit a target
		_root['t'+this._name].enTarget = null;//the current target that it's rotating towards
		_root['t'+this._name].cTime = 0;//how much time since a shot was fired by this turret
		_root['t'+this._name].reloadTime = 12;//how long it takes to fire another shot
		_root['t'+this._name].loaded = true;//whether or not this turret can shoot
 
		_root['t'+this._name].onEnterFrame = function(){
			//FINDING THE NEAREST ENEMY WITHIN RANGE
			this.distance = this.range;//let's define a variable which will be how far the nearest enemy is
			this.enTarget = null;//right now, we don't have a target to shoot at
			for(var i=_root.currentEnemy-1;i&gt;=0;i--){//loop through the children in enemyHolder
				var cEnemy = _root.enemyHolder['enemy'+i];//define a movieclip that will hold the current child
				//this simple formula with get us the distance of the current enemy
				if(Math.sqrt(Math.pow(cEnemy._y - this._y, 2) + Math.pow(cEnemy._x - this._x, 2)) &lt; this.distance){
					//if the selected enemy is close enough, then set it as the target
					this.enTarget = cEnemy;
				}
			}
			//ROTATING TOWARDS TARGET
			if(this.enTarget != null){//if we have a defined target
				//turn this baby towards it
				this.gun._rotation = Math.atan2((this.enTarget._y-this._y), this.enTarget._x-this._x)/Math.PI*180-90;
				if(this.loaded){//if the turret is able to shoot
					this.loaded = false;//then make in unable to do it for a bit
					//create a bullet
					_root.createEmptyMovieClip('b'+this._name,_root.getNextHighestDepth());
					//draw the bullet
					_root['b'+this._name].beginFill(0xFFFFFF);
					_root['b'+this._name].lineTo(0,0);
					_root['b'+this._name].lineTo(0,3);
					_root['b'+this._name].lineTo(3,3);
					_root['b'+this._name].lineTo(3,0);
					_root['b'+this._name].endFill();
					//set the bullet's coordinates
					_root['b'+this._name]._x = this._x+12.5;
					_root['b'+this._name]._y = this._y+12.5;
					//set the bullet's target and damage
					_root['b'+this._name].target = this.enTarget;
					_root['b'+this._name].damage = this.damage;
 
					//add some functions to this bullet
					_root['b'+this._name].onEnterFrame = function(){
						this.maxSpeed=8;
						this.yDist=this.target._y+12.5 - this._y;//how far this guy is from the enemy (x)
						this.xDist=this.target._x+12.5 - this._x;//how far it is from the enemy (y)
						this.angle=Math.atan2(this.yDist,this.xDist);//the angle that it must move
						this.ySpeed=Math.sin(this.angle) * this.maxSpeed;//calculate how much it should move the enemy vertically
						this.xSpeed=Math.cos(this.angle) * this.maxSpeed;//calculate how much it should move the enemy horizontally
						//move the bullet towards the enemy
						this._x+= this.xSpeed;
						this._y+= this.ySpeed;
						//check if it is close to the enemy
						if(this._x+this.maxSpeed*2&gt;=this.target._x &amp;&amp; this._x-this.maxSpeed*2&lt;=this.target._x
						&amp;&amp; this._y+this.maxSpeed*2&gt;=this.target._y &amp;&amp; this._y-this.maxSpeed*2&lt;=this.target._y){
							this.target.health -= this.damage;//make the enemy lose health
							this.removeMovieClip();//remove this sucker
						}
					}
				}
			}
			//LOADING THE TURRET
			if(!this.loaded){//if it isn't loaded
				this.cTime ++;//then continue the time
				if(this.cTime == this.reloadTime){//if time has elapsed for long enough
					this.loaded = true;//load the turret
					this.cTime = 0;//and reset the time
				}
			}
		}
}

Now, we can update these text fields. Once again, find the _root.onEnterFrame() function (~line 300). Add the following code which will update all the text fields with the needed information:

//Updating the text fields
txtLevel.text = 'Level '+currentLvl;
txtMoney.text = '$'+money;
txtLives.text = 'Lives: '+lives;
txtEnemiesLeft.text = 'Enemies Left:  '+enemiesLeft;

Now, we have to make it possible for the player to restart the game. We’ll let them do it by clicking anywhere on the screen. Copy and paste this code to both the “win” frame and the “lose” frame:

timeElapsed = 0;//how many frames have elapsed since this screen has been shown
 
_root.onEnterFrame = function(){
	timeElapsed ++;//increase the amount of frames that have elapsed
	if(timeElapsed == 120){//if 5 seconds (@24fps) have elapsed
		gotoAndStop(1);//go back to restart the game
	}
}

All right, the next thing we have to do is navigate to the desired frame when the player wins or loses. Go back to frame 1 and find the _root.onEnterFrame() function (~line 293). Add the following code to the very beginning of it:

//if there aren't any levels left
	if(currentLvl &gt; enemyArray.length){
		gameOver=true;//set the game to be over
 
		//reset all the stats
		currentLvl = 1;
		currentEnemy = 0;
		enemyTime = 0;
		enemyLimit = 12;
		enemiesLeft = 0;
 
		roadHolder.removeMovieClip();//remove the pieces of road
		enemyHolder.removeMovieClip();//remove the enemies
		//remove all of the blocks
		for(i=0;i&lt;=0){//if the user runs out of lives
		gameOver=true;//set the game to be over
 
		//reset all the stats
		currentLvl = 1;
		currentEnemy = 0;
		enemyTime = 0;
		enemyLimit = 12;
		enemiesLeft = 0;
 
		roadHolder.removeMovieClip();//remove the pieces of road
		enemyHolder.removeMovieClip();//remove the enemies
		//remove all of the blocks
		for(i=0;i

Sweet. This concludes this installment of the tutorial series. Join us next time when we expand on the game!