Get the full commented source code of

HTML5 Suika Watermelon Game

Talking about Poux game, Actionscript 2, Flash and Game development.

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

// 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=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=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.

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.