Create HTML5 Vertical Endless Runner cross platform games

Using Phaser framework and other FREE software
Endless runner games are gaining more and more popularity and they are really easy to code.
I will take you by hand through the creation of a complete HTML5 vertical endless runner cross platform game with a lot of features and room for customization.
100 pages + 31 source code examples with a free update to come in a few days.

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

Emanuele Feronato Flash

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.

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.

Stay up to date
Follow me on the social networks and never miss a post.

Official Emanuele Feronato Facebook page

Official Emanuele Feronato Twitter account

From null to full HTML5 cross platform game

I will take you by hand from the bare bones of JavaScript programming through the creation of a full cross platform HTML5 game, with detailed explainations and source code.

If you don't know where to start, then From null to full HTML5 cross platform game is the book for you.

Comments 160

  1. Pingback: Games » Make a Flash game like Flash Element Tower Defense - Part 1

  2. Pingback: - Gadgets on the web » Make a Flash game like Flash Element Tower Defense - Part 1

  3. Pingback: » Make a Flash game like Flash Element Tower Defense - Part 1

  4. Sushant

    I’ve been visiting your blog for quite some time now….I’ve Learnt so much from you. Its been some time since i wanted to make a flash version of my fav game(DotA). N i’ve been trying to find a good path findin AI ideas for it,as flash is not very good at handling complex algorithms.And As usual u again have given me a new idea to play around with. Keep up the good work.

  5. Samuel

    Hi Emanuele.

    I’m one of those who check your site several times per week, searching for new fantastic tutorials.

    I have one suggestion that would make this game-tutorial REALLY great: Make it OOP. This game is a incredibly suitable game for Object oriented programming, and I think you could add a entirely other dimension to the tutorial if you followed this tip.


  6. jarrod

    thanks for the info mate,
    having problems opening the source codes when i try opening it in flash mx 2004 i get unexpected file format error message. am i using the right program?

  7. jabs

    Can’t wait for part 2. I’ve been wanting to create a game like this for awhile and have just started working on it. GLad i stumbled across your blog.

  8. brandon

    Im really looking forward to part 2, is it comming out soon? noowhere else offers a tutorial on how to make a tower defense game and i really want to make one..

  9. Pingback: Make a Flash game like Flash Element Tower Defense - Part 2 : Emanuele Feronato - italian geek and PROgrammer

  10. zack

    This is a great tutorial, but I’m having a problem. If my path is not the same as the given one, how do i find out the coordinates of a selected area?

  11. Post
    Emanuele Feronato

    You can find it through mouse coordinates.

    In your main function write

    trace(_root._xmouse+” “+_root._ymouse)

    then move the mouse and copy coords

  12. -

    Hey zack, i did simpler to get coords i think, i just use the window->info panel (or CTRL+I) and while having the focus on the actions window, i move the mouse around the waypoints.

    One little bug is commented by Joshua threlfall, if u make the speed greater than 1 u will get in troubles, this is because….well i dont knowhow to explain i expect that only telling the patch u can understand why doesnt works in that manner
    Just put this in line 20:
    Its a simple matter of gap jumping, u know.

    Oh zack, u must put this code in the first frame of a new layer(created by ur own) called actions by example, selecting the first frame and then open the actions window, paste inside it, be sure of the lower title name is actions:1

    Sorry for my terrible english.
    Congrats by the tut. :D

  13. -

    sorry, the line was incorrect, it was cutted in an amazing manner i dont know, the correct is(line 20):


  14. -

    urmphh?? sorry again but the post doesnt works well and cut the essential part so i look like a mad….
    The patch is simply reemplace the “if(…

  15. -

    hahaha this seems a joke, all time cutting my posts i dont know why. The patch. reemplace in line 20 “if(…&lt1)” by “if(…&ltthis.speed)
    Reasons r more or less explained 3 posts before
    Sorry for spaming, the problem was the “&lt” what is an html reserved char and u must write “ampersand + lt”, and first i was disoriented

    I apologize for the inconveniences, sorry for my stupidity xDD

  16. Paul

    Whenever I put the code in the main frame for the if satement to dry to generate a new enemy….My editor just crashes, so I can never get it to run. Any suggestions?

  17. TheInfinity

    I really need help. I just started using this program and found tower defence games very fun. I don’t get how to get to the action script and i don’t get the commands. Do you have to have the items selected before you do those actions? i’mma noob at this ugh… x(

  18. Pingback: Hoi! Koffie? » Tower “Addiction” Defense

  19. Pingback: » Blog Archive » Best of the Internet - November 2007

  20. Stephanie

    I’m having some issues with the tutorial. For some reason the minion shows up on the screen and looks like its about to follow the path but as soon as the minion hits the background, it just restarts. Please help me

  21. Stephanie

    actually when i put the new_monster = 0; in comment

    if (new_monster == delay) {
    //new_monster = 0;

    it works but theres only one minion that shows up. Any ideas???

  22. Meepo

    Augh, im uber-new to flash. I tried to follow this tutorial but when i test movie, all these errors come up. I think its because of the actionscript. What am i supposed to do with it?

  23. ben

    i need help, i cant seem to get the actionscript going. ive done everything it says, but nothin happens when i test it. Can anyone help me?

  24. Pingback: A Gem of Flash Game Tutorials | Newbie Game Programmers

  25. pissed off guy

    look this tut sucks it’s too hard to get. I’ve made every single thing but it doens’t work. Stop making these tuts you’re a horrible explainer

  26. RJ

    You need Flash CS3 to open the .fla’s given by Emanuele, but anyway, you can copy and paste the actionscript. Don’t forget to create the minion and path movieclips and to link them

  27. TheInfinity

    ok i got it to work. my “minions” are moving. but when i try to make them faster, they kinda stop at certain points. and stall there for…ever…. -.-

  28. TheInfinity

    I solved what recently just posted from an earlier post but i have another question. When i test movie in the flash, it’s alright. It works they’re all moving. But when i try the .swf the minions disappear after a certain point on the path (depending on speed) Any ideas?

  29. With Stephany

    I’m having the same problem as stephany. I just copied the code after making my map and linking the stuff and everything, but whenever a new guy respawns, he moves a bit then just restarts. Any help?

  30. anoyed

    Yeah, im getting a similar problem… every time I change the speed to 2 or something, they all get stuck when they turn a corner. Any ideas?

  31. nicp

    Somethings wrong…im using Flash MX and everything seems to work fine but my coords are all messed up…i put in my own…but they jump around the screen in the begining and they exaggerate the other waypoints…any help?

  32. Pingback: Desenvolvimento de games « O Coice da Girafa

  33. Mike


    I am contacting you on behalf of . I’ve read one of your tutorials and I like the way you write. Our site is continuously growing and we recently added a tutorial section. We kindly ask for your approval to allow us to publish your tutorials on our site, mentioning you as the author.
    Of course, we are inviting you to do it yourself, but either way, it would be our pleasure to publish them.

    Kind regards,
    Mike | Flash Components Team

  34. z3n

    this tutorial will do little for a beginner. I took a look at it and tried out some of the code, and I have since had to rewrite and replace almost all of it. It is good for hints how to solve some problems, but the code itself is not well suited for a full featured game.

    Example: the use of clipExample.onEnterFrame = function is a bad tree to bark up. The variables that are loaded local to those clips do not update, such as array lengths. So, when that clip loops through arrays (each frame) it is using the length property it got when the clip was loaded.

  35. D

    It’s flash (CS3 being the latest version, this is actionscript 2 though).. You can download a trial at I would’nt reccommend starting with this tutorial though, it’s not for absolute beginners.

    Right-click your symbol and choose linkage. Then check “export for actionscript”.

    The “jumping” minion problem is caused by where you’ve set the registry point. It has to be exactly in the middle of you little dude.

  36. Pingback: digitalt skapande » Tower Defence

  37. stojan

    OMG its only me or i dont anderstent on what should i sett the codes on the path or minions and when i copy the codes to the minion that i fink is the right i got 7 errors HELP pleas

  38. Zackorith

    Well personally i though this tutorial was easy, and i understood it all

    i has a loader, money, kills

    but i cant seam to make it so when minion gets to the end you lose a life, and then plays next level…
    so how do i makes lives go down o.0??

    i understood everything else (Y)

  39. flashmxguy

    i gotta say your tutorial for this sucks.what do i do after i draw the minion cause i really dont know you say stuff but u dont say do that and that .i dont know how to see the minion i just press timeline sfter i draw him and i dont see it on the right so where is it?arrg

  40. Van Halen

    where is the main function thing so i can get to see the coordinates? could you just post a copyable picture of the path so i can copy and paste it?

  41. Linder

    Sorry for being so dumb, but what program is used? I really love TD’s and i got alot of spare time over. So i think I could try to make one, maybe it will be good :).
    I would like to have an answer as soon as possible.


  42. Matthew Baumann

    Hi. I’m using Macromedia Flash MX Professional 2004. I was wondering if anyone could help me get started with this. I can’t get this to work. Any help would be very much appreciated. You can reach me at

  43. Pingback: Adobe Flash CS3- AS3 and AS2 game tutorials roundup |

  44. Frogger

    Brandon, this is a little late, but if you don’t know what Flash is, then it will really be hard to make games, let alone use it. So anyway, the program he used is Macromedia Flash.

  45. Pingback: Adobe Flash Tutorials Part 2

  46. a person who needs help

    hey emanuele this tut is awesome but… the thing is that when I load the source it says unexpected file format… so I need help

  47. Pingback: gotoAndBlog(); » Blog Archive » Tutorials for 5 different Flash game genres

  48. GregRodregez

    Im using flash pro 9 but using action script 2.0. When i put in the code (copy paste) i need to delete the numbers. Afterwards i check it and it says i need on clip event handler. so i put that in. then i run the game and the minion just stands there like its retarded. can you help me?

  49. Pingback: Ultimate List Of 40 Quality Flash Tutorials For Your Animated Desire | The Theme Blog

  50. devildog

    sombody here made this successfully with no problems?… i got 1 big problem…

    when i start gamae my minions are walking… when they look like they gonna start walking the road, they restart? and only 1 mob i got walking… Could it be the one mob that gets summoned there for starting as a “new mob”?

    answer on (email) plzz

  51. Mushyrulez

    Everybody, the program is Macromedia Flash, a program that you have to buy at…
    Great tutorial, but I think you made it too complex for the absolute beginners, you might want to explain it a TINY bit more. Or start more basically.

  52. arszt

    Nice tutorial, but why did this page open up at least 10 popups and try to attack my computer? When I clicked on this page the popups came up and then Norton said that tried to attack my computer.

  53. Pingback: Project 3 concept « Isaac Fowler Design

  54. Canadian Flash Helper

    To most, this tutorial would seem daunting yet they don’t know what A LOT of coding is…30 lines is beginning stuff. If they want to know hard flash coding then they should take a look at some of my games I’ve created (spaceInvaders, recreation of bloons tower defense, etc) that takes up about 8-15 external action scripts worth of code

    but the tutorial was pretty good…i needed some ideas on how to improve my bloons tower defense game
    i think i might have found a couple of ideas

    overall though you have great ideas in coding which would even help me out cause i have the problem of having repetitive lines of code making a function last sometimes up to 100 lines

  55. Pingback: Make a Flash game like Flash Element Tower Defense | Tutorial Collection

  56. Pingback:

  57. Corey

    ok im confused

    1 where do i input all this txt is there a certain software?

    2 how do i make the towers the bullets the minions and the background? do i just draw them or something?

    3 how would i know where the waypoints would be

    plz e-mail me if u have an answer

  58. mal

    hi i have done everything right i created the movie clips linked them and copied the Action Scripts.
    it works fine apart from the “path” movie clip is in the upper left hand corner i was just wondering how to move it to mach the way points.

    thanks oh and great tut

  59. Cameron Bell

    i just got flash cs3 and want to know… HOW THE HELL DO YOU GET INTO THE PART OF FLASH WHERE YOU CAN ADD TEXT (as shown on diagram 1)


    In my swf. My minions won’t move and I only have 2 scenes. The main menu and the game. Please send me the fla to see what I did worng or upload to youtube.

  61. Pingback: » Make a Flash game like Flash Element Tower Defense – Part 1 - Complete listing Tools and resorces for the ultimate web developer

  62. Pingback: flash oyun yapmay? ö?retecek 5 ders « MORYAZMA

  63. Lostaname

    Flash noowbie here: How do I make a Tower Defence game in Adobe Flash Prof. CS5? This explanation completely loses me.

    *Has Gem TD-like game aspirations*

  64. Pingback: Get Perfect and Useful Flash Tutorials | Webblog360

  65. Pingback: » 40 Top Flash Game Tutorial Roundup stuff i like

  66. Andrew

    I translated this into AS3 , and applied the code to only one instance, for testing purposes. The instance goes zig-zag. Why is that? What needs to be changed?

  67. Pingback: I want to be an artist, you want to be a coder « Over00

  68. Pingback: 32 Best Action Script 3 Game Tutorials

  69. Pingback: How to develop a tower defense game

  70. Noob

    so it works good so far, but my only issue is that my minions always start in the top left corner, do I need to add the origin points in the waypoint coordinates?

  71. Coudray


    Yup, you need to adjust the waypoint_x and waypoint_y of the new Array that he had created, the right side of the screen is 0 (x) while the upper side of the screen is 0 (y)

  72. Pingback: Internet Tutorial Mma Geeks | Grappling, BJJ & MMA Training Tips, News and More

    1. Post
      Emanuele Feronato

      You should have received a mail with the download link. If not, please write to info[at] with the same email you used to buy the book

Leave a Reply

Your email address will not be published. Required fields are marked *