1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. To chat with the GameOgre community, you need to have at least 100 posts. Once you have the 100 posts, post at Become A New Ogre
    Dismiss Notice
Cookies Posts Required to Access Chat

PHP Game Development Course

Discussion in 'Online Game Development' started by quinn, Aug 11, 2010.

Thread Status:
Not open for further replies.
Page 1 of 2
  1. quinn

    quinn Starcatcher Ogre Veteran

    Messages:
    3,811
    Likes Received:
    386
    Trophy Points:
    83
    Credit:
    13,397.09
    Hello fellow Ogres!
    If you would be interested in learning how to program browser based games using PHP, over a course that is a few weeks long, please post in this thread. If there are at least 3 or 4 people interested, I shall teach you all how to do some awesome stuff!

    Please post here if you are interested.
    I already have ec2, and possibly Noche (confirmation on Noche?).
     
    quinn, Aug 11, 2010
    quinn, Aug 11, 2010
    #1
  2. Noche

    Noche Don't feed the troll! Ogre Veteran

    Messages:
    4,311
    Likes Received:
    150
    Trophy Points:
    0
    Credit:
    2,796.64
    Confirmed. ;)
     
    Noche, Aug 11, 2010
    Noche, Aug 11, 2010
    #2
  3. quinn

    quinn Starcatcher Ogre Veteran

    Messages:
    3,811
    Likes Received:
    386
    Trophy Points:
    83
    Credit:
    13,397.09
    Thank you. Ec2 is confirmed in chat. One or two more and I shall start setting up. Once I do that we will start (so more than 4 people can sign up.)
     
    quinn, Aug 11, 2010
    quinn, Aug 11, 2010
    #3
  4. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    Unfortunately I already know php, but thanks for the offer ;)
     
    shugo, Aug 13, 2010
    shugo, Aug 13, 2010
    #4
  5. quinn

    quinn Starcatcher Ogre Veteran

    Messages:
    3,811
    Likes Received:
    386
    Trophy Points:
    83
    Credit:
    13,397.09
    Hah, that's quite alright. :)
    Surreee anyone else doesn't want to?
     
    quinn, Aug 13, 2010
    quinn, Aug 13, 2010
    #5
  6. quinn

    quinn Starcatcher Ogre Veteran

    Messages:
    3,811
    Likes Received:
    386
    Trophy Points:
    83
    Credit:
    13,397.09
    On hold till my real computer works again..feel free to signup here still.
     
    quinn, Aug 16, 2010
    quinn, Aug 16, 2010
    #6
  7. Noche

    Noche Don't feed the troll! Ogre Veteran

    Messages:
    4,311
    Likes Received:
    150
    Trophy Points:
    0
    Credit:
    2,796.64
    I asked Epic if he was interested at all, but he didn't think he'll be able to put in the time once school starts for him.
     
    Noche, Aug 16, 2010
    Noche, Aug 16, 2010
    #7
  8. Joker

    Joker Ogre Hall of Fame Ogre Veteran

    Messages:
    11,331
    Likes Received:
    468
    Trophy Points:
    83
    Credit:
    10,336.17
    How will the course work? You will put everything in this thread?
     
    Joker, Aug 21, 2010
    Joker, Aug 21, 2010
    #8
  9. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    Putting all into one thread can work as long as the scripts aren't too big. Just wrap the code tags around it and use a lot of comments.
     
    shugo, Aug 24, 2010
    shugo, Aug 24, 2010
    #9
  10. Noche

    Noche Don't feed the troll! Ogre Veteran

    Messages:
    4,311
    Likes Received:
    150
    Trophy Points:
    0
    Credit:
    2,796.64
    Joker! Sign on! =D
     
    Noche, Aug 24, 2010
    Noche, Aug 24, 2010
    #10
  11. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    I think the best way to go about it is to take it step by step and show the code of a really simple game, like I dunno "rock, paper, cissors"

    the major steps would be explaining how to:
    1) create an index page
    2) upload your pages on a host server
    3) create a registration page
    4) create a login page and portal
    5) make an sql database and tables
    6) make a rock, paper, cissors page (the actual game page)
    7) create a page that shows scores and statistics

    for each major step you can go through the lines one by one and explain why and how you do things
     
    Last edited by a moderator: Aug 25, 2010
    shugo, Aug 25, 2010
    shugo, Aug 25, 2010
    #11
  12. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    the main things you should be able to do, after the course, are:

    1) how to make a php file
    2) how to upload a file
    3) how to make a html form *html
    4) how to get external variables *php/javascript
    5) how to sanitize and filter external variables *php/javascript
    6) how to make an sql connection and select a database *php/sql
    7) how to get database variables *php/sql
    8) how to calculate and perform functions on all the variables *php
    9) how to display data *html/css

    I think those are the basics, that you need to know, if you want to make your own browser game
     
    Last edited by a moderator: Aug 25, 2010
    shugo, Aug 25, 2010
    shugo, Aug 25, 2010
    #12
  13. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    I like the idea of a course, so pending on quinn's return, maybe this will get things started

    LESSON 1 (HOW TO MAKE A HTML PAGE)

    -step 1 open notepad
    -step 2 write the following lines of code in notepad:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Rock Paper Cissors</TITLE>
