{"id":1519,"date":"2009-04-25T08:05:40","date_gmt":"2009-04-25T12:05:40","guid":{"rendered":"http:\/\/www.mrsunstudios.com\/?p=1519"},"modified":"2022-05-29T08:23:29","modified_gmt":"2022-05-29T12:23:29","slug":"tutorial-create-a-tower-defense-game-in-as2-part-5","status":"publish","type":"post","link":"http:\/\/www.mrsunstudios.com\/blog\/flash\/tutorial-create-a-tower-defense-game-in-as2-part-5\/","title":{"rendered":"Tutorial: Create a Tower Defense Game in AS2 – Part 5"},"content":{"rendered":"
\n

Table of Contents<\/h3>\n
    \n
  1. Setting up Level<\/a><\/li>\n
  2. Adding Turrets<\/a><\/li>\n
  3. Adding Enemies<\/a><\/li>\n
  4. Making Turrets Attack Enemies<\/a><\/li>\n
  5. Winning\/Losing the Game<\/a><\/li>\n
  6. Expanding on the Game<\/a><\/li>\n
  7. Finishing Touches<\/a><\/li>\n<\/ol>\n<\/div>\n

    Step 5: Winning\/Losing the Game<\/h3>\n

    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?<\/p>\n

    Lets start off by opening up the main source file. Find where this code is:<\/p>\n

    \r\nenemyArray = [\/\/defining the array\r\n\t\t\t[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\r\n\t\t\t[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],\/\/another row means another level\r\n\t\t\t[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]\r\n\t\t\t  ];\r\n<\/pre>\n
    Let’s review this code for a bit. Each of those arrays within that enemyArray<\/tt> 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.<\/p>\n
    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()<\/tt> function (~line 45) that has no code in it, and add the following:<\/p>\n
    \r\nenemiesLeft = enemyArray[currentLvl-1].length;\r\n<\/pre>\n
    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()<\/tt> function. Add the following code (~line 346):<\/p>\n
    \r\n_root.enemiesLeft --;\r\n<\/pre>\n
    Now, find the main _root.onEnterFrame()<\/tt> 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:<\/p>\n
    \r\nif(enemiesLeft==0){\/\/if there are no more enemies left\r\n\tcurrentLvl ++;\/\/continue to the next level\r\n\tcurrentEnemy = 0;\/\/reset the amount of enemies there are\r\n\tstartGame();\/\/restart the game\r\n}\r\n<\/pre>\n
    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.<\/p>\n
    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.<\/p>\n
    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:<\/p>\n
    \"The<\/center><\/p>\n
    Got that? Now, we just have to give each of these dynamic text fields an instance name. Label them accordingly:<\/p>\n
      \n
    • txtLevel<\/tt><\/li>\n
    • txtMoney<\/tt><\/li>\n
    • txtLives<\/tt><\/li>\n
    • txtEnemiesLeft<\/tt><\/li>\n<\/ul>\n
      Now, let’s dive into some code, shall we?<\/p>\n
      The first thing we need to do is actually define the money<\/tt> and the lives<\/tt> variables. Just add this code to the top:<\/p>\n
      \r\nvar money:Number=100;\/\/how much money the player has to spend on turrets\r\nvar lives:Number=20;\/\/how many lives the player has\r\n<\/pre>\n
      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. <\/p>\n
      In order to do this, we must add the following code to the Enemy’s onEnterFrame()<\/tt> function (~line 353):<\/p>\n
      \r\n\/\/checking what direction it goes when finishing the path\r\nif(_root.finDir == 'UP'){\/\/if it finishes at the top\r\n\tif(this._y <= -25){\/\/if the y value is too high\r\n\t\t_root.lives --;\/\/take away a life\r\n\t\t_root.money -= 5;\/\/don't let the player gain any money\r\n\t\tthis.removeMovieClip();\/\/take it away from the stage\r\n\t}\r\n} else if(_root.finDir == 'RIGHT'){\/\/and so on for other directions\r\n\tif(this._x >= 550){\r\n\t\t_root.lives --;\r\n\t\t_root.money -= 5;\r\n\t\tthis.removeMovieClip();\r\n\t}\r\n} else if(_root.finDir == 'DOWN'){\r\n\tif(this._y >= 300){\r\n\t\t_root.lives --;\r\n\t\t_root.money -= 5;\r\n\t\tthis.removeMovieClip();\r\n\t}\r\n} else if(_root.startDir == 'LEFT'){\r\n\tif(this._x <= 0){\r\n\t\t_root.lives --;\r\n\t\t_root.money -= 5;\r\n\t\tthis.removeMovieClip();\r\n\t}\r\n}\t\r\nif(this.health <= 0){\r\n\t_root.enemiesLeft --;\r\n\t_root.money += 5;\r\n\tthis.removeMovieClip();\r\n}\r\n<\/pre>\n
      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<\/tt> function (~line 80). We have to wrap all of its contents with if(_root.money >= 20){money-=20;......}<\/tt>. This way, the final onRelease<\/tt> function will look like this:<\/p>\n
      \r\n_root['block'+i].onRelease = function(){\r\n\tif(_root.money >= 20){\/\/if there's enough money\r\n\t\t_root.money -= 20;\/\/spend it and make a turret\r\n\t\t\/\/this function will run when the empty block is clicked on\r\n\t\t\r\n\t\t\/\/change this guy's color back\r\n\t\tvar newColor = new Color(this);\r\n\t\tnewColor.setRGB(0x333333);\r\n\t\t\/\/set all other mouse functions to null in order to keep it from being clicked again\r\n\t\tthis.onRollOver = null;\r\n\t\tthis.onRollOut = null;\r\n\t\tthis.onRelease = null;\r\n\t\t\/\/create an empty turret movieclip that will be on the top root layer\r\n\t\t_root.createEmptyMovieClip('t'+this._name,_root.getNextHighestDepth());\r\n\t\t\r\n\t\t\/\/drawing the turret, it will have a gray, circular, base with a white gun\r\n\t\t_root['t'+this._name].beginFill(0x999999);\/\/coloring the base light gray\r\n\t\t_root['t'+this._name].moveTo(0, 12.5);\/\/move the entire shape a certain way\r\n\t\t\/\/create 4 curves so that it'll look like a circle\r\n\t\t_root['t'+this._name].curveTo(0,25,12.5,25);\r\n\t\t_root['t'+this._name].curveTo(25,25,25,12.5);\r\n\t\t_root['t'+this._name].curveTo(25,0,12.5,0);\r\n\t\t_root['t'+this._name].curveTo(0,0,0,12.5);\r\n\t\t_root['t'+this._name].endFill();\/\/end the fill so we can make a new one\r\n\t\t\r\n\t\t\/\/creating the gun\r\n\t\t_root['t'+this._name].createEmptyMovieClip('gun',_root['t'+this._name].getNextHighestDepth());\r\n\t\t_root['t'+this._name].gun.beginFill(0xFFFFFF);\r\n\t\t_root['t'+this._name].gun.lineTo(-2,-2);\r\n\t\t_root['t'+this._name].gun.lineTo(2,-2);\r\n\t\t_root['t'+this._name].gun.lineTo(2,15);\r\n\t\t_root['t'+this._name].gun.lineTo(-2,15);\r\n\t\t_root['t'+this._name].gun.lineTo(-2,-2);\r\n\t\t_root['t'+this._name].gun.endFill();\r\n\t\t\/\/setting the gun to be on the center of the turret\r\n\t\t_root['t'+this._name].gun._x = 12.5;\r\n\t\t_root['t'+this._name].gun._y = 12.5;\r\n\t\t\/\/set the turrets coordinates to be the blocks coordinates\r\n\t\t_root['t'+this._name]._x = this._x;\r\n\t\t_root['t'+this._name]._y = this._y;\r\n\t\t\r\n\t\t_root['t'+this._name].angle = 0; \/\/the angle that the turret is currently rotated at\r\n\t\t_root['t'+this._name].radiansToDegrees = 180\/Math.PI;\/\/this is needed for the rotation\r\n\t\t_root['t'+this._name].damage = 3;\/\/how much damage this little baby can inflict\r\n\t\t_root['t'+this._name].range = 100;\/\/how far away (in pixels) it can hit a target\r\n\t\t_root['t'+this._name].enTarget = null;\/\/the current target that it's rotating towards\r\n\t\t_root['t'+this._name].cTime = 0;\/\/how much time since a shot was fired by this turret\r\n\t\t_root['t'+this._name].reloadTime = 12;\/\/how long it takes to fire another shot\r\n\t\t_root['t'+this._name].loaded = true;\/\/whether or not this turret can shoot\r\n\t\t\t\t\t\r\n\t\t_root['t'+this._name].onEnterFrame = function(){\r\n\t\t\t\/\/FINDING THE NEAREST ENEMY WITHIN RANGE\r\n\t\t\tthis.distance = this.range;\/\/let's define a variable which will be how far the nearest enemy is\r\n\t\t\tthis.enTarget = null;\/\/right now, we don't have a target to shoot at\r\n\t\t\tfor(var i=_root.currentEnemy-1;i>=0;i--){\/\/loop through the children in enemyHolder\r\n\t\t\t\tvar cEnemy = _root.enemyHolder['enemy'+i];\/\/define a movieclip that will hold the current child\r\n\t\t\t\t\/\/this simple formula with get us the distance of the current enemy\r\n\t\t\t\tif(Math.sqrt(Math.pow(cEnemy._y - this._y, 2) + Math.pow(cEnemy._x - this._x, 2)) < this.distance){\r\n\t\t\t\t\t\/\/if the selected enemy is close enough, then set it as the target\r\n\t\t\t\t\tthis.enTarget = cEnemy;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\t\/\/ROTATING TOWARDS TARGET\r\n\t\t\tif(this.enTarget != null){\/\/if we have a defined target\r\n\t\t\t\t\/\/turn this baby towards it\r\n\t\t\t\tthis.gun._rotation = Math.atan2((this.enTarget._y-this._y), this.enTarget._x-this._x)\/Math.PI*180-90;\r\n\t\t\t\tif(this.loaded){\/\/if the turret is able to shoot\r\n\t\t\t\t\tthis.loaded = false;\/\/then make in unable to do it for a bit\r\n\t\t\t\t\t\/\/create a bullet\r\n\t\t\t\t\t_root.createEmptyMovieClip('b'+this._name,_root.getNextHighestDepth());\r\n\t\t\t\t\t\/\/draw the bullet\r\n\t\t\t\t\t_root['b'+this._name].beginFill(0xFFFFFF);\r\n\t\t\t\t\t_root['b'+this._name].lineTo(0,0);\r\n\t\t\t\t\t_root['b'+this._name].lineTo(0,3);\r\n\t\t\t\t\t_root['b'+this._name].lineTo(3,3);\r\n\t\t\t\t\t_root['b'+this._name].lineTo(3,0);\r\n\t\t\t\t\t_root['b'+this._name].endFill();\r\n\t\t\t\t\t\/\/set the bullet's coordinates\r\n\t\t\t\t\t_root['b'+this._name]._x = this._x+12.5;\r\n\t\t\t\t\t_root['b'+this._name]._y = this._y+12.5;\r\n\t\t\t\t\t\/\/set the bullet's target and damage\r\n\t\t\t\t\t_root['b'+this._name].target = this.enTarget;\r\n\t\t\t\t\t_root['b'+this._name].damage = this.damage;\r\n\t\t\t\t\t\r\n\t\t\t\t\t\/\/add some functions to this bullet\r\n\t\t\t\t\t_root['b'+this._name].onEnterFrame = function(){\r\n\t\t\t\t\t\tthis.maxSpeed=8;\r\n\t\t\t\t\t\tthis.yDist=this.target._y+12.5 - this._y;\/\/how far this guy is from the enemy (x)\r\n\t\t\t\t\t\tthis.xDist=this.target._x+12.5 - this._x;\/\/how far it is from the enemy (y)\r\n\t\t\t\t\t\tthis.angle=Math.atan2(this.yDist,this.xDist);\/\/the angle that it must move\r\n\t\t\t\t\t\tthis.ySpeed=Math.sin(this.angle) * this.maxSpeed;\/\/calculate how much it should move the enemy vertically\r\n\t\t\t\t\t\tthis.xSpeed=Math.cos(this.angle) * this.maxSpeed;\/\/calculate how much it should move the enemy horizontally\r\n\t\t\t\t\t\t\/\/move the bullet towards the enemy\r\n\t\t\t\t\t\tthis._x+= this.xSpeed;\r\n\t\t\t\t\t\tthis._y+= this.ySpeed;\r\n\t\t\t\t\t\t\/\/check if it is close to the enemy\r\n\t\t\t\t\t\tif(this._x+this.maxSpeed*2>=this.target._x && this._x-this.maxSpeed*2<=this.target._x\r\n\t\t\t\t\t\t&& this._y+this.maxSpeed*2>=this.target._y && this._y-this.maxSpeed*2<=this.target._y){\r\n\t\t\t\t\t\t\tthis.target.health -= this.damage;\/\/make the enemy lose health\r\n\t\t\t\t\t\t\tthis.removeMovieClip();\/\/remove this sucker\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\t\/\/LOADING THE TURRET\r\n\t\t\tif(!this.loaded){\/\/if it isn't loaded\r\n\t\t\t\tthis.cTime ++;\/\/then continue the time\r\n\t\t\t\tif(this.cTime == this.reloadTime){\/\/if time has elapsed for long enough\r\n\t\t\t\t\tthis.loaded = true;\/\/load the turret\r\n\t\t\t\t\tthis.cTime = 0;\/\/and reset the time\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n}\r\n<\/pre>\n
      Now, we can update these text fields. Once again, find the _root.onEnterFrame()<\/tt> function (~line 300). Add the following code which will update all the text fields with the needed information:<\/p>\n
      \r\n\/\/Updating the text fields\r\ntxtLevel.text = 'Level '+currentLvl;\r\ntxtMoney.text = '$'+money;\r\ntxtLives.text = 'Lives: '+lives;\r\ntxtEnemiesLeft.text = 'Enemies Left:  '+enemiesLeft;\r\n<\/pre>\n
      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?<\/p>\n
      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.<\/p>\n
      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:<\/p>\n
      \r\ntimeElapsed = 0;\/\/how many frames have elapsed since this screen has been shown\r\n\r\n_root.onEnterFrame = function(){\r\n\ttimeElapsed ++;\/\/increase the amount of frames that have elapsed\r\n\tif(timeElapsed == 120){\/\/if 5 seconds (@24fps) have elapsed\r\n\t\tgotoAndStop(1);\/\/go back to restart the game\r\n\t}\r\n}\r\n<\/pre>\n
      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()<\/tt> function (~line 293). Add the following code to the very beginning<\/strong> of it:<\/p>\n
      \r\n\/\/if there aren't any levels left\r\n\tif(currentLvl > enemyArray.length){\r\n\t\tgameOver=true;\/\/set the game to be over\r\n\t\t\r\n\t\t\/\/reset all the stats\r\n\t\tcurrentLvl = 1;\r\n\t\tcurrentEnemy = 0;\r\n\t\tenemyTime = 0;\r\n\t\tenemyLimit = 12;\r\n\t\tenemiesLeft = 0;\r\n\t\t\r\n\t\troadHolder.removeMovieClip();\/\/remove the pieces of road\r\n\t\tenemyHolder.removeMovieClip();\/\/remove the enemies\r\n\t\t\/\/remove all of the blocks\r\n\t\tfor(i=0;i\n
      Sweet. This concludes this installment of the tutorial series. Join us next time when we expand on the game!<\/p>\n
      Final Product<\/h4>\n
      <\/embed><\/object><\/p>\n
      Source Files (Zipped)<\/a><\/center><\/p>\n","protected":false},"excerpt":{"rendered":"
      Table of Contents Setting up Level Adding Turrets Adding Enemies Making Turrets Attack Enemies Winning\/Losing the Game Expanding on the Game Finishing Touches Step 5: Winning\/Losing the Game 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[160,5,7,4,6],"tags":[25,7,246,19,18,245,247,11],"_links":{"self":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1519"}],"collection":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=1519"}],"version-history":[{"count":8,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1519\/revisions"}],"predecessor-version":[{"id":1540,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1519\/revisions\/1540"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=1519"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=1519"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=1519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}