Montag, 14. Juni 2010

Browsergame Tutorial - Part II

Browsergame Tutorial - Part II
The Basics

Ready for part two? After some theorie and praising the gods in part one, we'll now start with some code for our game.

First of all, we should separate the design from the game code. Cause a tutorial is always limited in space and time, I choose a simple way to do this. Let's create a php script with simple HTML output as game template and save it as template.php in a subfolder called template. We'll add some designs later. It could look like this:

template.php
<?PHP
    echo("
    <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">
    <html>
    <head>
    <meta http-equiv=\"content-type\" content=\"text/html; charset=ISO-8859-1\">
    <meta http-equiv=\"Content-Style-Type\" content=\"text/css\">
    <meta name=\"keywords\"       content=\"Browsergame, Browsergame Tutorial, Hell on Roads\">
    <meta name=\"author\"         content=\"PlanetZapp\">
    <link rel=\"stylesheet\" type=\"text/css\" href=\"./template/gamestyle.css\">
    <title>Hell on Roads</title>
    </head>
    
    <body>
    <h1>Hell on Roads</h1>
    
        $content
        
    </body>
    </html>
    ");
?>

Don't forget a variable for our game output. I called it $content.
Now create a simple stylesheed and save it as named in the template.php:

gamestyle.css
h1 { font-size:19pt; margin-bottom:6px; }
h2 { font-size:16pt; margin-bottom:5px; }
h3 { font-size:14pt; margin-bottom:0px;}
h4 { font-size:12pt; margin-bottom:0px;}
li.normal {list-style-type:disc;}
pre.normal { color:#000000; }
body { color: #ffffff; background-color: #000000; }
body,div,h1,h2,h3,h4,p,ul,ol,li,dl,dt,dd,td,th,address,blockquote { font-family: Verdana,Arial,Helvetica,sans-serif; }
body,p,ul,ol,li,dl,dt,dd,td,th,address,blockquote { font-size:8pt;}
div { margin:0px; padding:0px;}
a {    color:#e59c40; font-weight:bold; text-decoration:none;}
a:link { color:#e59c40;    font-weight:bold; text-decoration:none;}
a:hover { color:#ababab; font-weight:bold; text-decoration:underline;}
a:visited {}

As good things are three, we need to add an index.php, for our first test. Don't forget to include your template at the end of the script. I use "require", but you can also use "incude":

index.php
<?PHP

    $content = "The new browsergame "Hell on Roads" in developement";
    
    require"./template/template.php";

?>

Test your output by calling the index.php in your browser (for local webservers http://127.0.0.1/mygameproject/index.php). It should look look this:

http://www.planetzapp.de/planetzapp/browsergame_tutorial/part02/index.php


Now it's time to bring in our MySQL database. To create the database, use any MySQL query tool. The most simple way to create, view and manipulate your database is phpmyadmin.
Create a new database called hellonroads (or whatever you like) and add a user that can SELECT, UPDATE, DELETE and INSERT in this database.
Here is the SQL statement to create the database. Execute it in the SQL-query window:
CREATE DATABASE `hellonroads` ;

To connect our game to the database, we need a script to build the connection. This could be done with this simple code:

mysqlconnect.php
<?PHP
    $mysqllink = mysql_connect("{$dbhost}", "{$dbuser}", "{$dbuserpw}")
    or die("Connection failed: " . mysql_error());
    
    mysql_select_db("{$db}") or die("Database selection failed");
?>

You can remove the die-statements later, but during developement it's good for debug.
As you see, I use variables for the database, host, user and password. This makes it easy to switch between differend databases, for example between the developement database and the public database.
Now we need to define and set our variables in a script called settings.php:

settings.php
<?PHP
    $dbhost   = 'localhost';      # your host where the database is located
    $db       = 'hellonroads';    # your database name
    $dbuser   = 'reader';# a database user that can select, insert, update, delete
    $dbuserpw = 'mypassword';    # the user's password
?>

I saved both scripts in the template folder, but it's up to you where to store it.
At last we must add both scripts to our index.php (note that the settings must be included before the database connect to have our variables filled) and close the database connection at the end of the script:

index.php
<?PHP

    require"./template/settings.php";
    require"./template/mysqlconnect.php";
    
    $content = "The new browsergame <b>Hell on Roads</b> in developement";
    
    require"./template/template.php";

    mysql_close($mysqllink);

?>

Well, we have separated script and template and build our database connection. I guess we are prepared for part three.
Eingestellt von um

Keine Kommentare:

Kommentar veröffentlichen

Abonnieren Kommentare zum Post (Atom)