Adding a new twist to the prototype of a Flash game like Poux

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

Do you remember the Poux tutorial series?

If not, then read parts 1, 2 and 3 and take a look at the finished project known as Christmas Couples.

I always say using prototypes to create games is a good idea, and the almost 7,000,000 plays Christmas Couples had since its release confirm my theory.

Anyway, the "twist" is you must remove adjacent tiles by drawing on them.

You must connect two or more adjacent tiles with the same color with the "pen", and if you have the precision of a surgeon, you can also connect tiles diagonally!

Oh, well, take the commented actionscript

PLAIN TEXT
ACTIONSCRIPT:
  1. // declaration of the array that will contain the game
  2. field = Array();
  3. // declaration of the arrat that will contain the tiles to be removed
  4. tiles_to_remove = Array();
  5. // number of frames to pass before inserting the first row
  6. interval = 1;
  7. // tiles placed so far
  8. tiles_placed = 0;
  9. // loop that initializes the field
  10. for (x=0; x<10; x++) {
  11.     field[x] = Array();
  12.     for (y=0; y<10; y++) {
  13.         field[x][y] = 0;
  14.     }
  15. }
  16. // creation of the movieclip where to place tiles
  17. createEmptyMovieClip("tiles", 1);
  18. // creation of the movieclip where to draw
  19. createEmptyMovieClip("drawing", 2);
  20. // flag that states if the I can draw or not
  21. can_draw = false;
  22. // function that places a line of tiles in the bottom of the field
  23. function place_line() {
  24.     // 1 row = 10 tiles
  25.     for (x=0; x<10; x++) {
  26.         tiles_placed++;
  27.         // if the spot is not empty, must shift the colum
  28.         if (field[x][0] != 0) {
  29.             push_blocks(x);
  30.         }
  31.         // placing the tile       
  32.         tile = tiles.attachMovie("tile", "tile_"+tiles_placed, tiles_placed, {_x:10+32*x, _y:300});
  33.         // assigning a random color (frame) to the tile
  34.         num = Math.floor(Math.random()*8)+1;
  35.         tile.gotoAndStop(num);
  36.         field[x][0] = tiles_placed;
  37.     }
  38. }
  39. // function to be executed at every frame
  40. _root.onEnterFrame = function() {
  41.     // decreasing the interval
  42.     interval--;
  43.     // placing a row and set a new interval if the interval reached zero
  44.     if (interval<0) {
  45.         interval = 200;
  46.         place_line();
  47.     }
  48.     // if I can draw...       
  49.     if (can_draw) {
  50.         // determining on which tile I should draw
  51.         x_tile_drawing = Math.floor((_root._xmouse-10)/32);
  52.         y_tile_drawing = -Math.floor((_root._ymouse-300)/32);
  53.         if (field[x_tile_drawing][y_tile_drawing] != 0) {
  54.             // draw a line until my mouse
  55.             drawing.lineTo(_root._xmouse, _root._ymouse);
  56.             // determining the color of the tile I am drawing on
  57.             current_color = _root.tiles["tile_"+field[x_tile_drawing][y_tile_drawing]]._currentframe;
  58.             // if the current color is different than the one I started drawing on...
  59.             if (current_color != starting_color) {
  60.                 // stop drawing
  61.                 stop_drawing();
  62.             } else {
  63.                 // if the current color the same as the one I started drawing on...
  64.                 // insert_it determines if I have to insert the current tile in the array of tiles to be removed
  65.                 insert_it = true;
  66.                 // scanning the array of tiles to be removed
  67.                 for (x=0; x<tiles_to_remove.length; x++) {
  68.                     // if the tile I am drawing on is already in the array...
  69.                     if (tiles_to_remove[x] == y_tile_drawing*10+x_tile_drawing) {
  70.                         // don't insert the tile in the array of tiles to be removed
  71.                         insert_it = false;
  72.                         // exit the cycle
  73.                         break;
  74.                     }
  75.                 }
  76.                 // if I have to insert the tile in the array of tiles to be removed...
  77.                 if (insert_it) {
  78.                     // push the tile in the array
  79.                     tiles_to_remove.push(y_tile_drawing*10+x_tile_drawing);
  80.                 }
  81.             }
  82.         }
  83.     }
  84. };
  85. // function that shifts the column of blocks
  86. function push_blocks(col_number) {
  87.     // scanning backward the columns
  88.     for (i=9; i>=0; i--) {
  89.         // if the place is not empty...
  90.         if (field[col_number][i] != 0) {
  91.             // if I don't have a column with 10 blocks...
  92.             if (i != 9) {
  93.                 // shift the blocks
  94.                 field[col_number][i+1] = field[col_number][i];
  95.                 _root.tiles["tile_"+field[col_number][i]]._y -= 32;
  96.             } else {
  97.                 // if I have more than 10 blocks in a column, remove the 10th block
  98.                 // In a normal game, it would be "game over"
  99.                 _root.tiles["tile_"+field[col_number][i]].removeMovieClip();
  100.             }
  101.         }
  102.     }
  103. }
  104. // when I click...
  105. onMouseDown = function () {
  106.     // obtain tile clicked according to mouse position
  107.     x_tile_clicked = Math.floor((_root._xmouse-10)/32);
  108.     y_tile_clicked = -Math.floor((_root._ymouse-300)/32);
  109.     // if the tile clicked exists...
  110.     if ((x_tile_clicked>=0) and (x_tile_clicked<=9) and (y_tile_clicked>=0) and (y_tile_clicked<=9)) {
  111.         if (field[x_tile_clicked][y_tile_clicked] != 0) {
  112.             // set the starting color as the one of the tile I am clicking on
  113.             starting_color = _root.tiles["tile_"+field[x_tile_clicked][y_tile_clicked]]._currentframe;
  114.         }
  115.     }
  116.     // set the drawing style 
  117.     drawing.lineStyle(5, 0x000000);
  118.     // moving the pen to my mouse position
  119.     drawing.moveTo(_root._xmouse, _root._ymouse);
  120.     // now I can drag
  121.     can_draw = true;
  122. };
  123. // when I release...
  124. onMouseUp = function () {
  125.     // if the array of tiles to be removed has more than one element...
  126.     if (tiles_to_remove.length>1) {
  127.         // scanning all array
  128.         for (x=0; x<tiles_to_remove.length; x++) {
  129.             posx = tiles_to_remove[x]%10;
  130.             posy = Math.floor(tiles_to_remove[x]/10);
  131.             // removing the tile
  132.             remove_tiles(posx, posy);
  133.         }
  134.         update_field();
  135.     }
  136.     stop_drawing();
  137. };
  138. // removing tiles of the same color of the one clicked
  139. function remove_tiles(tx, ty) {
  140.     _root.tiles["tile_"+field[tx][ty]].removeMovieClip();
  141.     field[tx][ty] = 0;
  142. }
  143. // updating the field, making tiles fall if bottom tiles disappear
  144. function update_field() {
  145.     for (i=0; i<10; i++) {
  146.         for (j=1; j<10; j++) {
  147.             if ((field[i][j] != 0) and (field[i][j-1] == 0)) {
  148.                 falling = j-1;
  149.                 while ((field[i][falling] == 0) and (falling>=0)) {
  150.                     field[i][falling] = field[i][falling+1];
  151.                     _root.tiles["tile_"+field[i][falling+1]]._y += 32;
  152.                     field[i][falling+1] = 0;
  153.                     falling--;
  154.                 }
  155.             }
  156.         }
  157.     }
  158. }
  159. // stop drawing
  160. function stop_drawing() {
  161.     // now I can't draw
  162.     can_draw = false;
  163.     // clearing the drawing
  164.     drawing.clear();
  165.     // deleting and reinitializing the array. It's just a quick way to clear it
  166.     delete (tiles_to_remove);
  167.     tiles_to_remove = Array();
  168. }

