Create a Flash game like Bloons tutorial

March 27, 2008 • Flash, Game design by Emanuele Feronato • 22 Comments

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

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!!

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (23 votes, average: 4.43 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.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 22 comments

  1. Robby

    on March 27, 2008 at 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 27, 2008 at 8:58 pm

    will you keep making some actionscript3 tutorials?

  3. Gabriel Bianconi

    on March 27, 2008 at 9:17 pm

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

  4. Alejandro

    on March 27, 2008 at 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 27, 2008 at 10:57 pm

    quetin: sure!

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

  6. Maru

    on March 28, 2008 at 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 28, 2008 at 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 28, 2008 at 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 28, 2008 at 2:43 pm

    ooops… i meant the tutorial on alejandro’s website

  10. EagleVision

    on March 28, 2008 at 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 28, 2008 at 11:46 pm

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

    Great tutorial!

  12. Suely (Snakesue)

    on March 29, 2008 at 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 29, 2008 at 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 29, 2008 at 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. How To Make A Game LIKE Bloons «

    on March 29, 2008 at 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 [...]

  16. EagleVision

    on March 29, 2008 at 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?

  17. sam

    on March 30, 2008 at 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 =]

  18. sam

    on March 30, 2008 at 7:02 pm

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

    Kudos!

  19. Matt

    on April 11, 2008 at 6:16 pm

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

  20. Chris

    on May 7, 2008 at 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…

  21. Streamhead » Blog Archive » How to use images in ActionScript 3 with FlashDevelop (and some other AS3 tips)

    on May 22, 2008 at 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, [...]

  22. 10 most popular Flash games of 2008 (from a PROgrammer point of view) : Emanuele Feronato

    on December 25, 2008 at 8:57 pm

    [...] darts, boomerangs and some other weapons. I also made a tutorial about the basics of this game in Create a Flash game like Bloons tutorial. Beside this, some weapons and bricks require some skills in coding. Great level [...]

< >