Get the full commented source code of

HTML5 Suika Watermelon Game

Talking about Actionscript 3, Flash and Game development.

In previous part we added some gameplay, now it’s time to add timing.

I recommend you to read Understanding AS3 Timer Class.

I used time for two reasons: first, I want the player to collect as much coins as he can before a certain amount of time (to be defined), second to give the player some king of invulnerability every time he respawns.

To time the game, I created the time.as class with this content:

package {
	import flash.display.Sprite;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
	import flash.text.TextField;
	public class time extends Sprite {
		private var time_passed = new showtime;
		public function time(movieclip) {
			movieclip.addChild(time_passed);
			var time_count:Timer = new Timer(1000);
			time_count.addEventListener(TimerEvent.TIMER, show_time);
			time_count.start();
		}
		public function show_time(event:TimerEvent) {
			time_passed.timetext.text=String(event.target.currentCount);
		}
	}
}

At line 7 showtime is a movieclip with a dynamic text to show time passed.

This class is invoked in the main as3circle.as file at line 6 and line 24, this way:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	public class as3circle extends Sprite {
		public var keyboard_input:keys;
		public var time_limit:time;
		public var circle_hero = new circle;
		public var your_score = new score;
		public var level_wall = new wall;
		public var rotating_bar = new bar;
		public var my_score = 0;
		public var number_of_coins = 4;
		public function as3circle() {
			for (var i=1; i<=number_of_coins; i++) {
				var ingame_coin = new coin;
				addChild(ingame_coin);
			}
			addChild(your_score);
			your_score.y= 250;
			your_score.alpha = 0.2;
			addChild(circle_hero);
			addChild(rotating_bar);
			keyboard_input = new keys(this);
			time_limit = new time(this);
			addChild(level_wall);
			stage.addEventListener(Event.ENTER_FRAME,on_enter_frame);
		}
		public function on_enter_frame(event:Event) {
			if (keyboard_input.is_left()) {
				circle_hero.apply_force(-1,0);
			}
			if (keyboard_input.is_right()) {
				circle_hero.apply_force(1,0);
			}
			if (keyboard_input.is_up()) {
				circle_hero.apply_force(0,-1);
			}
			if (keyboard_input.is_down()) {
				circle_hero.apply_force(0,1);
			}
		}
		public function add_score(points) {
			my_score += points;
			if (my_score<0) {
				my_score = 0;
			}
			your_score.updatescore(my_score);
		}
	}
}

As for the invulnerability, I set the hero's alpha to 0.5 when he respawns at line 40 of circle.as, and in the same file I add 0.01 to the alpha at every frame, this way:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	public class circle extends Sprite {
		private var x_speed:Number;
		private var y_speed:Number;
		private var power:Number;
		private var friction:Number;
		private var gravity:Number;
		public function circle() {
			init();
			addEventListener(Event.ENTER_FRAME, movement);
		}
		private function movement(e:Event) {
			if (alpha<1) {
				alpha+=0.01;
			}
			x+=x_speed;
			y+=y_speed;
			rotation += x_speed;
			y_speed += gravity;
			x_speed *= friction;
			y_speed *= friction;
			if (x>500 || x<0 ||  y >500 || y<0) {
				init();
			}
		}
		public function apply_force(x_force,y_force) {
			x_speed += (x_force*power);
			y_speed += (y_force*power);
		}
		public function init() {
			gravity = 0.1;
			power = 0.66;
			friction = 0.99;
			x_speed = 0;
			y_speed = 0;
			x = 50;
			y = 50;
			alpha=0.5;
		}
	}
}

This should grant almost two seconds of invulnerability at every respawn.

Then, I disabled the collision check with the bar and the coins (but I left the check with walls) when hero's alpha is less than 1.

If you look at coin.as, you will find it at line 18:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	public class coin extends Sprite {
		// variables used in this class
		private var dist_x:int;
		private var dist_y:int;
		private var distance:int;
		// main function
		public function coin() {
			// calling place_coin function.
			// this function randomly places the coin in the field
			place_coin();
			// checking for collisions at every frame
			addEventListener(Event.ENTER_FRAME, check_collisions);
		}
		private function check_collisions(e:Event) {
			if (as3circle(root).circle_hero.alpha ==1) {
				// determining the distance between the hero and the coin
				// notice how do I refer the hero
				dist_x = x - as3circle(root).circle_hero.x;
				dist_y = y - as3circle(root).circle_hero.y;
				distance = dist_x*dist_x+dist_y*dist_y;
				// 1809 = (hero radius + coin radius)^2
				// this way I don't have to perform a square root to distance
				if (distance < 1089) {
					// if the hero picks up a coin, then move it elsewhere, add one point to the score and speed up the bar
					as3circle(root).add_score(1);
					as3circle(root).rotating_bar.adjust_speed(0.2);
					place_coin();
				}
			}
		}
		private function place_coin() {
			x = Math.floor(Math.random()*400)+50;
			y = Math.floor(Math.random()*400)+50;
		}
	}
}

and the same concept is applied to the bar.

Here it is the result:

And this is the source code for you to download. Next step will cover ads and leaderboards integration.

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