Flash Game Tuts - Free Flash Game Tutorials in AS2 and AS3

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

Part 1: Setting Up Level

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 can dive into some code. Let’s first create some code that will lay down the track for the enemies to go through. Create a new layer called “actions” and add the following code to it:

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:Number;//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:Number = 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
}

_root.createEmptyMovieClip('roadHolder',_root.getNextHighestDepth());//add a MovieClip to hold the road
function makeRoad():Void{
	var row:Number = 0;//the current row we're working on
	var block;//this will act as the block that we're placing down
	for(i=0;i

That’s a lot of code, ain’t it? Hopefully, I’ve given you enough instructions in the comments. If you test out our game, a nice little path should be shown which the enemies will travel through, along with some blank gray boxes where we’ll be able to place some turrets.

Before I end this part of the tutorial, I want to give these empty boxes some rollOver and rollOut effects. Find where I added the comment saying /////*****EMPTY BLOCK*****///// (lines 44-54). Add this code to the bottom of that section of the if statement:

_root['block'+i].onRollOver = function(){
	//Change the color to green
	var newColor = new Color(this);
	newColor.setRGB(0x006600);
}
_root['block'+i].onRollOut = function(){
	//Change this color back to gray
	var newColor = new Color(this);
	newColor.setRGB(0x333333);
}