Get the full commented source code of

HTML5 Suika Watermelon Game

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

Do you remember Cirplosion?

Cirplosion

It was quite successful some time ago, and now it’s time to create a game like it.

In this tutorial we’ll design the main engine. When you are going to design a game, or to write whatever script, try to explain yourself what you are about to do.

Let me try to explain with simple words what the does the script do:

* There are some blue orbs running everywhere with a linear motion
* You control a red orb moving it with the mouse
* If you click and hold mouse button, your orb start growing
* While growing, you can’t touch stage border or other orbs, or you will return small
* When you release mouse button you are ready to explode
* Pressing again mouse button will make you explode and kill all orbs you are touching
* Orbs close to explosion will move faster from now on

That’s about 75% of the original game… of course you will need to polish it and add new features.

You have only two objects: player and enemy. It’s up to you to guess their role in the game

Here it is the script:

Mouse.hide();
// the rate you circle grows when you keep mouse button pressed
// the higher the value, the fastest the growth
grow_rate = 2;
// number of enemies on stage
enemies = 15;
// enemy speed...
enemy_speed = 3;
// this is the speed to add to enemy's speed when he comes close to an explosion...
speed_add = 3;
// ... how close? addspeed_range determines it.
addspeed_range = 50;
// enemy creation
for (x=1; x<=enemies; x++) {
	enemy = _root.attachMovie("enemy", "enemy_"+_x, _root.getNextHighestDepth(), {_x:Math.random()*450+25, _y:Math.random()*450+25});
	// angle of movement... 6.28318531 = 2*Math.PI (just faster)
	enemy.angle = Math.random()*6.28318531;
	// the enemy starts with no additional speed
	enemy.addspeed = 0;
	enemy.onEnterFrame = function() {
		// updating enemy position
		this._x += (enemy_speed+this.addspeed)*Math.cos(this.angle);
		this._y += (enemy_speed+this.addspeed)*Math.sin(this.angle);
		// checking if the enemy left the stage in order to make them appear on the other side
		if (this._x>500) {
			this._x -= 500;
		}
		if (this._y>500) {
			this._y -= 500;
		}
		if (this._x<0) {
			this._x += 500;
		}
		if (this._y<0) {
			this._y += 500;
		}
		// calculating the distance between the enemy and the player   
		x_dist = this._x-player._x;
		y_dist = this._y-player._y;
		distance = x_dist*x_dist+y_dist*y_dist;
		// if the enemy is touching the player...
		if (distance<(this._width/2+player._width/2)*(this._width/2+player._width/2)) {
			// if the player is growing then reset the player
			// later he will lose a life
			if (can_grow) {
				reset_player();
			}
			// if the player is exploding, then remove the enemy   
			if (explode) {
				this.removeMovieClip();
			}
		}
		else {// if the enemy is not touching the player but it's close enough to receive speed from the explosion...
			if (distance<(this._width/2+player._width/2+addspeed_range)*(this._width/2+player._width/2+addspeed_range) and explode) {
				// inverting enemy direction
				// later it will be adjusted according to angle between the player and the enemy
				this.angle -= 3.14159265;
				// adding extra speed
				this.addspeed = speed_add;
			}
		}
	};
}
// attaching the player on stage
_root.attachMovie("player","player",_root.getNextHighestDepth());
_root.onEnterFrame = function() {
	// updating player position
	player._x = _xmouse;
	player._y = _ymouse;
	// if the player is growing...
	if (can_grow) {
		// scale up the player
		player._width += grow_rate;
		player._height += grow_rate;
		// if the player touches the edges of the scene then reset it
		if (player._x-player._width/2<0) {
			reset_player();
		}
		if (player._x+player._width/2>500) {
			reset_player();
		}
		if (player._y-player._width/2<0) {
			reset_player();
		}
		if (player._y+player._width/2>500) {
			reset_player();
		}
	}
	// if the player explodes, then reset it 
	if (explode) {
		reset_player();
	}
};
// when the player presses the mouse...
_root.onMouseDown = function() {
	// if the player has not grown, then make it grow
	if (!has_grown) {
		can_grow = true;
	}
	else {// if the player has already grown, make it explode
		explode = true;
	}
};
// when the player releases the mouse...
_root.onMouseUp = function() {
	// if he was growing...
	if (can_grow) {
		// the player has grown, now it's ready to explode
		has_grown = true;
		can_grow = false;
		player._alpha = 50;
	}
};
// simple function to reset player stats
function reset_player() {
	player._alpha = 100;
	player._width = 10;
	player._height = 10;
	explode = false;
	has_grown = false;
	can_grow = false;
}

And this is the result… play this quick Cirplosion version!

Now it’s time to add some new features and polish the game.

How will you do it? Download the source code, send me an example and get featured in the blog!

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