Create a Flash game like Bloons tutorial

March 27, 2008 by Emanuele Feronato
Filed Under Flash, Game design •  

One of the moust famous Flash games ever is Bloons.

Bloons

Please, don't make me explain what I am talking about. Just play it. I really do not know why nobody tried to make a clone of such a simple game. Then I realized... that's because I never published a prototype of this game.

Now, it's time for me to give you the tools to flood the net with a million Bloons clones!

The prototype is heavily based on Create a flash artillery game - step 1, and I strongly recommend you to read it.

Then, here it is the source code, that will be commented once I will release a complete level

PLAIN TEXT
ACTIONSCRIPT:
  1. Mouse.hide();
  2. level = new Array();
  3. level[0] = new Array(1, 1, 1, 1, 1, 1, 1);
  4. level[1] = new Array(1, 0, 1, 1, 1, 0, 1);
  5. level[2] = new Array(1, 1, 1, 1, 1, 1, 1);
  6. level[3] = new Array(1, 1, 1, 0, 1, 1, 1);
  7. level[4] = new Array(1, 1, 1, 1, 1, 1, 1);
  8. level[5] = new Array(1, 0, 1, 1, 1, 0, 1);
  9. level[6] = new Array(1, 1, 1, 1, 1, 1, 1);
  10. for (y=0; y<=6; y++) {
  11.     for (x=0; x<=6; x++) {
  12.         if (level[y][x] == 1) {
  13.             the_bloon = _root.attachMovie("bloon", "bloon"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:x*35+125, _y:y*35+20});
  14.             the_bloon.gotoAndStop(Math.floor(Math.random()*6+1));
  15.             the_bloon.onEnterFrame = function() {
  16.                 spike_x = cannonball._x+20*Math.cos(cannonball._rotation/180*Math.PI)
  17.                 spike_y = cannonball._y+20*Math.sin(cannonball._rotation/180*Math.PI)
  18.                 if (this.hitTest(spike_x, spike_y, true)) {
  19.                     this.removeMovieClip();
  20.                 }
  21.             }
  22.         }
  23.     }
  24. }
  25. gravity = 2;
  26. firing = 0;
  27. firepower = 0;
  28. fire_increment = 1;
  29. bullet_in_air = false;
  30. attachMovie("crosshair","crosshair",_root.getNextHighestDepth());
  31. attachMovie("tank","tank",_root.getNextHighestDepth(),{_x:230, _y:350});
  32. crosshair.onEnterFrame = function() {
  33.     this._x = _xmouse;
  34.     this._y = _ymouse;
  35. };
  36. tank.onEnterFrame = function() {
  37.     mousex = _xmouse-this._x;
  38.     mousey = (_ymouse-this._y)*-1;
  39.     angle = Math.atan2(mousey, mousex);
  40.     this.cannon._rotation = -angle*180/Math.PI;
  41.     if (firing) {
  42.         if ((firepower>50) or (firepower<0)) {
  43.             fire_increment *= -1;
  44.         }
  45.         firepower += fire_increment;
  46.         this.cannon.powermeter._width += fire_increment;
  47.     }
  48. };
  49. function onMouseDown() {
  50.     if ((!firing) and (!bullet_in_air)) {
  51.         firing = true;
  52.     }
  53. }
  54.  
  55. function onMouseUp() {
  56.     if (firing) {
  57.         firing = false;
  58.         tank.cannon.powermeter._width = 40;
  59.         fire_increment = 1;
  60.         angle = tank.cannon._rotation;
  61.         start_ball_x = tank._x+48*Math.cos(angle*Math.PI/180);
  62.         start_ball_y = tank._y+48*Math.sin(angle*Math.PI/180);
  63.         cannonball_fired = attachMovie("cannonball", "cannonball", 10000, {_x:start_ball_x, _y:start_ball_y});
  64.         cannonball_fired.dirx = Math.cos(angle*Math.PI/180)*firepower;
  65.         cannonball_fired.diry = Math.sin(angle*Math.PI/180)*firepower;
  66.         bullet_in_air = true;
  67.         cannonball_fired.onEnterFrame = function() {
  68.             this.diry += gravity;
  69.             this._x += this.dirx/2;
  70.             this._y += this.diry/2;
  71.             this._rotation = Math.atan2(this.diry, this.dirx)*180/Math.PI;
  72.             if (this._y>400) {
  73.                 bullet_in_air = false;
  74.                 this.removeMovieClip();
  75.             }
  76.         };
  77.         firepower = 0;
  78.     }
  79. }

And here it is the result:

Enjoy!!!! And download the source!!

Improve the blog rating this post
Tell me what do you think about this post. I'll write better and better entries.
1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 4 out of 5)
Loading ... Loading ...

» Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

