Highscore Table

This forum is currently in read-only mode.
  • This is a basic tutorial for creating a very basic highscore table.

    Requirements:

    • A webserver with PHP/MySQL support
    • Basic PHP and MySQL understanding
    • Basic understanding of how Construct works

    The Construct part:

    I made a .cap file in case my directions might be a little hard to understand so you can check out a working example.

    Download it here

    Create a new Direct-X project and add a variable named "Clicks" with a starting number of zero. Create an Edit Box and set the initial text to something like "Enter your name". Now create two buttons, rename them to "Click" and "Submit", change the text for "Submit" to "Submit" and go to the event sheet editor. Create a new "Always" condition and add an action for the "Click" button to set button text to "round(global('Clicks'))".

    Note: "set button text to "round(global('Clicks'))"" makes the button display the number of times it has been clicked.

    Note: global('<variable name>') is used for global variables.

    Note: round() removes all decimals, this isn't really necessary but just to make sure that the submitted score looks like 1234 and not like 1234,00.

    Create a new event for when the "Click" button is clicked and a new action that adds 1 to the "Clicks" variable. Go back to the layout editor and create a new HTTP object, then return to the event sheet editor.

    Note: The HTTP object enables communication over the internet, at least one-way. I have yet to discover how to create a working both-way connection.

    Create another event for when the other button is clicked and add a condition to check that "Clicks" is not zero. Then add a few actions for the HTTP object. Add two strings, one with the argument name "name" and the argument "EditBox".

    Note: It is very important to not add the quotes to "Editbox" since it will use the contents of it for the variable.

    The other string should have a name of "score" and an argument of "round(global('Clicks'))". The next last action to add is the post request action, set it to submit to your PHP file.

    Mine is "http://localhost/scores.php?submit", you might want to change it later when we've set up the PHP file.

    Lastly, add an action that resets the score when it has been submitted, that way a person can't send their score twice. You might also want to add something that indicates that the score has been submitted, but that's not necessary.

    The PHP Part:

    For this to work you will need a webhost who supports PHP and MySQL, I recommend WAMP if you want to set up your own.

    Create a file called score.php containing:

    Note: This is the file that displays the highscore, and also the file that you should link to in your game.

    <?
    	// mySQL details
    	$host = "localhost";
    	$user = "root";
    	$pass = "";
    	$db = "highscores";
    	
    	// Checks if everything has been submitted
    	if (isset($_POST['name']) && isset($_POST['score'])) {
    		
    		$name = $_POST['name'];
    		$score = $_POST['score'];
    		
    		// Stores the IP adress of the submitted score (in case of cheating)
    		$ip = $_SERVER['REMOTE_ADDR'];
    		
    		// Connects to the database
    		$connection = mysql_connect($host, $user, $pass) or die ("Unable to connect!");
    		mysql_select_db($db) or die ("Databasen kunde inte hittas!");
    		
    		// Submits the info
    		$query = "INSERT INTO highscores(name, score, ip) VALUES('$name', '$score', '$ip')";
    		$result = mysql_query($query);
    		
    		// Closes the connection
    		mysql_close($connection);
    	}
    	
    	// Connects to the database
    	$connection = mysql_connect($host, $user, $pass) or die ("Unable to connect!");
    	mysql_select_db($db) or die ("Database not found!");
    	
    	// Retrieves the info and sorts it
    	$query = "SELECT * FROM highscores ORDER BY score + 0 DESC LIMIT 10";
    	$result = mysql_query($query);
    	$count = 1;
    	
    	// Displays names and score
    	if (mysql_num_rows($result) > 0) {
    		while($row = mysql_fetch_row($result)) {
    			?>
    			<b>#<?= $count ?></b> | Name: <?= $row[1] ?> | Score: <?= $row[2] ?><br />
    			<?
    			$count += 1;
    		}
    	}
    	
    	// Closes the connection
    	mysql_close($connection);
    ?>[/code:147dh0cl]
    
    It won't work just yet, it will need a database to submit to. Open up your favorite MySQL manager and execute the following code:
    
    [code:147dh0cl]CREATE DATABASE `highscores` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
    USE `highscores`;
    
    CREATE TABLE `highscores` (
      `id` int(11) NOT NULL auto_increment,
      `name` varchar(255) NOT NULL default '',
      `score` varchar(255) NOT NULL default '',
      `ip` varchar(255) NOT NULL default '',
      PRIMARY KEY  (`id`)
    ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=24 ;[/code:147dh0cl]
    
    This [i]should[/i] work, It worked when I tested it with the latest version of Construct (v96.3) but if it doesn't work for you I'll happily answer all questions in this thread.
  • I dont know how to do that MySql part in wamp it always gives me error so could someone give me step on step tutorial?

  • Meh i just cant get this workin

  • If you open up phpMyAdmin, (click the white semicircle and select phpMyAdmin) below the logo there's a button that says SQL, click it and copy-paste the code there and it will set up the database for you.

  • I got it almost working i think^^ But Il look more into it when the game is ready but ty for this tutorial!

  • No problem, good luck with the game

  • hmm.. your download link seems to be broken

  • hmm.. your download link seems to be broken

    Fixed, http://www.mediafire.com/?mgywt2lg0g0

    I also noticed that I started the PHP tag with "<?" and not "<?php", this is not valid by default in wamp, so if the script isn't working for you, try changing "<?" to "<?php" in the code.

    Btw, this .cap has been tested with the latest-latest version (v97.5) of Construct

  • Good tutorial but keep in mind that if the user finds out the URL the form is posted to (fairly easy to do) then they can "post" their own high scores, as a hack. But as a foundation for a high score board or a high score board for simple games it's a good introduction tutorial!

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Information that might be useful to others, because it had me stumped for a while:

    The problem I had was how to get the HTML written out by the PHP back into Construct. To cut a long story short, my solution was:

    I used the 'download' object to download the PHP page to a local file ('scores.html'). You can then use the event 'download complete' to detect when it is available, and display it somehow.

    I tried to use the HTML object to display this local file, but despite its name it doesn't actually like fully formed HTML (i.e. a file that begins <html>). It appears to only accept a subset of HTML tags. So to remedy this you change your server side PHP file to only generate the tags recognised by the HTML object, and to not be a 'proper' HTML file.

    Tags I tried that didn't work:

    <P> <br /> <table> <tr> <td> <style>

    So now I have a fully working server-stored highscore table, but one that I can't really change the appearance of much (font size/colour) or put into a table. Better than nothing!

  • To view it with a browser could you insert it into an Iframe?

    Also would it be possible to do this using a flatfile?

  • Good tutorial but keep in mind that if the user finds out the URL the form is posted to (fairly easy to do) then they can "post" their own high scores, as a hack. But as a foundation for a high score board or a high score board for simple games it's a good introduction tutorial!

    Yeah, I know. But that's easily solved by using some kind of encryption technique that would send a random number to the server along with another one that would be based on the old one (if the generated number is 3, and the "encryption" would be something like (4 + X) * X ^ 3 then the second number would be 9261) and the PHP page could then check if the correct function was used.

    To view it with a browser could you insert it into an Iframe?

    Also would it be possible to do this using a flatfile?

    The iframe shouldn't be much harder than

    <iframe name="score">score.php</iframe>[/code:22z75iw3]
    But using flatfiles with PHP is a bit more complicated, though fully possible. I will see if I can write you an example later.
  • [quote:2l0pjuwa]But using flatfiles with PHP is a bit more complicated, though fully possible. I will see if I can write you an example later.

    Great, no hurries tho. Im using one of those "free hosters" with no database, so that would work well with this.

  • Sorry for the long wait, school have kept me busy. I have managed to make a mod on my script that uses a flat file instead of a regular database. I'm not really sure of how well it works since I haven't been able to test it properly with Construct since MediaFire keeps removing my .cap files . Anyways, here's the code:

    <?
       // File details
       $file = "scores.db";
       
       // Loads the database file and sorts it
       $file_read = file($file);
       sort($file_read, SORT_NUMERIC);
       $file_read = array_reverse($file_read);
       
       // Checks if everything has been submitted
       if (isset($_POST['name']) && isset($_POST['score'])) {
          
      	  // Loads the database file
      	  $file_open = fopen($file, 'a');
    	  
          $name = $_POST['name'];
          $score = $_POST['score'];
          
          // Stores the IP adress of the submitted score (in case of cheating)
          $ip = $_SERVER['REMOTE_ADDR'];
          
          // Submits the info
    	  $file_content = "\n" . $score . "\t" . $name . "\t" . $ip;
          fwrite($file_open, $file_content);
          
          // Closes the file
          fclose($file_open);
       }
       
       // Displays names and score
       $count = 0;
       
       foreach($file_read as $line) {
       	  $file_score = explode("\t", $line);
    	  ?>
             <b>#<?= ++$count ?></b> | Name: <?= $file_score[1] ?> | Score: <?= $file_score[0] ?><br />
          <?
       }
    ?>[/code:18ymezra]
    If anyone wants to correct it or upload another working .cap example please feel free to do so.
    Oh, right, the database file is named scores.db (just create a blank text file and rename it)
  • Thanks will give it a try.

    Looks a lot easier than with mysql.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)