Make a game like Lumines with Flash

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

I have to admit it... I got completely addicted to this game... so I decided to make my own Flash version.

If you don't know what is Lumines, it's a casual game you can download from Steam.

Lumines

The game is simple: control squares made by 2x2 bricks of different colors falling from the top like in Tetris... as you create 2x2 squares in same color, the vertical time line wipes them away from left to right.

In this first part, I'll create the game field, and the square made by 2x2 bricks, that can be moved and rotated with arrow keys.

There is nothing really hard... but I couldn't make the entire 2x2 square as a single movieclip because later in the game the square can "break" if it falls over existring bricks.

So every 2x2 square is formed by four movieclips.

There is only one object in the library at the moment... a movieclip linked as brick that contains the graphics for the empty grid at frame 1 and the graphics for colored bricks at frames 2-5

Then, I wanted the bricks to move and rotate when the player taps (press and released) arrow keys, not just when he presses them.

The code is completely commented:

PLAIN TEXT
ACTIONSCRIPT:
  1. // declaring some setup variables
  2. // number of horizontal cells
  3. grid_width = 16;
  4. // number of vertical cells
  5. grid_height = 10;
  6. // size of the cell
  7. tile_size = 30;
  8. // offset in pixels fron the left side of the stage
  9. x_offset = 10;
  10. // offset in pixels from the top side of the stage
  11. y_offset = 10;
  12. // number of different colors that can be displayed in a brick
  13. different_colors = 3;
  14. // boolean values saying if I should wait for the left (or right, up...) key to be released
  15. // this is used to make the player move bricks tapping arrow keys instead of just pressing them
  16. wait_left = false;
  17. wait_right = false;
  18. wait_up = false;
  19. wait_down = false;
  20. // array containing the game field data
  21. field = new Array();
  22. // array containing the bricks I can move
  23. moveable_bricks = new Array();
  24. // initializing and drawing the play field
  25. for (x=0; x<grid_width; x++) {
  26.     field[x] = Array();
  27.     for (y=0; y<grid_height; y++) {
  28.         field[x][y] = 0;
  29.         // look how I determine cells position according to tile size and offsets
  30.         cell = _root.attachMovie("brick", "brick_"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:x*tile_size+x_offset, _y:(y+2)*tile_size+y_offset});
  31.         // first frame = empty cell
  32.         cell.gotoAndStop(1);
  33.     }
  34. }
  35. // placing the four bricks
  36. for (x=0; x<4; x++) {
  37.     // again, look how I determine bricks position according to tile size and offsets
  38.     brk = _root.attachMovie("brick", "brick_"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:(grid_width/2+(x%2))*tile_size+x_offset, _y:y_offset+tile_size*Math.floor(x/2)});
  39.     // setting a random color for the brick (frames 2 to different_colors+1)
  40.     brk.gotoAndStop(Math.floor(Math.random()*different_colors)+2);
  41.     // saving brick position
  42.     // 0: up left
  43.     // 1: up right
  44.     // 2: bottom left
  45.     // 3: bottom right
  46.     brk.pos = x;
  47.     // saving the depth of the brick into the moveable_bricks array
  48.     // if you look how did I assign brick names, you'll see that I can determine a brick name
  49.     // starting from its depth. It's simply "brick_"+<the_depth>
  50.     moveable_bricks[x] = brk.getDepth();
  51. }
  52. // main function, to be executed at every frame
  53. _root.onEnterFrame = function() {
  54.     // this is how I detect if a key was tapped:
  55.     // when it's pressed, I wait for it to be released (in this case: not pressed)
  56.     // thanks to the wait_<direction> variable
  57.     if (Key.isDown(Key.LEFT)) {
  58.         wait_left = true;
  59.     } else {
  60.         if (wait_left) {
  61.             // if the left key has been tapped, move the four bricks on the left
  62.             for (x=0; x<4; x++) {
  63.                 // this "if" is used to determine if the bricks are still inside the game field
  64.                 if ((_root["brick_"+moveable_bricks[x]]._x-x_offset)/tile_size-_root["brick_"+moveable_bricks[x]].pos%2>0) {
  65.                     _root["brick_"+moveable_bricks[x]]._x -= tile_size;
  66.                 }
  67.             }
  68.             // reset variable, now I must wait again for a key to be pressed
  69.             wait_left = false;
  70.         }
  71.     }
  72.     // same routine for the right key
  73.     if (Key.isDown(Key.RIGHT)) {
  74.         wait_right = true;
  75.     } else {
  76.         if (wait_right) {
  77.             for (x=0; x<=3; x++) {
  78.                 if ((_root["brick_"+moveable_bricks[x]]._x-x_offset)/tile_size-_root["brick_"+moveable_bricks[x]].pos%2<14) {
  79.                     _root["brick_"+moveable_bricks[x]]._x += tile_size;
  80.                 }
  81.             }
  82.             wait_right = false;
  83.         }
  84.     }
  85.     // when the DOWN arrow is pressed, I must rotate the bricks clockwise
  86.     // block 0: moves to the right and becomes block 1
  87.     // block 1: moves down and becomes block 3
  88.     // block 2: moves up and becomes block 0
  89.     // block 3: moves to the left and becomes block 2
  90.     if (Key.isDown(Key.DOWN)) {
  91.         wait_down = true;
  92.     } else {
  93.         if (wait_down) {
  94.             for (x=0; x<4; x++) {
  95.                 switch (_root["brick_"+moveable_bricks[x]].pos) {
  96.                 case 0 :
  97.                     _root["brick_"+moveable_bricks[x]].pos = 1;
  98.                     _root["brick_"+moveable_bricks[x]]._x += tile_size;
  99.                     break;
  100.                 case 1 :
  101.                     _root["brick_"+moveable_bricks[x]].pos = 3;
  102.                     _root["brick_"+moveable_bricks[x]]._y += tile_size;
  103.                     break;
  104.                 case 2 :
  105.                     _root["brick_"+moveable_bricks[x]].pos = 0;
  106.                     _root["brick_"+moveable_bricks[x]]._y -= tile_size;
  107.                     break;
  108.                 case 3 :
  109.                     _root["brick_"+moveable_bricks[x]].pos = 2;
  110.                     _root["brick_"+moveable_bricks[x]]._x -= tile_size;
  111.                     break;
  112.                 }
  113.             }
  114.             wait_down = false;
  115.         }
  116.     }
  117.     // when the UP arrow is pressed, I must rotate the bricks counter-clockwise
  118.     // block 0: moves down the right and becomes block 2
  119.     // block 1: moves to the left and becomes block 0
  120.     // block 2: moves to the right and becomes block 3
  121.     // block 3: moves up and becomes block 1
  122.     if (Key.isDown(Key.UP)) {
  123.         wait_up = true;
  124.     } else {
  125.         if (wait_up) {
  126.             for (x=0; x<4; x++) {
  127.                 switch (_root["brick_"+moveable_bricks[x]].pos) {
  128.                 case 0 :
  129.                     _root["brick_"+moveable_bricks[x]].pos = 2;
  130.                     _root["brick_"+moveable_bricks[x]]._y += tile_size;
  131.                     break;
  132.                 case 1 :
  133.                     _root["brick_"+moveable_bricks[x]].pos = 0;
  134.                     _root["brick_"+moveable_bricks[x]]._x -= tile_size;
  135.                     break;
  136.                 case 2 :
  137.                     _root["brick_"+moveable_bricks[x]].pos = 3;
  138.                     _root["brick_"+moveable_bricks[x]]._x += tile_size;
  139.                     break;
  140.                 case 3 :
  141.                     _root["brick_"+moveable_bricks[x]].pos = 1;
  142.                     _root["brick_"+moveable_bricks[x]]._y -= tile_size;
  143.                     break;
  144.                 }
  145.             }
  146.             wait_up = false;
  147.         }
  148.     }
  149. };