<META NAME="description" CONTENT="rock paper cissors"/>
<META NAME="keywords" CONTENT="rock, paper, cissors"/>
</HEAD>
<BODY>
<H1>Rock Paper Cissors</H1>
<P>Welcome to rock, paper &amp; cissors! This really simple game was developed as result of a basic course explaining people how to use php to create a browser based game.
<BR><A HREF="register.php">register</A>
<BR><A HREF="login.php">login</A>
</BODY>
</HTML>
    -step 3 save it as a textfile and give it the name index. This will be your main page of your website.
    -step 4 go to map options in windows and uncheck "hide extensions of known files" and click apply
    -step 5 go to the map where you saved your textfile
    -step 6 rename the file and change the extension of the textfile into .htm or .html (your choice, either one is good)

    congratulations you have completed your first lesson
     
    Last edited by a moderator: Aug 25, 2010
    shugo, Aug 25, 2010
    shugo, Aug 25, 2010
    #13
  14. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    LESSON 1 code explained

    html works with things called tags, there are 3 basic kinds of tags: open tags, closed tags, and tags that can be both open and closed tags. An opening tag is this <>, while a closing tag is this </> the letters in the tag is what makes the html tag a certain kind of tag

    the first line contains a doctype tag. This tag allows the browser (like Internet Explorer, or Firefox) of your visitor to know what kind of html page it is opening. This can be important because sometimes pages may contain references to css stylesheets which will not function properly without the doctype setting. Other reasons can be that the page is a frameset and so the doctype allows the browser to recognise the page as such.

    the second line contains the html opening tag, this together with the last line, which contains the html closing tag is what makes the file a html page

    a html page has 2 basic parts, called the "head" and the "body", both of these parts need to be in a html file. Both the head and the body are closed tags, meaning they both have an opening and a closing tag, to let the browser know where the head ends and the body starts. The head always goes before the body!

    The head contains things like the title of the page, references to external stylesheets and external javascript files, internal css text and javascripts and meta tags.

    The title tag on line 4 is what gives the page its name. In this example the title is "Rock Paper Cissors". While the title of the page you are currently reading is called "Php Game Development Course - Page 2 Gameogre.com ".... and so on . Giving your page a recognisable title helps the visitor, by for instance letting him or her find the page, if he or she has opened more than one tabpage in his or her browser.

    Lines 5 and 6 contain meta tags. There are many kinds of meta tags and not all are required, in fact meta tags, most of the time are not really important. However for the index page, the description and the keywords meta tag may be vital. Search engines like google use these meta tags for instance to display search results according to what is found in the keywords meta tag for instance. So if we put in the keywords: rock, paper and cissors; and upload our page as the index page of our website to the host's server, then google bot will eventually fetch the page and will show our index page in the list of search results when a user of google types in the words: rock paper cissors.

    Line 9 contains a headline tag. There are six kinds of headline tags h1, h2 till 6, where 1 is the biggest and 6 the smallest.

    Line 10 has a paragraph tag and some words. This is how you open a paragraph. The line also has a small piece of html code called a html entity. This particular code lets the browser display an ampersand, which is a latin form for the word "and". You can also use these kinds of html code (entities) to display things like the dollar, or euro sign. Normally speaking things like the dollar sign will not display in some browsers, if you simply write the dollar sign, so that means often the html code is required instead, to make the browser recognise it as a dollar sign.

    Line 11 contains a linebreak (denoted by BR) and a link. A link always has an opening anchor tag (denoted by A) and a closing tag. The stuff in between the opening and closing anchor tags is what becomes the link on the page when it is displayed in the browser. The HREF is what contains the url (in between "") and is what leads the browser to the page when you click on the link. Clicking on the first link will lead to the registration page.
     
    Last edited by a moderator: Aug 28, 2010
    shugo, Aug 25, 2010
    shugo, Aug 25, 2010
    #14
  15. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    LESSON 2 (How to make a Php page)

    -step 1 open notepad
    -step 2 write the following lines of code in notepad:


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Rock Paper Cissors</TITLE>
<META NAME="description" CONTENT="registration"/>
<META NAME="keywords" CONTENT="registration"/>
</HEAD>
<BODY>
<?php

