Make a Flash game like Flash Element Tower Defense – Part 1

Read all posts about "" game

November 11th update: part 2 released

One of the most popular Flash games around the web during last months was a game (with some variants) called Flash Element TD, “a Macromedia Flash based Warcraft TD game inspired by Element TD for WarcraftIII”, as says its author, David Scott.

Flash Element Tower Defense

The game concept is simple: there is a road, and some minions walking that road. You have to kill all minions before they reach the end of the road. You can build several facilities to kill minions and earn money to upgrade weapons as the minions get stronger and faster.

In this first part of the tutorial, I’ll cover the minion walking.

It’s a very complex task, that will require almost 30 lines!

Let’s start showing the objects required to make it work

Tower Defense

minion: it’s the evil enemy to kill. I think a blue triangle should look evil enough.

path: it’s the background where the game will take place

Now, a few words about how to develop the concept: in this game there is not enemy artificial intelligence. Enemies walk along a path until they die. This simplifies a lot our work, because the only thing we need to do is to create a list of waypoints defining the path. When an enemy reaches a waypoint, I’ll make it reach another waypoint.

Let’s see the actionscript, all in the first (and only) frame of the main (and only) scene.

attachMovie("path","path",_root.getNextHighestDepth());
waypoint_x = new Array(40, 140, 140, 220, 220, 80, 80, 340, 340, 420, 420);
waypoint_y = new Array(140, 140, 60, 60, 240, 240, 320, 320, 100, 100, -20);
delay = 25;
new_monster = 0;
monsters_placed = 0;
onEnterFrame = function () {
	if (monsters_placed<25) {
		new_monster++;
	}
	if (new_monster == delay) {
		monsters_placed++;
		new_monster = 0;
		min = attachMovie("minion", "minion"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:40, _y:-20});
		min.point_to_reach = 0;
		min.speed = 1;
		min.onEnterFrame = function() {
			dist_x = waypoint_x[this.point_to_reach]-this._x;
			dist_y = waypoint_y[this.point_to_reach]-this._y;
			if ((Math.abs(dist_x)+Math.abs(dist_y))<1) {
				this.point_to_reach++;
			}
			angle = Math.atan2(dist_y, dist_x);
			this._x = this._x+this.speed*Math.cos(angle);
			this._y = this._y+this.speed*Math.sin(angle);
			this._rotation = angle/Math.PI*180-90
		};
	}
};

Line 1: Attaching the path object on the scene

Line 2: Defining an array containing all horizontal coordinates of the waypoints

Line 3: Same thing for the vertical coordinates. Now waypoints are defined, so the minions will walk until (40,140), then until (140,140), then (140,60) and so on.

Line 4: Setting the delay, in frames, between the creation of the xth enemy and the creation of the (x+1)th enemy.

Line 5: A flag variable counting how many frames passed from the creation of the last enemy

Line 6: Variable telling me how many enemies I have placed so far

Line 7: Beginning of the main function, to be executed at every frame

Line 8: Checking if I haven't already placed all 25 monsters I want to place

Line 9: If not, increase the variable counting how many frames passed from the creation of the last monster

Line 11: If the number of frames passed from the creation of the last monster is equal to the number of frames I want to pass after the last monster creation...

Line 12: Increasing the variable counting how many monster I placed. I am about to place a new monster!

Line 13: Setting the variable counting how many frames passed from the creation of the last enemy to zero

Line 14: Attaching the monster movieclip outside the screen, because I want it to enter "from above", and assigning this object to a variable called min (from "minion")

Line 15: Assigning to the minion (I started with "enemy", then "monster", now "minion"... someone should strike for blue triangles rights!) a variable with the number of the next waypoint to reach: zero, because the first element in an array is indexed with zero.

Line 16: Assigning to the minion a variable with its speed. This will become handy in future, when minions will change waling speed during the game

Line 17: Function to be executed at every frame for the minion

Line 18: Calculating the x distance from the current minion position and the next waypoint

Line 19: Same thing for the y distance

Line 20: Checking if the sum of both distances is less than 1 (approx: did the minion reach the waypoint?)

Line 21: If true, then increase the waypoint flag to make the minion move to the next waypoint

Line 23: Determining the angle of the minion according to its direction using trigonometry. If you have troubles with trigonometry, I recommend you to read this tutorial

Line 24: Updating minion's x position according to its direction and speed

Line 25: Same thing for its y position

Line 26: Rotating the minion facing the direction it's walking.

And that's it. The first part is over. You may need to reload the page to see the movie working.

Download the source code and give me feedback

Then move to part 2.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers