Create a Flash game like ColorFill - part 1

June 23, 2008 by Emanuele Feronato
Filed Under Actionscript 2, Flash, Game design •  

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.

PLAIN TEXT
ACTIONSCRIPT:
  1. Mouse.hide();
  2. // flag indicating if I pressed space
  3. space_pressed = false;
  4. // vertical_arrow = true: arrows are horizontal
  5. // vertical_arrow = false: arrows are vertical
  6. vertical_arrow = false;
  7. // flag indicating if I pressed space
  8. clicked = false;
  9. // enemy's random angle movement
  10. angle = Math.random()*360;
  11. // enemy and arrows speeds
  12. speed = 5;
  13. // booleans that states if the left or right arrows touched the border of the stage
  14. left_touch = false;
  15. right_touch = false;
  16. // x and y speeds of the enemy
  17. xspeed = speed*Math.cos(angle*0.0174532925);
  18. yspeed = speed*Math.sin(angle*0.0174532925);
  19. // enemy collision detection precision
  20. precision = 16;
  21. // attaching the ball = the enemy
  22. _root.attachMovie("ball","ball",1,{_x:250, _y:200});
  23. // creating the empty movieclip that will contain all drawings
  24. _root.createEmptyMovieClip("line",2);
  25. // attaching the left arrow
  26. _root.attachMovie("left_arrow","left_arrow",3);
  27. // attaching the right arrow
  28. _root.attachMovie("right_arrow","right_arrow",4);
  29. // function to be executed for the left arrow
  30. left_arrow.onEnterFrame = function() {
  31.     // if I did not click the mouse
  32.     if (!clicked) {
  33.         // if I am not in "vertical mode"...
  34.         if (!vertical_arrow) {
  35.             // place the arrow
  36.             this._y = _root._ymouse;
  37.             this._x = _root._xmouse-15;
  38.             this._rotation = 0;
  39.         }
  40.         // if I am in "vertical mode"....
  41.         else {
  42.             // place the arrow
  43.             this._y = _root._ymouse-15;
  44.             this._x = _root._xmouse;
  45.             this._rotation = 90;
  46.         }
  47.     }
  48.     // if I clicked the mouse....
  49.     else {
  50.         // if the arrow did not touch the edge of the stage...
  51.         if (!left_touch) {
  52.             // if I am not in "vertical mode"...
  53.             if (!vertical_arrow) {
  54.                 // moving the arrow
  55.                 this._x -= speed;
  56.                 // checking if the arrow touched the left edge of the stage
  57.                 if (this._x<8) {
  58.                     this._x = 8;
  59.                     left_touch = true;
  60.                 }
  61.             }
  62.             // if I am in "vertical mode"...
  63.             else {
  64.                 // moving the arrow
  65.                 this._y -= speed;
  66.                 // checking if the arrow touched the upper edge of the stage
  67.                 if (this._y<8) {
  68.                     this._y = 8;
  69.                     left_touch = true;
  70.                 }
  71.             }
  72.         }
  73.     }
  74. };
  75. // same concept for the right arrow
  76. right_arrow.onEnterFrame = function() {
  77.     if (!clicked) {
  78.         if (!vertical_arrow) {
  79.             this._y = _root._ymouse;
  80.             this._x = _root._xmouse+15;
  81.             this._rotation = 0;
  82.         }
  83.         else {
  84.             this._y = _root._ymouse+15;
  85.             this._x = _root._xmouse;
  86.             this._rotation = 90;
  87.         }
  88.     }
  89.     else {
  90.         if (!right_touch) {
  91.             if (!vertical_arrow) {
  92.                 this._x += speed;
  93.                 if (this._x>492) {
  94.                     this._x = 492;
  95.                     right_touch = true;
  96.                 }
  97.             }
  98.             else {
  99.                 this._y += speed;
  100.                 if (this._y>392) {
  101.                     this._y = 392;
  102.                     right_touch = true;
  103.                 }
  104.             }
  105.         }
  106.     }
  107. };
  108. // function to be executed for the ball... it's a simple "bounce here and there"
  109. ball.onEnterFrame = function() {
  110.     this._x += xspeed;
  111.     this._y += yspeed;
  112.     if ((this._x<20) or (this._x>480)) {
  113.         xspeed *= -1;
  114.     }
  115.     if ((this._y<20) or (this._y>380)) {
  116.         yspeed *= -1;
  117.     }
  118. };
  119. // function to be executed at every frame
  120. _root.onEnterFrame = function() {
  121.     // if I did not pressed the space....
  122.     if (!space_pressed) {
  123.         // checking if I am pressing the space
  124.         if (Key.isDown(Key.SPACE)) {
  125.             space_pressed = true;
  126.             // switching vertical_arrow state between true and false
  127.             vertical_arrow = !vertical_arrow;
  128.         }
  129.     }
  130.     // if I pressed space...
  131.     else {
  132.         // checking if I released the space
  133.         if (!Key.isDown(Key.SPACE)) {
  134.             space_pressed = false;
  135.         }
  136.     }
  137.     // checking if I clicked the mouse
  138.     if (clicked) {
  139.         // preparing the line style
  140.         line.clear();
  141.         line.lineStyle(5,"0xff0000");
  142.         // drawing a line from an arrow to the other
  143.         line.moveTo(left_arrow._x,left_arrow._y);
  144.         line.lineTo(right_arrow._x,right_arrow._y);
  145.         // checking collision between the ball and the line
  146.         for (x=1; x<precision; x++) {
  147.             spot_x = ball._x+20*Math.sin(x*360/precision*0.0174532925);
  148.             spot_y = ball._y+20*Math.cos(x*360/precision*0.0174532925);
  149.             // if the ball touched the line...
  150.             if (line.hitTest(spot_x, spot_y, true)) {
  151.                 // clear the line
  152.                 clicked = false;
  153.                 left_touch = false;
  154.                 right_touch = false;
  155.                 line.clear();
  156.             }
  157.         }
  158.     }
  159.     // if both left and right arrow (or up and down ones) touched the game edge...
  160.     if (right_touch and left_touch) {
  161.         // clear the line
  162.         clicked = false;
  163.         left_touch = false;
  164.         right_touch = false;
  165.         line.clear();
  166.     }
  167. };
  168. // checking if I click the mouse
  169. _root.onMouseDown = function() {
  170.     if (!clicked) {
  171.         clicked = true;
  172.     }
  173. };

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.

Improve the blog rating this post
Tell me what do you think about this post. I'll write better and better entries.
1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 3 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.

8 Responses to “Create a Flash game like ColorFill - part 1”

  1. sorby on June 23rd, 2008 6:03 pm

    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 on June 23rd, 2008 6:10 pm

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

  3. EagleVision on June 23rd, 2008 6:49 pm

    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 on June 23rd, 2008 8:49 pm

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

  5. Galaxian on June 24th, 2008 4:29 am

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

  6. David on June 24th, 2008 3:35 pm

    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 on June 27th, 2008 10:03 am

    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

Leave a Reply




Trackbacks

  1. 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 [...]