?>
</BODY>
</HTML>
    -step 3 save it as a textfile and give it the name register. This will be your registration page of your website.
    -step 4 go to map options in windows and uncheck "hide extensions of known files" and click apply (if you have not done so already)
    -step 5 go to the map where you saved your textfile
    -step 6 rename the file and change the extension of the textfile into .php

    congratulations you have completed your second lesson
     
    Last edited by a moderator: Aug 25, 2010
    shugo, Aug 25, 2010
    shugo, Aug 25, 2010
    #15
  16. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    LESSON 2 code explained

    I will not go into much detail, about the html code, as this was explained in lesson 1, but we see 2 new tags.

    The first is the opening tag:

    Code:
    <?php
    the second is the closing tag:

    Code:
    ?>
    This lets the both the browser and the server (remember php is a serverside language) know when a php script starts and stops.

    You can place the php tags anywhere you like as long as the tags doesn't enclose html tags (unless you echo or print html code; we will explain that in later lessons). You can write as many php tags as you like, so you can start and stop a php script more than once. The php script will continue where it was stopped previously.

    Most of the time the php tags will be in the "body" section of the html code inside the php file. Sometimes it may be necessary to start the file with a php script, like for instance when you want to set cookies, because cookies need to be set before anything else happens, otherwise you are unable to set a cookie.

    Note that in this example there is nothing in between the php tags. We will fill this space in the next lessons.


    thus endeth the lesson 2....

    ...tune in next time, when we will explain how to make an sql database and sql tables and how to create a registration page
     
    Last edited by a moderator: Aug 26, 2010
    shugo, Aug 25, 2010
    shugo, Aug 25, 2010
    #16
  17. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    LESSON 3 (How to create an sql database)

    In lesson 2 we were left with an uncompleted registration, we will continue to work on that in lesson 4, but first we will make a new php file, like we did in lesson 2. This new php file we will use to create our database and we will fill this database with 2 tables. Most hosts have phpadmin these days, which allows you to create your very own databases and tables. In lesson 3 we will do the proces manually, despite the fact that this is usually done in phpadmin. The reason that we are doing it like this, is because this way you learn how the process actually works, this will be useful to you in later lessons.

    Lets write the file shall we and then we will explain later which piece of code does what.

    Code:
    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<HTML> 