And play with it

Finally, 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: 5 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.

11 Responses to “Adding a new twist to the prototype of a Flash game like Poux”

  1. Niall Lavigne on June 17th, 2008 2:56 pm

    Wow, nice job on that, a good little twist and a fun minigame!
    I’ll be playing around with this one.

  2. RJ on June 17th, 2008 3:21 pm

    This already existed:

    [Bomboozle]
    http://www.minijuegos.com/juegos/jugar.php?id=6559

    Anyway, great tutorial

  3. Emanuele Feronato on June 17th, 2008 3:51 pm

    Damn, they stole my concept BEFORE I published it…

  4. Massimo M. on June 17th, 2008 4:58 pm

    it’s quite old bomboozle….
    ;)

  5. Adarsh Sinha on June 17th, 2008 7:40 pm

    Can you make an online game tutorial? a simple one, for like 2 players atleast?
    just to show us how it works?
    and also, how do you keep on duplicating the background and items when an object is moving fast through it (like canon games) :
    http://www.addictinggames.com/kittencannon.html

  6. Thousand blades on June 17th, 2008 9:12 pm

    Nice tutorial, but drawing isn’t a good control mechanic for this game, imo.
    You lose the pen trail after each column shift, you can’t use big&fast mouse movements…It’s just not fun.

    Much tweaking required.
    (all of these doesn’t matter if you won’t use it in a full game, of course)

  7. Galaxian on June 18th, 2008 3:53 am

    @Everybody

    Check out 9 Ball Connect… The twist is that you’re forced to follow a numeric order.

    Here’s the URL:

    http://www.triqui.com/game/9-ball-connect/

    @Thousand blades

    Pausing the column shift interval when the mouse is down might fix it.

  8. Massimo M. on June 18th, 2008 12:15 pm

    I’m sure emanuele would find another way to improve the gameplay! ;)

  9. Chris on June 29th, 2008 11:03 pm

    LOL… Wow… spent more time playing with it with my Wacom than actually reading the tutorial. I should really check out more games designed for use with a stylus and such. :)

  10. Daniel on July 21st, 2008 10:06 pm

    Very good work.

Leave a Reply




Trackbacks

  1. Summer Couples: a game made in an airplane : Emanuele Feronato - italian geek and PROgrammer on July 8th, 2008 12:55 pm

    [...] It’s not my case, so I opened my laptop (always ask to the flight crew before doing it!) and started working on the code published on Adding a new twist to the prototype of a Flash game like Poux. [...]