and here it is the result: move and rotate the square with arrow keys.

here it is the source code for you to experiment.

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 (5 votes, average: 3.6 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.

7 Responses to “Make a game like Lumines with Flash”

  1. Niall Lavigne on July 2nd, 2008 2:46 pm

    Nice idea, definitely can spawn some good games.

  2. JDog on July 2nd, 2008 4:40 pm

    Very good ! much to the same dent as my current tutorial series, although yours is so much better ! Best of luck.

  3. Nick on July 2nd, 2008 9:11 pm

    holy crap, whenever i need help you are there, im making a tetris remake and i bet the next step to this tutorial will answer all my questions, THANK YOU

  4. souled on July 2nd, 2008 9:57 pm

    Hi Emanuele,

    I was just wondering, as a big fan of the blog, why you have not adopted some essential programming habits, such as declaring variables properly and using

    function onEnterFrame() {

    (Apparently quicker, though it would be great to see a tutorial comparing optimisation)?

    Great blog, and I am always shocked to see a new post nearly every day!

Leave a Reply




Trackbacks

  1. Make a game like Lumines with Flash - part 2 : Emanuele Feronato - italian geek and PROgrammer on July 5th, 2008 12:06 pm

    [...] the first part we managed to move and rotate a 2×2 square made (obviously) by 4 [...]

  2. Make a game like Lumines with Flash - part 3 : Emanuele Feronato - italian geek and PROgrammer on July 15th, 2008 10:30 am

    [...] it’s time to make bricks disappear if they group in a 2×2 square. Read part 1 and 2 if you did not [...]

  3. Web-Game Magazine - the best free action/adventure web games and casual games, reviewed daily » Blog Archive » Make a game like Lumines with Flash - part 3 on July 16th, 2008 5:18 am

    [...] part 1 and 2 if you did not [...]