Create a Flash game like ColorFill – part 1

If you play all successful Flash games (and you should, if you want to be a Flash game developer), surely you played ColorFill.

ColorFill

In this game, you have to fill 80% of the stage with colors while avoiding collisions with enemies.

Play the game a bit then follow this prototype

The main idea to create this game is based upon the “vertical state” of arrows. I designed the arrows as horizontal ones, but if the player presses SPACE, I rotate them by 90 degrees so the left one becomes the up one and the right one becomes the down one.

There’s not any more difficulty in this first part, when I still don’t fill the area once I successfully draw a line.

Some previous concepts from Create a flash draw game like Line Rider or others – part 2 are involved in order to determine collisions between the ball and the line.

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
Mouse.hide();
// flag indicating if I pressed space
space_pressed = false;
// vertical_arrow = true: arrows are horizontal
// vertical_arrow = false: arrows are vertical
vertical_arrow = false;
// flag indicating if I pressed space
clicked = false;
// enemy's random angle movement 
angle = Math.random()*360;
// enemy and arrows speeds
speed = 5;
// booleans that states if the left or right arrows touched the border of the stage
left_touch = false;
right_touch = false;
// x and y speeds of the enemy
xspeed = speed*Math.cos(angle*0.0174532925);
yspeed = speed*Math.sin(angle*0.0174532925);
// enemy collision detection precision
precision = 16;
// attaching the ball = the enemy
_root.attachMovie("ball","ball",1,{_x:250, _y:200});
// creating the empty movieclip that will contain all drawings
_root.createEmptyMovieClip("line",2);
// attaching the left arrow
_root.attachMovie("left_arrow","left_arrow",3);
// attaching the right arrow
_root.attachMovie("right_arrow","right_arrow",4);
// function to be executed for the left arrow
left_arrow.onEnterFrame = function() {
	// if I did not click the mouse
	if (!clicked) {
		// if I am not in "vertical mode"...
		if (!vertical_arrow) {
			// place the arrow
			this._y = _root._ymouse;
			this._x = _root._xmouse-15;
			this._rotation = 0;
		}
		// if I am in "vertical mode"....
		else {
			// place the arrow
			this._y = _root._ymouse-15;
			this._x = _root._xmouse;
			this._rotation = 90;
		}
	}
	// if I clicked the mouse....
	else {
		// if the arrow did not touch the edge of the stage...
		if (!left_touch) {
			// if I am not in "vertical mode"...
			if (!vertical_arrow) {
				// moving the arrow
				this._x -= speed;
				// checking if the arrow touched the left edge of the stage
				if (this._x<8) {
					this._x = 8;
					left_touch = true;
				}
			}
			// if I am in "vertical mode"...
			else {
				// moving the arrow
				this._y -= speed;
				// checking if the arrow touched the upper edge of the stage
				if (this._y<8) {
					this._y = 8;
					left_touch = true;
				}
			}
		}
	}
};
// same concept for the right arrow
right_arrow.onEnterFrame = function() {
	if (!clicked) {
		if (!vertical_arrow) {
			this._y = _root._ymouse;
			this._x = _root._xmouse+15;
			this._rotation = 0;
		}
		else {
			this._y = _root._ymouse+15;
			this._x = _root._xmouse;
			this._rotation = 90;
		}
	}
	else {
		if (!right_touch) {
			if (!vertical_arrow) {
				this._x += speed;
				if (this._x>492) {
					this._x = 492;
					right_touch = true;
				}
			}
			else {
				this._y += speed;
				if (this._y>392) {
					this._y = 392;
					right_touch = true;
				}
			}
		}
	}
};
// function to be executed for the ball... it's a simple "bounce here and there"
ball.onEnterFrame = function() {
	this._x += xspeed;
	this._y += yspeed;
	if ((this._x<20) or (this._x>480)) {
		xspeed *= -1;
	}
	if ((this._y<20) or (this._y>380)) {
		yspeed *= -1;
	}
};
// function to be executed at every frame
_root.onEnterFrame = function() {
	// if I did not pressed the space....
	if (!space_pressed) {
		// checking if I am pressing the space
		if (Key.isDown(Key.SPACE)) {
			space_pressed = true;
			// switching vertical_arrow state between true and false
			vertical_arrow = !vertical_arrow;
		}
	}
	// if I pressed space...
	else {
		// checking if I released the space
		if (!Key.isDown(Key.SPACE)) {
			space_pressed = false;
		}
	}
	// checking if I clicked the mouse
	if (clicked) {
		// preparing the line style
		line.clear();
		line.lineStyle(5,"0xff0000");
		// drawing a line from an arrow to the other
		line.moveTo(left_arrow._x,left_arrow._y);
		line.lineTo(right_arrow._x,right_arrow._y);
		// checking collision between the ball and the line
		for (x=1; x<precision; x++) {
			spot_x = ball._x+20*Math.sin(x*360/precision*0.0174532925);
			spot_y = ball._y+20*Math.cos(x*360/precision*0.0174532925);
			// if the ball touched the line...
			if (line.hitTest(spot_x, spot_y, true)) {
				// clear the line
				clicked = false;
				left_touch = false;
				right_touch = false;
				line.clear();
			}
		}
	}
	// if both left and right arrow (or up and down ones) touched the game edge...
	if (right_touch and left_touch) {
		// clear the line
		clicked = false;
		left_touch = false;
		right_touch = false;
		line.clear();
	}
};
// checking if I click the mouse
_root.onMouseDown = function() {
	if (!clicked) {
		clicked = true;
	}
};

