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

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

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
// declaration of the array that will contain the game
field = Array();
// declaration of the arrat that will contain the tiles to be removed
tiles_to_remove = Array();
// number of frames to pass before inserting the first row
interval = 1;
// tiles placed so far
tiles_placed = 0;
// loop that initializes the field
for (x=0; x<10; x++) {
	field[x] = Array();
	for (y=0; y<10; y++) {
		field[x][y] = 0;
	}
}
// creation of the movieclip where to place tiles
createEmptyMovieClip("tiles", 1);
// creation of the movieclip where to draw
createEmptyMovieClip("drawing", 2);
// flag that states if the I can draw or not
can_draw = false;
// function that places a line of tiles in the bottom of the field
function place_line() {
	// 1 row = 10 tiles
	for (x=0; x<10; x++) {
		tiles_placed++;
		// if the spot is not empty, must shift the colum
		if (field[x][0] != 0) {
			push_blocks(x);
		}
		// placing the tile       
		tile = tiles.attachMovie("tile", "tile_"+tiles_placed, tiles_placed, {_x:10+32*x, _y:300});
		// assigning a random color (frame) to the tile
		num = Math.floor(Math.random()*8)+1;
		tile.gotoAndStop(num);
		field[x][0] = tiles_placed;
	}
}
// function to be executed at every frame
_root.onEnterFrame = function() {
	// decreasing the interval
	interval--;
	// placing a row and set a new interval if the interval reached zero
	if (interval<0) {
		interval = 200;
		place_line();
	}
	// if I can draw...       
	if (can_draw) {
		// determining on which tile I should draw
		x_tile_drawing = Math.floor((_root._xmouse-10)/32);
		y_tile_drawing = -Math.floor((_root._ymouse-300)/32);
		if (field[x_tile_drawing][y_tile_drawing] != 0) {
			// draw a line until my mouse
			drawing.lineTo(_root._xmouse, _root._ymouse);
			// determining the color of the tile I am drawing on
			current_color = _root.tiles["tile_"+field[x_tile_drawing][y_tile_drawing]]._currentframe;
			// if the current color is different than the one I started drawing on...
			if (current_color != starting_color) {
				// stop drawing
				stop_drawing();
			} else {
				// if the current color the same as the one I started drawing on...
				// insert_it determines if I have to insert the current tile in the array of tiles to be removed
				insert_it = true;
				// scanning the array of tiles to be removed
				for (x=0; x<tiles_to_remove.length; x++) {
					// if the tile I am drawing on is already in the array...
					if (tiles_to_remove[x] == y_tile_drawing*10+x_tile_drawing) {
						// don't insert the tile in the array of tiles to be removed
						insert_it = false;
						// exit the cycle
						break;
					}
				}
				// if I have to insert the tile in the array of tiles to be removed...
				if (insert_it) {
					// push the tile in the array
					tiles_to_remove.push(y_tile_drawing*10+x_tile_drawing);
				}
			}
		}
	}
};
// function that shifts the column of blocks
function push_blocks(col_number) {
	// scanning backward the columns
	for (i=9; i>=0; i--) {
		// if the place is not empty...
		if (field[col_number][i] != 0) {
			// if I don't have a column with 10 blocks...
			if (i != 9) {
				// shift the blocks
				field[col_number][i+1] = field[col_number][i];
				_root.tiles["tile_"+field[col_number][i]]._y -= 32;
			} else {
				// if I have more than 10 blocks in a column, remove the 10th block
				// In a normal game, it would be "game over"
				_root.tiles["tile_"+field[col_number][i]].removeMovieClip();
			}
		}
	}
}
// when I click...
onMouseDown = function () {
	// obtain tile clicked according to mouse position
	x_tile_clicked = Math.floor((_root._xmouse-10)/32);
	y_tile_clicked = -Math.floor((_root._ymouse-300)/32);
	// if the tile clicked exists...
	if ((x_tile_clicked>=0) and (x_tile_clicked<=9) and (y_tile_clicked>=0) and (y_tile_clicked<=9)) {
		if (field[x_tile_clicked][y_tile_clicked] != 0) {
			// set the starting color as the one of the tile I am clicking on
			starting_color = _root.tiles["tile_"+field[x_tile_clicked][y_tile_clicked]]._currentframe;
		}
	}
	// set the drawing style  
	drawing.lineStyle(5, 0x000000);
	// moving the pen to my mouse position
	drawing.moveTo(_root._xmouse, _root._ymouse);
	// now I can drag
	can_draw = true;
};
// when I release...
onMouseUp = function () {
	// if the array of tiles to be removed has more than one element...
	if (tiles_to_remove.length>1) {
		// scanning all array
		for (x=0; x<tiles_to_remove.length; x++) {
			posx = tiles_to_remove[x]%10;
			posy = Math.floor(tiles_to_remove[x]/10);
			// removing the tile
			remove_tiles(posx, posy);
		}
		update_field();
	}
	stop_drawing();
};
// removing tiles of the same color of the one clicked
function remove_tiles(tx, ty) {
	_root.tiles["tile_"+field[tx][ty]].removeMovieClip();
	field[tx][ty] = 0;
}
// updating the field, making tiles fall if bottom tiles disappear
function update_field() {
	for (i=0; i<10; i++) {
		for (j=1; j<10; j++) {
			if ((field[i][j] != 0) and (field[i][j-1] == 0)) {
				falling = j-1;
				while ((field[i][falling] == 0) and (falling>=0)) {
					field[i][falling] = field[i][falling+1];
					_root.tiles["tile_"+field[i][falling+1]]._y += 32;
					field[i][falling+1] = 0;
					falling--;
				}
			}
		}
	}
}
// stop drawing
function stop_drawing() {
	// now I can't draw
	can_draw = false;
	// clearing the drawing
	drawing.clear();
	// deleting and reinitializing the array. It's just a quick way to clear it
	delete (tiles_to_remove);
	tiles_to_remove = Array();
}

And play with it

Finally, download the source code.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 5.00 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.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 11 comments

  1. Niall Lavigne

    on June 17, 2008 at 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 17, 2008 at 3:21 pm

    This already existed:

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

    Anyway, great tutorial

  3. Emanuele Feronato

    on June 17, 2008 at 3:51 pm

    Damn, they stole my concept BEFORE I published it…

  4. Massimo M.

    on June 17, 2008 at 4:58 pm

    it’s quite old bomboozle….
    ;)

  5. Adarsh Sinha

    on June 17, 2008 at 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 17, 2008 at 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 18, 2008 at 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 18, 2008 at 12:15 pm

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

  9. Chris

    on June 29, 2008 at 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. Summer Couples: a game made in an airplane : Emanuele Feronato - italian geek and PROgrammer

    on July 8, 2008 at 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. [...]

  11. Daniel

    on July 21, 2008 at 10:06 pm

    Very good work.