100 ROUNDS, a Flash game with Php/MySql hiscore table and explained source code

September 24, 2006 by Emanuele Feronato
Filed Under Flash, Php, Tutorials •  

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

100 Rounds

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:

PLAIN TEXT
ACTIONSCRIPT:
  1. playbutton.onRelease = function() {
  2.     gotoAndPlay(2);
  3. };
  4. 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:

PLAIN TEXT
ACTIONSCRIPT:
  1. on(change){
  2.     _root.playername=this.text;
  3. }

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

PLAIN TEXT
ACTIONSCRIPT:
  1. onClipEvent (mouseDown) {
  2.     if (!playing_game) {
  3.         playing_game = 1;
  4.         rounds = 0;
  5.         quadrant = 3;
  6.         _root.rounds = 0;
  7.         start_time = getTimer();
  8.     }
  9. }

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

PLAIN TEXT
ACTIONSCRIPT:
  1. onClipEvent (mouseMove) {
  2.     if (playing_game) {
  3.         _root.help = "Complete 100 clockwise rounds";
  4.         x = this._xmouse;
  5.         y = this._ymouse*-1;
  6.         angle = Math.atan(y/x)/(Math.PI/180);
  7.         if (x<0) {
  8.             angle += 180;
  9.         }
  10.         if (x>=0 && y<0) {
  11.             angle += 360;
  12.         }
  13.         _root.arrow._rotation = angle*-1;
  14.         if (quadrant == int(angle/90)) {
  15.             quadrant--;
  16.             if (quadrant == -1) {
  17.                 quadrant = 3;
  18.                 rounds++;
  19.                 _root.rounds = rounds;
  20.                 if (rounds == 100) {
  21.                     playing_game = 0;
  22.                     _root.rounds = ":)";
  23.                     running_time = _root.timer_txt;
  24.                     player_name = _root.playername;
  25.                     _root.help = "Press mouse button to restart";
  26.                     getURL("http://www.triquitips.com/100rounds/round_score.php", "round_score", "POST");
  27.                 }
  28.             }
  29.         }
  30.         updateAfterEvent();
  31.     }
  32. }

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

PLAIN TEXT
ACTIONSCRIPT:
  1. onClipEvent (enterFrame) {
  2.     if (playing_game) {
  3.         elapsedTime = getTimer()-start_time;
  4.         elapsedHours = Math.floor(elapsedTime/3600000);
  5.         remaining = elapsedTime-(elapsedHours*3600000);
  6.         elapsedM = Math.floor(remaining/60000);
  7.         remaining = remaining-(elapsedM*60000);
  8.         elapsedS = Math.floor(remaining/1000);
  9.         remaining = remaining-(elapsedS*1000);
  10.         elapsedH = Math.floor(remaining/10);
  11.         if (elapsedHours<10) {
  12.             hours = "0"+elapsedHours.toString();
  13.         } else {
  14.             hours = elapsedHours.toString();
  15.         }
  16.         if (elapsedM<10) {
  17.             minutes = "0"+elapsedM.toString();
  18.         } else {
  19.             minutes = elapsedM.toString();
  20.         }
  21.         if (elapsedS<10) {
  22.             seconds = "0"+elapsedS.toString();
  23.         } else {
  24.             seconds = elapsedS.toString();
  25.         }
  26.         if (elapsedH<10) {
  27.             hundredths = "0"+elapsedH.toString();
  28.         } else {
  29.             hundredths = elapsedH.toString();
  30.         }
  31.         _root.timer_txt = hours+":"+minutes+":"+seconds+":"+hundredths;
  32.     }
  33. }

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

PLAIN TEXT
MySQL:
  1. CREATE TABLE `high_round` (
  2.   `id` INT(11) NOT NULL AUTO_INCREMENT,
  3.   `name` TEXT NOT NULL,
  4.   `htime` TEXT NOT NULL,
  5.   `DATE` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
  6.   PRIMARY KEY  (`id`)
  7. )

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.

PLAIN TEXT
PHP:
  1. <?
  2.  
  3. $connection = mysql_connect("your_host", "your_login", "your_pass");
  4. $db= mysql_select_db(your_db_name,$connection);
  5.  
  6. if(($_POST['player_name'])and($_POST['running_time'])){
  7.     $sql = "insert into high_round(name,htime) values ('".$_POST['player_name']."','".$_POST['running_time']."')";
  8.     $result = mysql_query($sql) or die($sql);
  9. }
  10. $sql = "select * from high_round order by htime asc";
  11. $result = mysql_query($sql) or die($sql);
  12. $number = mysql_num_rows($result);
  13. for($x=1;$x<=$number;$x++){
  14.     $row = mysql_fetch_array($result);
  15.     $html .="<tr  bgcolor = \"#005eff\"><td>$x</td><td>$row[name]</td><td>$row[htime]</td></tr>";
  16. }
  17.  
  18. ?>
  19. <html>
  20.  
  21.     <head>
  22.         <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  23.         <title>100 ROUNDS:: dicactic flash game by Emanuele Feronato</title>
  24.         <style>
  25.             body{margin:0px;background-color:#0001ff}
  26.             td{font-size:11px;font-family:verdana;color:white;line-height:20px}
  27.         </style>
  28.     </head>
  29.  
  30.     <body>
  31.     <table border = "0" cellspacing = "1" cellpadding = "3" bgcolor = "white"><tr bgcolor = "#971500"><td align = "center" colspan = "3"><strong>HALL OF FAME</strong></td></tr><tr bgcolor = "#0067ff"><td width = "30"><strong>#</strong></td><td width = "150"><strong>Name</strong></td><td><strong>Time</strong></td></tr><?php echo $html; ?></table>
  32.    
  33.     </body>
  34.  
  35. </html>

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!

Other Resources: Stock Control Software - Wasp Barcode ofers stock control software packages to provide small businesses the efficiency of large companies at prices that are affordable.

Improve the blog rating this post
Tell me what do you think about this post. I'll write better and better entries.
1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5 out of 5)
Loading ... Loading ...

» Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

41 Responses to “100 ROUNDS, a Flash game with Php/MySql hiscore table and explained source code”

  1. cruzader on October 5th, 2006 5:01 pm

    Hi Emanuele!

    …you’ve done a great job on this. First I wanna thank you for commenting your code so precicely and as second Iwanna mention that my hand always go weird after 50 seconds or so… really fun!

    thanks and best wishes
    Michael

  2. monsieur f on October 9th, 2006 2:32 pm

    Hello Emmanuele !

    Well, well, well. What do we have here ? A wonderfully commented actionscript to help beginners with such concepts as variables incremntating.

    Thank you so much for your neat and minute explaination.

    Keep going.

    monsieur f

  3. Alex Deeley on October 9th, 2006 5:53 pm

    You only told us the Actionscript not everything,
    my game did not work because you did not explain everything correctly!

  4. Emanuele Feronato on October 9th, 2006 11:29 pm

    Well, tell me why it’s not working

  5. FLASH A-1 on October 16th, 2006 6:01 pm

    Good thanks alot for the great in depth explanation on it. This is great for all begginers

  6. Gavyn on October 19th, 2006 2:31 am

    man,this sucks!!!!!!tell me how to make a game!!

  7. Michael on November 14th, 2006 12:35 am

    How can i open the “script” file? i cannot seem to open it, so i can edit the content of it?! im rather new to Flash, but i have tried for 2 hours now :) Can you hint me? do i need a actionscript editor?

    I have Flash Professionel 8.0 and i opened your fla file, and i just cannot edit the Movie Clip “script”

  8. Anthony Page on November 22nd, 2006 8:19 pm

    The only problem that I have is the sql data query. It keeps giving me an error. ALL I AM TRYING TO DO IS SET UP A HIGHSCORE TABLE!!!! GRRRRR. IT IS SO FRUSTRATING!!!

  9. Anthony Page on November 22nd, 2006 8:20 pm

    BTW try unlocking the layer that has it on it. The layer or clip is possibly locked.

  10. Anthony Page on November 22nd, 2006 8:40 pm

    Where is the source download?

  11. Anthony Page on November 22nd, 2006 8:40 pm

    nvm I just found it.

  12. jesse Patrick on November 24th, 2006 2:39 am

    Well thanks for expalining the script but i still dont understand alot im super new to flash. so do we have to remember the action script, or are we supposed to just find it?

  13. james on November 26th, 2006 4:13 am

    the source file dosent work!!!!!!!

  14. Sean on December 4th, 2006 2:59 am

    I can’t get mine to work. Can you do a turorial with pictures to help explain otherwise it is to hard.

  15. Ikhsan on December 7th, 2006 9:10 am

    Wah thanks berat ya om, dah ada pandangan baru untuk bikin web game yg keren.

    sekali lagi thanks

  16. Ido on December 19th, 2006 12:20 am

    First i realy like your artical

    what the probalam in this line :

    getURL(”http://olgames.byethost9.com/testgames/score.php”, “score”, “POST”);

    score is the name of the frame
    and score php is the name of the score page

    its dont work and i have an eroor page

  17. remco on January 10th, 2007 4:32 pm

    your game is fucked the highscorelist is replaced by google.nl wasn’t me :P

  18. remco on January 10th, 2007 4:35 pm

    you c u didn’t replace any source code thats why people can do it in 00:00:00 because they use a small script in their name to set clock back to 0 before posting to php

  19. anger2headshot on January 28th, 2007 12:06 pm

    Am I allowed to freely use this game?

    What I wish to do is to add a preloader and make the game submit its scores to the SMF Arcade modification.

    It would work as the scores variable SMF Arcade expects would be set with this:
    score = 0-elapsedTime;

  20. Emanuele Feronato on January 28th, 2007 9:54 pm

    Sure you can.
    A link would be appreciated but you are free to use the game anyway.

  21. xfykm on February 6th, 2007 9:08 pm

    yourgame sucks balls

  22. Josh on February 8th, 2007 1:16 am

    Hey I’m new to php - I understand the user name and password part of the script, but what is my host? If I’m using 100mb.com is that my host? or is the name of my database the host? Please help…

  23. ... on February 10th, 2007 7:17 pm

    I can’t seem to find the actionscript to the game itself in the .fla file, and none of the layers are locked, is it hidden in some funky way that I can’t figure out? :)

  24. John on February 14th, 2007 2:15 am

    Thanks,
    Im familiar with PHP. But have never been looking into Flash, its a good tutorial to get me started.

    BTW,
    A cure to the problems with the highscore being set to a page is to secure the username variable before its entered into the database. I belive a user has entered javascript in their username.

  25. John on February 14th, 2007 4:37 am

    And one thing, im using PHP 5, and get method works but not POST method. Are you fmailiar with this problem?

  26. Pey Tudor on February 17th, 2007 9:38 pm

    thanx alot, just been looking everywhere for a script like this, then remembered about this site . . . much appreciated

    :D

  27. Don Thruff on February 19th, 2007 7:40 am

    For my first ever attempt at PHP and MySQL, this was surprisingly cooperative. I didn’t have any trouble getting any of this to work. It’s not exactly the goal I have to use a database in this particular way, but it was a nice affirmation to actually have the scripts all work together without complaints from any of the client programs or the server.

    If you have any tutorials on sending variables to a MySQL database to be retrieved back into Flash, please let me know. This was great. Kudos.

  28. ronald on March 4th, 2007 12:56 am

    can u please make a tutorial with files that u can copy and paste
    and show what to change depending on the game
    so i can put that into my game and at will work
    , cause i dont get anything of this tutorial

  29. James on March 9th, 2007 3:04 am

    Interesting.
    As a beginner I find this very helpful. Glad to have come here at this site.

  30. andrew on March 26th, 2007 3:23 pm

    Hi, first of all thanks Emanuele for all your tuts. They are really wonderful. I´m just starting in flash, and you helped me really so much..

    Have to say i have been for four days looking for a highscore tut. I found two very interesting ones, but could not get them working, i think it was an issue of my server. I´m sure you will know them, Jeroen´s one, EgoAnt´s one and finally i found one only php needing, Glen Rhodes. This last one maybe it is a little obsolete, and maybe not secure, but i made it work, on freehostia.com. (on another server it didnt work fine).

    It seems to me there are too many variables that can make an php script not working correctly.

    So have been trying yours on this page, but it seems it does not work, neither in explorer not firefox. Is this because there are any broken links? i get some strange errors.

    So, many thank to you Emanuele.

  31. Nils on April 11th, 2007 10:06 pm

    Hello Emanuele.
    Where can I find the game so I can upload it to my site?

    The only thing I find is the flash file.

    Nils

  32. Dan on May 28th, 2007 10:37 pm

    Download the flash file then publish it and upload that.

  33. Jake on June 12th, 2007 2:31 am

    I get this in my frame when I test the html

    ____________________________________________________
    “”"Warning: mysql_connect(): Unknown MySQL server host ‘mysql.dayotr.info’ (1) in /home/content/s/i/l/silverneo188/html/100rounds/round_score.php on line 3

    Warning: mysql_select_db(): supplied argument is not a valid MySQL-Link resource in /home/content/s/i/l/silverneo188/html/100rounds/round_score.php on line 4

    Warning: mysql_query(): Can’t connect to local MySQL server through socket ‘/usr/local/mysql-5.0/data/mysql.sock’ (2) in /home/content/s/i/l/silverneo188/html/100rounds/round_score.php on line 11

    Warning: mysql_query(): A link to the server could not be established in /home/content/s/i/l/silverneo188/html/100rounds/round_score.php on line 11″”"
    _________________________________________________________

    whats wrong? what do I put in the “your_host_name” in the php file?

  34. chung on June 12th, 2007 7:21 pm

    can I hide the php page? coz I don’t wanna have a new page open… how do I fix this? :(

  35. Annie on October 1st, 2007 2:49 pm

    Hi,

    I can’t get the game to work. Is there someone who can help me?

  36. PSP Games on October 23rd, 2007 1:57 pm

    Hi, I still can;t find the movie clip called script. Can someone point that out for me?

  37. Thomas on November 2nd, 2007 8:39 am

    sorry, but this does tell you how to make a game. I am afraid that YOU are the person who doesn’t know what to do. sharpen up, my friend!

  38. Mike K on May 23rd, 2008 6:32 am

    Thanks for the great tutorial. I do a little bit of flash for fun. i’m pretty decent with creating graphics and animations, but this is the first time i’m making an actual game. Thanks alot!

  39. Petri on June 3rd, 2008 9:43 pm

    “Yeah, little bobby tables we call him”

    Is there a good reason why you don’t check the data that’s coming in for SQL Injection hacks?

Leave a Reply




Trackbacks

  1. Movie Database on December 15th, 2006 4:23 am

    Markus

    It was quite useful reading, found some interesting details about this topic. Thanks.

  2. iPod Downloads on December 16th, 2006 7:40 am

    movie

    Nice comments. Well, time to take a break and go download some nice