And this is the result:

Now next challenge is painting the area just closed with the line and manage new stage bounds.

Any ideas? I have a lot… meanwhile download the source code.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 3.67 out of 5)
Loading ... Loading ...
If you found this post useful, please consider a small donation.
» 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.

9 Responses

  1. sorby says:

    There’s a glitch where if you press space while the arrows are moving to the sides, it makes the arrows move vertically.

  2. Niall Lavigne says:

    Nice idea for a tutorial, I look forward to the second part.

  3. EagleVision says:

    Very nice post, you should make more of these “make a game like __” tutorials.
    They are very useful. :)

    Also, I sent you an email some time ago, you haven’t replied to me. It was about some nice prototype. :)

    PS:
    Yes, I admit it I am ADVERTISING!

    eaglevision.890m.com/blog

  4. Kesh says:

    if you push space and click it messes up, fix that bug boy!

  5. Galaxian says:

    Kesh, I wouldn’t call that a bug. I’d call it a whole new game!

  6. David says:

    Kesh, I wouldn’t call that a bug. I’d call it a whole new game!

    So true…

    I love the “Create a game like X” tutorials! It’s probaly the best way of learning

  7. kokosan says:

    Hi Emanuele, I am Kokosan the guy who made colorfill.
    Your approach is nice, I coded the game with AS3 and so far I used the same one..
    Can’ t wait to see how you ll do for the rest of the game (calculate the area was tough for me). I am pretty sure it will be more clean than my code.
    Anyway, I learn stuff from your tutorials so keep up the good work! (but please don’ t add powerups in your tutorial, at least not before I make colorfill 2:)
    Best
    Kokosan

  8. [...] wanted to know the percentage of a color in an image, maybe to manage level filling in a game like ColorFill (when using complex shapes to fill the level) or maybe to analyze the percentage of a color in a [...]

  9. hey, since it wasn’t mentioned, color fill is basically a remake of a game included with windows 3.1

    I can’t think of the name of it, but it was right along side mine sweeper, which has continued to be a game included with windows.

    the game i am thinking of had red and white balls bouncing around, and the splitting arrow looked a lot more like a scroll bar.. and if a ball hit the end of the splitter it bounced off, but you still lost if it hit the middle of the splitting line that was being drawn… also you could not destroy the balls by sectioning them off, it would just be put into its own section at that point.

    anyway, thought it should be noted that the game concept has been around.

    glad to see color fill, and the slight differences including variety of enemies.

Leave a Reply