21 Responses to “Create a Flash game like Bloons tutorial”

  1. Robby on March 27th, 2008 8:48 pm

    omg :o this is amazing!!!
    between this and the boxhead engine you’re on a roll!!! keep it up Emanuele.

  2. quetin on March 27th, 2008 8:58 pm

    will you keep making some actionscript3 tutorials?

  3. Gabriel Bianconi on March 27th, 2008 9:17 pm

    A-M-A-Z-I-N-G

  4. Alejandro on March 27th, 2008 9:46 pm

    Hi Emanuele,

    I just want to let you know i’ve worked on the basic stuff about creating a game like bloons in my blog:
    http://alejandroquarto.com/2008/01/08/create-a-game-like-bloons-part-1/

    If you want, fell free to use the pics i made while doing the character and that stuff.

    Great work!!

  5. Emanuele Feronato on March 27th, 2008 10:57 pm

    quetin: sure!

    alejandro: thank you very much, really a good work, I will use it

  6. Maru on March 28th, 2008 5:57 am

    This was pretty good! I’m glad your back to finish up some of the older tutorial you began. I was wonder when you going to return to the Flash Element Tower Defense game? Bloon did a version of that with their style.

    This was the only place that had a good tutorial for that style of game.

    Thanks! I learn to like coding now.

  7. quentin on March 28th, 2008 11:53 am

    and in your next actionscript3 tutorial
    could you make a tutorial to have lots of ennemys that react to the same code?

    like taking back your ball game tutorial and having some ennemys all around that get away from the ball when you get next to them?

    thanks

  8. abhilash on March 28th, 2008 2:40 pm

    nice tutorial,but i knew the tutorial on alejandro’s tutorial already and that tutorial was also good

  9. abhilash on March 28th, 2008 2:43 pm

    ooops… i meant the tutorial on alejandro’s website

  10. EagleVision on March 28th, 2008 6:45 pm

    I am going to use alejandro’s tutorial and continue it. I love these tutorials…

    EagleVision
    eagleproductions.wordpress.com

  11. souled on March 28th, 2008 11:46 pm

    Wheres the music on the homepage coming from?? :’(

    Great tutorial!

  12. Suely (Snakesue) on March 29th, 2008 12:36 am

    Since “pocketPool” i have been visiting the alejandroquarto’s blog (great blog too). I learned and downloaded the “likebloon_arrow” (02/07/08). Before (12/18/07) i learned and downloaded the tutorial “When Elasticity meets Bloons”. I started the clone game and….. where is it? Sleeping in my PC.
    NOW I BELIEVE: I AM A VAPORWARE WOMAN.

  13. EagleVision on March 29th, 2008 1:02 am

    Vaporware…Somthing we all suffer from.
    His blog is great! :D
    I also have blog:

    eagleproductions.wordpress.com

  14. Suely (Snakesue) on March 29th, 2008 1:03 am

    Hi Emanuele,
    Perhaps a few guilt is your,rsrs.I expect you every day. Every tutorial is magnificent. Because you i want to learn more and more and then i have maybe 20 games unfinished.

  15. EagleVision on March 29th, 2008 9:01 pm

    Suely!
    Your the one that visited my blog…thanks…

    Can’t wait for the next part of this tutorial, or mabye there isn’t one. Is there, Emanuele?

  16. sam on March 30th, 2008 6:57 pm

    This is great - huge well done!

    Thanks so much!

    I’m now having an attempt at modifying it - so far Ive added a HUD type thing at the bottom, displaying score/bloons burst, bloons remaining and spikes remaining.

    However, I wondered why that sometimes you seem to hit the bloons, but they don’t go. Ive worked it out (simple really) - you just need to modify the bloons movie clip so that it has a hero_hit thing, like in the flash game (not forgetting to modify the code as well!)

    Im trying it out now =]

  17. sam on March 30th, 2008 7:02 pm

    P.S. PLEASE keep doing this, the tutorials are so helpful and, well… awsome haha!

    Kudos!

  18. Matt on April 11th, 2008 6:16 pm

    I really want to create a game like this but, where do you type in the actionscript text from?

  19. Chris on May 7th, 2008 6:24 am

    Wowsers, now that is some flattery! Who’d a thought?
    If anyone does decide to make a Bloons clone, please don’t use any of our trademarks. Other than that, I’m interested to see if anyone will make one…

Leave a Reply




Trackbacks

  1. How To Make A Game LIKE Bloons « on March 29th, 2008 8:38 pm

    [...] recently found a link on Emanuele’s tutorial, and on his tutorial I found another link (wich I liked better than Emanuele’s, but thats [...]

  2. Streamhead » Blog Archive » How to use images in ActionScript 3 with FlashDevelop (and some other AS3 tips) on May 22nd, 2008 10:55 pm

    [...] how events are handled. And if you want to know where all this is going, the idea is to recreate something similar to this in ActionScript 3 and FlashDevelop and then afterwards add some 3D goodness to it (3D objects, [...]