Get the full commented source code of

HTML5 Suika Watermelon Game

Talking about Poux game, Flash and Game development.

November 28th update: Finished project released

3rd update of the prototype. Remember to read part 1 and 2

It’s beginning to become something like a complete one-day game… let me introduce what I did.

First, I added cute graphics… on zeus box you will find some cute free icons with a completely free license, no matter what are you doing with such icons. I downloaded a Christmas pack so now the game looks like a Christmas game. I called the game “Christmas Couples”.

Then I added a score system, a time bar, some animations when you click on the icons, increasing difficulty, an highscore system, a game over status and a green “X2” bonus bar acting like a 2X bonus if you remove an icon touching the bar.

Obviously, just in a few rows.

About the highscores, I used an ArmorBot account. Installing it is very easy and you can change almost everything in the highscore page. You can even add your own ad.

The page I made sucks a bit but it’s still under development… or maybe not… give it a look. At the moment you can only submit scores under the “triqui” name… but I am going to add a text field in the final version.

Anyway, let’s see the actionscript

// high scores
import ab3.rankz.*;
function __rankz_send__(par1, par2, par3, par4) { /* can't show you the content or you may cheat hiscores */ }
// declaration of the array that will contain the game
field = Array();
// number of icons actually removed
removed = 0;
// your score
score = 0;
// number of frames to pass before inserting a new row
interval = 250;
// position of the horizontal x2 multiplier
x2_horiz_pos = 0;
// multiplier bonus
mult = 1;
// is a game over?
game_over = 0;
// turns passed. A turn = a new row to insert
turns = 0;
// 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;
	}
}
// blue background
_root.attachMovie("bg", "bg", _root.getNextHighestDepth());
// x2 bonus
_root.attachMovie("x2_horiz", "x2_horiz", _root.getNextHighestDepth(), {_x:10});
// icons container
_root.createEmptyMovieClip("things", _root.getNextHighestDepth());
// time bar
_root.createEmptyMovieClip("bar", _root.getNextHighestDepth());
// score
_root.attachMovie("score", "score_obj", _root.getNextHighestDepth(), {_x:350, _y:20});
// function that places a line of tiles in the bottom of the field
function place_line() {
	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);
		}
		tile = things.attachMovie("tile", "tile_"+tiles_placed, tiles_placed, {_x:10+32*x, _y:300});
		num = Math.floor(Math.random()*6)+1;
		tile.gotoAndStop(num);
		field[x][0] = tiles_placed;
	}
}
// function to be executed at every frame
_root.onEnterFrame = function() {
	if (!game_over) {
		interval--;
		if (interval == 0) {
			turns++;
			// increasing difficulty
			interval = 250-turns;
			place_line();
			// moving x2 bonus bar
			x2_horiz_pos = Math.floor(Math.random()*10);
			x2_horiz._y = 300-x2_horiz_pos*32;
		}
		// showing time bar
		bar.clear();
		bar.lineStyle(6, 0xfff153);
		bar.moveTo(10, 350);
		bar.lineTo(328, 350);
		bar.lineStyle(4, 0xea8400);
		bar.moveTo(10, 350);
		bar.lineTo(10+318*interval/(250-turns), 350);
	}
};
// function that shifts the column of blocks
function push_blocks(col_number) {
	for (i=9; i>=0; i--) {
		if (field[col_number][i] != 0) {
			if (i != 9) {
				field[col_number][i+1] = field[col_number][i];
				things["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"
				// update: now IT IS game over
				things._alpha = 50;
				_root.attachMovie("ohno", "ohno", _root.getNextHighestDepth(), {_x:100, _y:95});
				game_over = 1;
				// Here I removed some lines to send high scores
			}
		}
	}
}
// when the player clicks...
onMouseDown = function () {
	if (!game_over) {
		// 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 ((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) {
				remove_tiles(x_tile_clicked, y_tile_clicked, 1);
				update_field();
				// calculating score
				for (i=1; i<=removed; i++) {
					score += (i*mult);
				}
				score_obj.score.text = "Score: "+score;
				removed = 0;
				mult = 1;
			}
		}
	}
};
// removing tiles of the same color of the one clicked
function remove_tiles(tx, ty, clicked) {
	// checking tile color according to its current frame
	tile_type = things["tile_"+field[tx][ty]]._currentframe;
	// check if the tile to remove is the one you clicked. In this case, wait to have at least two tiles to remove
	if (!clicked) {
		// icon animation
		things["tile_"+field[tx][ty]].onEnterFrame = function() {
			this._y++;
			this._alpha--;
			if (this._alpha == 0) {
				this.removeMovieClip();
			}
		};
		field[tx][ty] = 0;
		removed++;
		if (ty == x2_horiz_pos) {
			// bonus
			mult = 2;
		}
	}
	if ((field[tx+1][ty] != 0) and (things["tile_"+field[tx+1][ty]]._currentframe == tile_type)) {
		remove_tiles(tx+1, ty);
	}
	if ((field[tx-1][ty] != 0) and (things["tile_"+field[tx-1][ty]]._currentframe == tile_type)) {
		remove_tiles(tx-1, ty);
	}
	if ((field[tx][ty+1] != 0) and (things["tile_"+field[tx][ty+1]]._currentframe == tile_type)) {
		remove_tiles(tx, ty+1);
	}
	if ((field[tx][ty-1] != 0) and (things["tile_"+field[tx][ty-1]]._currentframe == tile_type)) {
		remove_tiles(tx, ty-1);
	}
}
// update 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];
					things["tile_"+field[i][falling+1]]._y += 32;
					field[i][falling+1] = 0;
					falling--;
				}
			}
		}
	}
}

and this is the game

At the moment, if you die you have to reload the page. That’s life… play and don’t forget to look at the highscores to see if your score was awesome or you’re just a rookie….

Read the post about the finished project!!

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