Emanuele Feronato

Talking about 100 rounds game, Flash, Php and Tutorials.

I want you all to play 100 ROUNDS, a game created for didactic pourpose.

The game is simple: just enter your name, press “Play” and start moving your mouse clockwise trying to make 100 rounds as fast as you can to enter the highscore table.

I took some ideas from a script found on actionscript.org… but I cannot find it.

For this game I provide the entire source code.

Let’s start with the .fla file.

The movie has two frames, the first one with the main title where you can enter your name and press “Play” to… play, and the second frame where you can find the game itself.

Frame 1

There isn’t so much to say about frame 1, the actionscript is:

playbutton.onRelease = function() {
	gotoAndPlay(2);
};
stop();

Lines 1-3 check if the playbutton (the istance name of the Flash default button component) has been released (that means it has been pressed).

On the textinput component the actionscript is:

on(change){
	_root.playername=this.text;
}

We just want the playername variable to be updated with the textinput content every time it changes.

Frame 2

Frame 2 is a bit more complicated, and the entire script is located in a movieclip called script located in the center of the movie. Important! At the center of the movie (I will explain later).

As you may know if you played the game, it does not start until you press the mouse button.

So the first part is

onClipEvent (mouseDown) {
	if (!playing_game) {
		playing_game = 1;
		rounds = 0;
		quadrant = 3;
		_root.rounds = 0;
		start_time = getTimer();
	}
}

I created a playing_game status, to detect if I am playing or not.

Line 2: if I am not playing…
Line 3: Set the playing_game variable to 1 (now I am playing)
Line 4: Set the completed rounds to 0.
Line 5: This is the “trick” of the game. How can I know when a player makes a complete clockwise round? I simply divided the area into 4 quadrants… the top-left one, the top-right, the bottom-right and the bottom-left. When the mouse is on a quadrant, I will set the quadrant to be touched by the mouse as the next one.
This means you can complete a fake clockwise round even if you make a counter-clockwise round, but it will take more time because you will have to perform three counter-clockwise rounds.
Line 6: Set the completed rounds to 0
Line 7: Saves the time. We need to save it now to calculate how many time you need to complete 100 rounds

Now, we need some script to call when the mouse is moving

onClipEvent (mouseMove) {
	if (playing_game) {
		_root.help = "Complete 100 clockwise rounds";
		x = this._xmouse;
		y = this._ymouse*-1;
		angle = Math.atan(y/x)/(Math.PI/180);
		if (x<0) {
			angle += 180;
		}
		if (x>=0 && y<0) {
			angle += 360;
		}
		_root.arrow._rotation = angle*-1;
		if (quadrant == int(angle/90)) {
			quadrant--;
			if (quadrant == -1) {
				quadrant = 3;
				rounds++;
				_root.rounds = rounds;
				if (rounds == 100) {
					playing_game = 0;
					_root.rounds = ":)";
					running_time = _root.timer_txt;
					player_name = _root.playername;
					_root.help = "Press mouse button to restart";
					getURL("http://www.triquitips.com/100rounds/round_score.php", "round_score", "POST");
				}
			}
		}
		updateAfterEvent();
	}
}

As you can see in line 2, the whole code is executed only if I am playing the game (if I pressed mouse button, as explained before)

Line 3: Change the help content to display new text on the top of the movie
Line 4: Define x as the actual x mouse position
Line 5: Define y as the actual y mouse position and invert it from positive to negative or from negative to positive. You must do it because flash movie coordinates aren't equal to cartesian coordinates (the ones you need).

Note: x and y mouse position aren't relative to the flash movie. We are detecting x and y mouse position relative to the script object located in the center of the movie (so we are detecting x and y mouse position relative to the center of the movie - that's why we must place the object at the center of the movie)

Line 6: Detect the angle of the mouse... a simple formula you can find on every old school book.

Lines 7-12: Adjust angle value to have the right angle value
Line 13: Set the arrow rotation to angle value (it will rotate the arrow according to mouse movement)
Line 14: Remember the quadrant thing? Well, we now have to check if the mouse is in the quadrant it has to be. In that case...
Line 15: Decrease quadrant value. Now you have to move the mouse onto the next quadrant
Line 16: If you just moved mouse onto quadrant 0, you completed a round. So...
Line 17: Restore quadrant to 3
Line 18: Increase rounds value
Line 19: Display rounds performed
Line 20: If you made 100 rounds...
Line 21: Set playing_game to 0. Game over dude...
Line 22: Displays a smiley
Line 23: Save on running_time the amount of time you needed to complete 100 rounds (it will be explained later how to calculate the time)
Line 24: Save in player_name the name you entered into the text input in frame 1
Line 25: Change the help content to inform you have to press mouse button to restart
Line 26: POST movie variables to a php page in round_score iframe (to be explained later)

Line 30: Update the movie

The last thing we need in the flash movie is a timer

onClipEvent (enterFrame) {
	if (playing_game) {
		elapsedTime = getTimer()-start_time;
		elapsedHours = Math.floor(elapsedTime/3600000);
		remaining = elapsedTime-(elapsedHours*3600000);
		elapsedM = Math.floor(remaining/60000);
		remaining = remaining-(elapsedM*60000);
		elapsedS = Math.floor(remaining/1000);
		remaining = remaining-(elapsedS*1000);
		elapsedH = Math.floor(remaining/10);
		if (elapsedHours<10) {
			hours = "0"+elapsedHours.toString();
		} else {
			hours = elapsedHours.toString();
		}
		if (elapsedM<10) {
			minutes = "0"+elapsedM.toString();
		} else {
			minutes = elapsedM.toString();
		}
		if (elapsedS<10) {
			seconds = "0"+elapsedS.toString();
		} else {
			seconds = elapsedS.toString();
		}
		if (elapsedH<10) {
			hundredths = "0"+elapsedH.toString();
		} else {
			hundredths = elapsedH.toString();
		}
		_root.timer_txt = hours+":"+minutes+":"+seconds+":"+hundredths;
	}
}

Very simple and basic, it starts calculating the time only if you are playing the game. Remember the start_time variable? Now we have a elapsedTime value that we calculate as the difference from actual time and start_time. The remaining lines are only math and string operations to give the time a chronometer feel.

And the flash is done!!!

Now, let's spend some time on

getURL("http://www.triquitips.com/100rounds/round_score.php", "round_score", "POST");

As said, we passed some information on a page called round_score.php. Now will need some Php/MySql lines to have the hall of fame.

First, we need a MySql table to store the best times

CREATE TABLE `high_round` (
  `id` int(11) NOT NULL auto_increment,
  `name` text NOT NULL,
  `htime` text NOT NULL,
  `date` timestamp NOT NULL default CURRENT_TIMESTAMP,
  PRIMARY KEY  (`id`)
)

Field explications:
id: the index
name: player name
htime: time to complete 100 rounds
date: actual timestamp

Now, the Php to populate the table and get the best times.

$x$row[name]$row[htime]";
}

?>


	
		
		
		
	

	
	
HALL OF FAME
#
Name
Time

	
	

Lines 3-4: Connection to database
Line 6: if we receive a POST from the movie
Line 7-8: Execute the MySql query yo insert player name and time into the table. We do not need to insert id and date because have automatic values

Line 10-11: Execute the MySql query to select the table ordered by htime (the time you needed to complete 100 rounds) ordered from the smaller to the bigger. Being a time, the smaller, the better.

Line 13-16: Fetch the result and output as table rows.

Remaining lines are just plain html.

Well, that's all folks!!

Take the Flash source code and the Photoshop source of the title graphics.

Give me feeback!! Comment! Comment!