Make a game like Lumines with Flash
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.
The game is simple: control squares made by 2×2 bricks of different colors falling from the top like in Tetris… as you create 2×2 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 2×2 bricks, that can be moved and rotated with arrow keys.
There is nothing really hard… but I couldn’t make the entire 2×2 square as a single movieclip because later in the game the square can “break” if it falls over existring bricks.
So every 2×2 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:
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 | // declaring some setup variables
// number of horizontal cells
grid_width = 16;
// number of vertical cells
grid_height = 10;
// size of the cell
tile_size = 30;
// offset in pixels fron the left side of the stage
x_offset = 10;
// offset in pixels from the top side of the stage
y_offset = 10;
// number of different colors that can be displayed in a brick
different_colors = 3;
// boolean values saying if I should wait for the left (or right, up...) key to be released
// this is used to make the player move bricks tapping arrow keys instead of just pressing them
wait_left = false;
wait_right = false;
wait_up = false;
wait_down = false;
// array containing the game field data
field = new Array();
// array containing the bricks I can move
moveable_bricks = new Array();
// initializing and drawing the play field
for (x=0; x<grid_width; x++) {
field[x] = Array();
for (y=0; y<grid_height; y++) {
field[x][y] = 0;
// look how I determine cells position according to tile size and offsets
cell = _root.attachMovie("brick", "brick_"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:x*tile_size+x_offset, _y:(y+2)*tile_size+y_offset});
// first frame = empty cell
cell.gotoAndStop(1);
}
}
// placing the four bricks
for (x=0; x<4; x++) {
// again, look how I determine bricks position according to tile size and offsets
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)});
// setting a random color for the brick (frames 2 to different_colors+1)
brk.gotoAndStop(Math.floor(Math.random()*different_colors)+2);
// saving brick position
// 0: up left
// 1: up right
// 2: bottom left
// 3: bottom right
brk.pos = x;
// saving the depth of the brick into the moveable_bricks array
// if you look how did I assign brick names, you'll see that I can determine a brick name
// starting from its depth. It's simply "brick_"+<the_depth>
moveable_bricks[x] = brk.getDepth();
}
// main function, to be executed at every frame
_root.onEnterFrame = function() {
// this is how I detect if a key was tapped:
// when it's pressed, I wait for it to be released (in this case: not pressed)
// thanks to the wait_<direction> variable
if (Key.isDown(Key.LEFT)) {
wait_left = true;
} else {
if (wait_left) {
// if the left key has been tapped, move the four bricks on the left
for (x=0; x<4; x++) {
// this "if" is used to determine if the bricks are still inside the game field
if ((_root["brick_"+moveable_bricks[x]]._x-x_offset)/tile_size-_root["brick_"+moveable_bricks[x]].pos%2>0) {
_root["brick_"+moveable_bricks[x]]._x -= tile_size;
}
}
// reset variable, now I must wait again for a key to be pressed
wait_left = false;
}
}
// same routine for the right key
if (Key.isDown(Key.RIGHT)) {
wait_right = true;
} else {
if (wait_right) {
for (x=0; x<=3; x++) {
if ((_root["brick_"+moveable_bricks[x]]._x-x_offset)/tile_size-_root["brick_"+moveable_bricks[x]].pos%2<14) {
_root["brick_"+moveable_bricks[x]]._x += tile_size;
}
}
wait_right = false;
}
}
// when the DOWN arrow is pressed, I must rotate the bricks clockwise
// block 0: moves to the right and becomes block 1
// block 1: moves down and becomes block 3
// block 2: moves up and becomes block 0
// block 3: moves to the left and becomes block 2
if (Key.isDown(Key.DOWN)) {
wait_down = true;
} else {
if (wait_down) {
for (x=0; x<4; x++) {
switch (_root["brick_"+moveable_bricks[x]].pos) {
case 0 :
_root["brick_"+moveable_bricks[x]].pos = 1;
_root["brick_"+moveable_bricks[x]]._x += tile_size;
break;
case 1 :
_root["brick_"+moveable_bricks[x]].pos = 3;
_root["brick_"+moveable_bricks[x]]._y += tile_size;
break;
case 2 :
_root["brick_"+moveable_bricks[x]].pos = 0;
_root["brick_"+moveable_bricks[x]]._y -= tile_size;
break;
case 3 :
_root["brick_"+moveable_bricks[x]].pos = 2;
_root["brick_"+moveable_bricks[x]]._x -= tile_size;
break;
}
}
wait_down = false;
}
}
// when the UP arrow is pressed, I must rotate the bricks counter-clockwise
// block 0: moves down the right and becomes block 2
// block 1: moves to the left and becomes block 0
// block 2: moves to the right and becomes block 3
// block 3: moves up and becomes block 1
if (Key.isDown(Key.UP)) {
wait_up = true;
} else {
if (wait_up) {
for (x=0; x<4; x++) {
switch (_root["brick_"+moveable_bricks[x]].pos) {
case 0 :
_root["brick_"+moveable_bricks[x]].pos = 2;
_root["brick_"+moveable_bricks[x]]._y += tile_size;
break;
case 1 :
_root["brick_"+moveable_bricks[x]].pos = 0;
_root["brick_"+moveable_bricks[x]]._x -= tile_size;
break;
case 2 :
_root["brick_"+moveable_bricks[x]].pos = 3;
_root["brick_"+moveable_bricks[x]]._x += tile_size;
break;
case 3 :
_root["brick_"+moveable_bricks[x]].pos = 1;
_root["brick_"+moveable_bricks[x]]._y -= tile_size;
break;
}
}
wait_up = false;
}
}
}; |
and here it is the result: move and rotate the square with arrow keys.
here it is the source code for you to experiment.
They can be easily customized to meet the unique requirements of your project.
9 Responses to “Make a game like Lumines with Flash”
Leave a Reply
Trackbacks
-
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 [...]
-
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 [...]
-
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 [...]
- 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
- 11 Flash isometric engines you can use in your games
- Monetize your Flash games with GamesChart
- 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
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash draw game like Line Rider or others - part 1
- Triqui MochiAds Arcade plugin for WordPress official page
- 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 flash artillery game – step 2 (4.74/5)
- Create a survival horror game in Flash tutorial – part 1 (4.73/5)
- Creation of a Flash arcade site using WordPress – step 2 (4.73/5)
- Flash game creation tutorial – part 2 (4.71/5)
- Flash game creation tutorial – part 1 (4.70/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)



(6 votes, average: 3.83 out of 5)





Nice idea, definitely can spawn some good games.
Very good ! much to the same dent as my current tutorial series, although yours is so much better ! Best of luck.
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
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!
Hi Emanuele,
I also got hooked to lumines and tried my hand at a version. I’m glad to see I’m not the only one.
My version is here if anyone wants to try it: http://www.flashbynight.com/illuminescence
Hi Souled,
Reading thru Emanuele’s code, I can see that he did in fact declare his variables (but without using ‘var’) and he did also use an onEnterFrame loop (on line 53).
mook