<HEAD> 
<TITLE>Rock Paper Cissors</TITLE> 
<META NAME="description" CONTENT="rock paper cissors"/> 
<META NAME="keywords" CONTENT="rock, paper, cissors"/> 
</HEAD> 
<BODY> 
<?php 
$con = mysql_connect("localhost", "username", "password");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
else {

if (mysql_query("CREATE DATABASE database1",$con))
{
echo "Database created";

mysql_select_db("database1", $con);
$sqlreg = "CREATE TABLE users
(
userid int NOT NULL AUTO_INCREMENT,
PRIMARY KEY(userid),
username varchar(20) NOT NULL,
password varchar(12) NOT NULL,
rpc varchar(20) NOT NULL,
alive int(1) DEFAULT '1'
)";
mysql_query($sqlreg,$con);

mysql_select_db("database1", $con);
$sqlkill = "CREATE TABLE kills
(
killid int NOT NULL AUTO_INCREMENT,
PRIMARY KEY(killid),
killer varchar(20) NOT NULL,
victim varchar(20) NOT NULL
)";
mysql_query($sqlkill,$con);

mysql_close($con);
}
else
{
echo "Error creating database: " . mysql_error();
}
}
?> 
</BODY> 
</HTML>
     
    Last edited by a moderator: Aug 26, 2010
    shugo, Aug 26, 2010
    shugo, Aug 26, 2010
    #17
  18. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    LESSON 3 example explained

    OK lets go through the lines of the php script, one by one. For those who already know a bit of php, I think you'll notice that this page may seem a little unusual to you, this is because while it is a php script, it actually also contains some sql commands. Php is a language that is perfectly capable of performing sql queries and sql connections. Since we are performing sql queries it isn't odd to find some sql in our php script.

    In the first line of our php script,

    Code:
    $con = mysql_connect("localhost", "username", "password");
    we are doing 2 things, we are setting a variable called $con and with this php variable we make an sql connection. The word localhost means that we make the connection on the server where the file is located. The username is where we put our username, and password is where we put our password, which was provided to us by our host. We could also make a connection with a distant host, but in this case we will not do so.

    So when we do this, we are assuming a few things: (1) that phpadmin and sql are actually installed on the server and (2) that we have uploaded this file onto that server. Once we open the file we've just uploaded on the server with our browser, then the browser will trigger the server to perform the script and thus establish the connection. With the connection established, a database and 2 tables will be created. With these actions completed we can safely remove the file after we have opened it, because we will only have to do this once.

    We don't need to set a variable, but in this case we will, because we need the connection more than once and rather then reselecting the connection we simply fetch the variable, which is a lot easier and less time consuming.

    The second line contains the first part of an if-else construction. We can make as many "if", "if-else" or "if-elseif-else" constructions as we like and we can put an if-else construction within other if-else constructions, as we done so in this script.

    The "if" is what we call a "statement". In this statement we check if the connection was NOT established. IF the connection is not established then clearly something is wrong and we let the connection die (wrong things like incorrect passwords, server busy, server down and so on). The bit in between () is what we call the "condition", in this case the condition stands for NOT $con , as the ! stands for not. The thing in between {} is the action performed if the condition in the statement is met.

    For now we assume that all is fine, so clearly if the connection is established, then we meet the "condition" of the "else" "statement". Remember this is basic logic! Think about it, if we say that the connection is established and the if statement says it is not established, then clearly the if statement is false, which ultimately means that the else statement must be true.

    Now we move on to line 8:

    Code:
    if (mysql_query("CREATE DATABASE database1",$con))
    We are doing several things here: first we make an if statement, next we open a condition with (, then we make an sql command, namely mysql_query, followed by the opening of the sql command, next we perform an sql command create database, with the connection we just established, finally we close of the sql query and we close of the condition. The database in this example we call database1. Database1 is the database that will contain our 2 tables

    If we can create a database, then we will let this be known to ourselves, with the following line:

    Code:
    echo "Database created";
    echo is how you display stuff. with the php command echo you can let the server write html code. This can be anything from text, tables, divisions etcetera.

    In this example the echo will display the words "database created". If for some reason we failed to create a database in line 8, then the else statement will be met and we get the message "Error creating database" instead.

    Lets move on to the tables shall we. Before we create a table we must select a database into which we create the table. Because in this example we only have one database, namely database1, we will select database1 with the command:

    Code:
    mysql_select_db("database1", $con);
    the next line is where we create our first table, in our example we call this table "users". The users table has 5 columns, namely: userID, username, password, rpc and alive. The first column is our primary key, this primary key is useful if we want to search the table for whatever reason. The userID column is automatically incremented. This is very useful, because we want to use this table for registration purposes. Here is how auto-increment works: suppose quinn registers for our game rock paper cissors, then he will be the first user who will be inserted in the users table, hence he will get a userID 1, now suppose ec2 registers, then he will get the userID number 2, next suppose noche signs up, then noche will get userID 3. This number is automatically incremented as you register, so we don't need to have a php script this way which fetches the highest number in the table and increases it by 1 each time someone registers. Now you are probably wondering why is this so important and useful? Suppose we don't have a userID, but only a username, how are we able to find the right quinn, if 2 persons called quinn register. The answer is we can't. Since our quinn is a unique person we will therefore have to give him a unique number and auto-increment does this. Assigning a number to correspond to a username is also useful if we want to make searches on the data. We will explain why this is so useful in later lessons.

    the next column is the username column, the word "varchar" lets the column contain letters and numbers, the number 20 between (), limits the length of the username to 20 characters. The password column will contain the registered password. The maximum length of a password is of course 12 characters as you can see. Observant readers will notice by now that the userID does not contain a limit, there is a good reason for that. Suppose we set the limit to 4, then a maximum of 9999 users will be able to register. We don't want that, so we set no limit, hence we can have an unlimited amount of players.

    The "rpc" column will contain the word "rock", or the word "paper", or the word "cissors". The "alive" column contains 1 number, because the word "int" stands for integer, an integer is always a number. We limit this integer to 1 digit. This last column will only contain the numbers 0 or 1. Naturally these numbers have a meaning. 0 will stand for dead, while 1 will stand for alive. The default number is set to 1. There is an obvious reason for that, any person that registers will of course have to start out as being alive. You can't play no more if you're dead.

    finally we close the connection and we prepare the else statement

    OK that's it for lesson 3....

    in lesson 4 we will finish our register page
     
    Last edited by a moderator: Sep 9, 2010
    shugo, Aug 26, 2010
    shugo, Aug 26, 2010
    #18
  19. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    LESSON 4 how to create a registration page

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<HTML> 
<HEAD>
 <TITLE>Rock Paper Cissors</TITLE>
 <META NAME="description" CONTENT="registration"/> 
<META NAME="keywords" CONTENT="registration"/> 
</HEAD> 
<BODY> 
<?php 

//CONNECTION
$con = mysql_connect("localhost","username","password");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
  
//GAME DATABASE
mysql_select_db("database1", $con);


if (isset($_POST["password"]) && isset($_POST["username"]) && isset($_POST["rpc"])){


}
else {
echo "<FORM action='register.php' method='POST'>
<input type='text' size='20' maxlength='20' name='username'>
<input type='password' size='12' maxlength='12' name='password'>
<SELECT name='rpc'>
<option value='rock'>rock</option>
<option value='paper'>paper</option>
<option value='cissors'>cissors</option>
</SELECT>
<INPUT type='Submit' value='register'>
</FORM>";
}

?> 
</BODY> 
</HTML>
     
    Last edited by a moderator: Aug 26, 2010
    shugo, Aug 26, 2010
    shugo, Aug 26, 2010
    #19
  20. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,378.42
    example explained (stage 1)

    I will explain the registration process in two stages, first I'll explain the registration form and then we will move on to the actual registration and filtering of external variables. In stage 1 we will start off at the "else" statement, while stage 2 will explain what happens at the "if" statement.

    The statement checks if someone has filled in the registration form and pressed register. If the person has not done that yet, then we are at the else statement, which is our stage 1 and is what contains the actual registration form.

    Code:
    <FORM action='register.php' method='POST'>
    The registration form sends the external variables to the same page, this is why we have an if-else construction. We could have send these to another page, but this is better. We use the method POST, because this is much more secure than the GET method. The reason is that with the GET method the variables become visible in the url, since we don't want a third person who just happens to glance over the player's shoulder as he or she registers to see the password, it is better to use the POST method, because that way the variables will not be shown in the url. This is also the reason why we use input type = password at the password input field, because this way the password will be shown as ********** instead of for example mypassword. As you'll notice we have set a limit on the length of the password and username, we don't want it to be longer than the limit in the sql table (see lesson 3). We can't rely on this for safety though, so we will have to filter this at a later stage (stage 2).

    With select we make a small dropdown list, where the player can choose to be rock, paper, or cissors.

    OK now that is done we move on to stage 2

    stage 2 will be the second most difficult bit of the entire game creation process, so if you can understand this part of lesson 4, then you are well on your way to become a good browser based game creator.

    To make things more intelligable, I'll use php comments /**/ (multiple line comments and // (single line comments)

    php will not do anything with comments and instead will ignore these things in the file
     
    Last edited by a moderator: Aug 26, 2010
    shugo, Aug 26, 2010
    shugo, Aug 26, 2010
    #20
Page 1 of 2
Thread Status:
Not open for further replies.

Share This Page