Create a Flash game like Bloons tutorial

Posted by Emanuele Feronato on 03/27/08 in 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!!

If you liked this post buy me a beer (or two)

» 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.

del.icio.us tag this | permalink | trackback url

19 Comment(s)

  1. Robby | Mar 27, 2008 | Reply

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

  2. quetin | Mar 27, 2008 | Reply

    will you keep making some actionscript3 tutorials?

  3. Gabriel Bianconi | Mar 27, 2008 | Reply

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

  4. Alejandro | Mar 27, 2008 | Reply

    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 | Mar 27, 2008 | Reply

    quetin: sure!

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

  6. Maru | Mar 28, 2008 | Reply

    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 | Mar 28, 2008 | Reply

    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 | Mar 28, 2008 | Reply

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

  9. abhilash | Mar 28, 2008 | Reply

    ooops… i meant the tutorial on alejandro’s website

  10. EagleVision | Mar 28, 2008 | Reply

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

    EagleVision
    eagleproductions.wordpress.com

  11. souled | Mar 28, 2008 | Reply

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

    Great tutorial!

  12. Suely (Snakesue) | Mar 29, 2008 | Reply

    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 | Mar 29, 2008 | Reply

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

    eagleproductions.wordpress.com

  14. Suely (Snakesue) | Mar 29, 2008 | Reply

    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 | Mar 29, 2008 | Reply

    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 | Mar 30, 2008 | Reply

    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 | Mar 30, 2008 | Reply

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

    Kudos!

  18. Matt | Apr 11, 2008 | Reply

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

  19. Chris | May 7, 2008 | Reply

    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…

2 Trackback(s)

  1. Mar 29, 2008: How To Make A Game LIKE Bloons «
  2. May 22, 2008: Streamhead » Blog Archive » How to use images in ActionScript 3 with FlashDevelop (and some other AS3 tips)

Post a Comment