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.
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
-
Mouse.hide();
-
level = new Array();
-
level[0] = new Array(1, 1, 1, 1, 1, 1, 1);
-
level[1] = new Array(1, 0, 1, 1, 1, 0, 1);
-
level[2] = new Array(1, 1, 1, 1, 1, 1, 1);
-
level[3] = new Array(1, 1, 1, 0, 1, 1, 1);
-
level[4] = new Array(1, 1, 1, 1, 1, 1, 1);
-
level[5] = new Array(1, 0, 1, 1, 1, 0, 1);
-
level[6] = new Array(1, 1, 1, 1, 1, 1, 1);
-
for (y=0; y<=6; y++) {
-
for (x=0; x<=6; x++) {
-
if (level[y][x] == 1) {
-
the_bloon = _root.attachMovie("bloon", "bloon"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:x*35+125, _y:y*35+20});
-
the_bloon.gotoAndStop(Math.floor(Math.random()*6+1));
-
the_bloon.onEnterFrame = function() {
-
spike_x = cannonball._x+20*Math.cos(cannonball._rotation/180*Math.PI)
-
spike_y = cannonball._y+20*Math.sin(cannonball._rotation/180*Math.PI)
-
if (this.hitTest(spike_x, spike_y, true)) {
-
this.removeMovieClip();
-
}
-
}
-
}
-
}
-
}
-
gravity = 2;
-
firing = 0;
-
firepower = 0;
-
fire_increment = 1;
-
bullet_in_air = false;
-
attachMovie("crosshair","crosshair",_root.getNextHighestDepth());
-
attachMovie("tank","tank",_root.getNextHighestDepth(),{_x:230, _y:350});
-
crosshair.onEnterFrame = function() {
-
this._x = _xmouse;
-
this._y = _ymouse;
-
};
-
tank.onEnterFrame = function() {
-
mousex = _xmouse-this._x;
-
mousey = (_ymouse-this._y)*-1;
-
angle = Math.atan2(mousey, mousex);
-
this.cannon._rotation = -angle*180/Math.PI;
-
if (firing) {
-
if ((firepower>50) or (firepower<0)) {
-
fire_increment *= -1;
-
}
-
firepower += fire_increment;
-
this.cannon.powermeter._width += fire_increment;
-
}
-
};
-
function onMouseDown() {
-
if ((!firing) and (!bullet_in_air)) {
-
firing = true;
-
}
-
}
-
-
function onMouseUp() {
-
if (firing) {
-
firing = false;
-
tank.cannon.powermeter._width = 40;
-
fire_increment = 1;
-
angle = tank.cannon._rotation;
-
start_ball_x = tank._x+48*Math.cos(angle*Math.PI/180);
-
start_ball_y = tank._y+48*Math.sin(angle*Math.PI/180);
-
cannonball_fired = attachMovie("cannonball", "cannonball", 10000, {_x:start_ball_x, _y:start_ball_y});
-
cannonball_fired.dirx = Math.cos(angle*Math.PI/180)*firepower;
-
cannonball_fired.diry = Math.sin(angle*Math.PI/180)*firepower;
-
bullet_in_air = true;
-
cannonball_fired.onEnterFrame = function() {
-
this.diry += gravity;
-
this._x += this.dirx/2;
-
this._y += this.diry/2;
-
this._rotation = Math.atan2(this.diry, this.dirx)*180/Math.PI;
-
if (this._y>400) {
-
bullet_in_air = false;
-
this.removeMovieClip();
-
}
-
};
-
firepower = 0;
-
}
-
}
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.

tag this
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.
quetin | Mar 27, 2008 | Reply
will you keep making some actionscript3 tutorials?
Gabriel Bianconi | Mar 27, 2008 | Reply
A-M-A-Z-I-N-G
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!!
Emanuele Feronato | Mar 27, 2008 | Reply
quetin: sure!
alejandro: thank you very much, really a good work, I will use it
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.
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
abhilash | Mar 28, 2008 | Reply
nice tutorial,but i knew the tutorial on alejandro’s tutorial already and that tutorial was also good
abhilash | Mar 28, 2008 | Reply
ooops… i meant the tutorial on alejandro’s website
EagleVision | Mar 28, 2008 | Reply
I am going to use alejandro’s tutorial and continue it. I love these tutorials…
EagleVision
eagleproductions.wordpress.com
souled | Mar 28, 2008 | Reply
Wheres the music on the homepage coming from?? :’(
Great tutorial!
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.
EagleVision | Mar 29, 2008 | Reply
Vaporware…Somthing we all suffer from.
His blog is great! :D
I also have blog:
eagleproductions.wordpress.com
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.
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?
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 =]
sam | Mar 30, 2008 | Reply
P.S. PLEASE keep doing this, the tutorials are so helpful and, well… awsome haha!
Kudos!
Matt | Apr 11, 2008 | Reply
I really want to create a game like this but, where do you type in the actionscript text from?
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…