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.
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.
They can be easily customized to meet the unique requirements of your project.
9 Responses to “Create a Flash game like ColorFill – part 1”
Leave a Reply
Trackbacks
-
Playing with getPixel : Emanuele Feronato - italian geek and PROgrammer on
June 29th, 2008 9:16 pm
[...] 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 [...]
- Citrus Engine released for free for learning
- My epic fail with ClickBank
- Get up to $100,000 for your next Flash game with Mochi GAME Developer Fund
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines – 17 lines version
- Sell sitelocked version of your Flash games and even .fla sources to Free Online Games
- Protect your work from ActionScript code theft with SWF Protector
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines
- Understanding Box2D’s one-way platforms, aka CLOUDS
- Triqui MochiAds Arcade plugin for WordPress upgraded to 1.2
- Box2D Flash game creation tutorial – part 2
- Create a Lightbox effect only with CSS - no javascript needed
- Flash game creation tutorial - part 1
- Create a Flash Racing Game Tutorial
- Flash game creation tutorial - part 2
- Make a Flash game like Flash Element Tower Defense - Part 2
- Flash game creation tutorial - part 3
- Triqui MochiAds Arcade plugin for WordPress official page
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash draw game like Line Rider or others - part 1
- Create a flash artillery game - step 1
- Flash game creation tutorial – part 5.2 (4.88/5)
- Create a flash artillery game – step 1 (4.79/5)
- Create a Flash Racing Game Tutorial (4.76/5)
- Create a survival horror game in Flash tutorial – part 1 (4.74/5)
- Create a flash artillery game – step 2 (4.74/5)
- Creation of a Flash arcade site using WordPress – step 2 (4.73/5)
- Flash game creation tutorial – part 1 (4.71/5)
- Flash game creation tutorial – part 2 (4.71/5)
- Create a flash draw game like Line Rider or others – part 1 (4.69/5)
- Creation of a platform game with Flash – step 2 (4.68/5)



(3 votes, average: 3.67 out of 5)



There’s a glitch where if you press space while the arrows are moving to the sides, it makes the arrows move vertically.
Nice idea for a tutorial, I look forward to the second part.
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
if you push space and click it messes up, fix that bug boy!
Kesh, I wouldn’t call that a bug. I’d call it a whole new game!
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
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
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.