-R.P.S (Rock, Paper, Scissors)-
In this tutorial you will learn:
-How to create a simple Rock Paper Scissors game, using HTML + PHP.
-The basics of SESSION's
-How to use a Session to store a user's RPS score
-Intro-
Hey guys
, my name is bam. I've not done too much PHP in my lifetime, but ... let’s see how it goes ?Ok, to start off, you need to create your basic html page, you know the one right?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Rock, Paper, scissors</title> </head> <body> </body> </html>
Ok
... Now, since we are going to be using Session's, you do need to put the Session start function at the very top of our code, like so:<?php session_start();?> <!DOCTYPE ect...
Ok,
Now we have our site set up, Lets start shall we .First off, we need a HTML form to ask the user what he wants to pick (Rock | Paper | Scissors).
This is fairly easy to set up ...
I choose to do the form with "type="image"", so I could put an image of a rock, paper ect ... but you can do it with a dropdown menu, or
radio buttons, whatever you find easiest :
<form action="RPS.php"<!-- *****This should be the same as the file your making this on...Mine is called "RPS.php"***** --> method="post" /> <input type="image" src="Rock.png" alt="Rock" name="user_choice" value="Rock" title="Rock" /> <br /><br /> <input type="image" src="Paper.png" alt="Paper" name="user_choice" value="Paper" title="Paper" /> <br /><br /> <input type="image" src="Scissors.png" alt="Scissors" name="user_choice" value="Scissors" title="Scissors" /> <br /><br /> </form>
*****Input explained:
Ok here's why I did what I did :
-Type="image" - Self explanatory...
-src="Rock/Paper/Scissors.png" - The source of the Rock/Paper/Scissors graphic
-alt="Rock/Paper/Scissors" - In case the image doesn't load ... the user will be given this text as a replacement.
-name="user_choise" - This is what we'll use when we get onto the SESSION part
-value="Rock/Paper/Scissors" - We will use this in the SESSION part ... to check which one the user clicked.
-title="Rock/Paper/Scissors" -If the user is not sure which image is what, they can hover over it, and a little message
will say "Rock/Paper/Scissors".
<br /><br /> -These are to bump the images away from each other.
Now, since this system will work in its self ( in the same file, so the user won’t be linked onto RPS2.php/RPS3.php, it'll all be on RPS.php)
We'll have to put this form in a Else IF (yes I know, I’m working backwards ...).
First let's layout our PHP
<?php
IF(){
// Our RPS code will go here:D
}
ELSE IF(){
// the form will go here.
}
?>
Ok ... now we can slot in our form :
<?php
IF(){
// Our RPS code will go here :D
}
ELSE IF(){
echo '<form action="RPS.php"<!-- *****This should be the same as the file your making this on...Mine is called "RPS.php"***** -->
method="post" />
<input type="image" src="Rock.png" alt="Rock" name="user_choice" value="Rock" title="Rock" /> <br /><br />
<input type="image" src="Paper.png" alt="Paper" name="user_choice" value="Paper" title="Paper" /> <br /><br />
<input type="image" src="Scissors.png" alt="Scissors" name="user_choice" value="Scissors" title="Scissors" /> <br /><br />
</form> ';
}
?>
Now .. i can't just put the form in PHP, i have to "echo" it ...
To echo a code, I’d recommend using " ' " (single)quote tags ... it saves you for having to " \ " (escape) all the quotes.
If you’re new to echoes, this is the basic layout of it
:echo ' /* Your Stuff here
*/ ';*****echo explained:
- Echo - This tells PHP, I’m going to send something to the browser (correct mod's :|?)
- The first ' - This tells the echo, this is what you’re going to echo back.
- Last ' - This tells the echo, you've finished what you want to echo back
- The ; - This tells php, it’s the end of the line.
Ok, moving on ... The actual PHP script for RPS XD...
Ok, in the IF at the start ... we're going to check if the form has been submitted.
To do this ... We'll check if the variable (that we got from a "post") called "user_choice" has a value.
so :
IF($_POST['user_choice']){
}
Now ... what if it DOESN'T have a value?
Then it'll move to the ELSE IF :
The else if, should check if the variable (that we got from a "post") called "user_choice" doesn't have a value.
This is very simple to do ... we just put a "!" at the start.
ELSE IF(!$_POST['user_choice']){
}
Now we need to take the user's choice and put it in a variable (so it's easyer to handle).
So, lets make a variable called "user_choice" equal to the $_POST variable.
$user_choice = $_POST['user_choice'];
Ok, that the User sorted ... now we need to sort out the computer's choice ...
So ... We'll make a array that contains Rock/Paper/Scissors.
Then get a random number, and select that number from the array.
$Choosefrom= array(Rock, Paper, Scissors); $Choice= rand(0,2); $Computer=$Choosefrom[$Choice];
What does this do?
Well ... it make an array with Rock, Paper, Scissors in it ...
then makes up a random number between 0 & 2 (so thats "0, 1 or 2")
then picks that number from the array.
Now, lets tell the user what they picked, and what the computer picked ...
echo 'You picked: '.$user_choice.''; echo '<br />&<br />'; echo 'The computer picked: '. $Computer .'';
Fairly simplistic
?Now we can start on the Win - Lose - Draw ... when does what happen?
Well...:
(Key:
R = Rock
P = Paper
S = Scissors
W = Win
D = Draw
L = Lose
)
R - R =D
R - P =L
R - S =W
P - R =W
P - P =D
P - S =L
S - R =L
S - P =W
S - S =D
(Sorry if that is a little hard to understand
)So... All the 'draws' we can put into one big IF...
"IF user == Computer ... draw"
So let’s write that one up first:
IF($user_choice == $Computer){
}
we can also put what we want it to output ...
IF($user_choice == $Computer){
echo ' Result : Draw +0 ';
}
Now for a little "SESSION" magic
$_SESSION['Score']= (int)$_SESSION['Score'];
What this does, is create a new SESSION variable that stores your "score" ... it will stay with you until you close your browser...
now ... because this one was a draw ... The variable is just = to itself ... (but what does "(int)" do?) ooh .. (int)? ...
Well ... it basically checks if it has a value, and if not ... it gives it "0" as a value ...
... so if you echo your score, but nothing in it ... this will happen :
Your current score is : 0 points
not this :
Your current score is : points
ok ... now we can start putting in Wins and loses ...
For this, we'll use an ELSE IF ..
This is the sort of layout you can use :
ELSE IF($user_choice == '/*Rock/Paper/Scissors*/' && $Computer == '/*Rock/Paper/Scissors*/'){
echo 'Result : Win +1/Lose -1 ';
$_SESSION['Score']= (int)$_SESSION['Score'] +/-1;
}
So ... This is what you should end up with:
IF($user_choice == $Computer){
echo 'Result : Draw +0';
$_SESSION['Score']= (int)$_SESSION['Score'];
}
ELSE IF($user_choice == 'Rock' && $Computer == 'Scissors'){
echo 'Result : Win +1';
$_SESSION['Score']= (int)$_SESSION['Score'] +1;
}
ELSE IF($user_choice == 'Rock' && $Computer == 'Paper'){
echo Result : Lose -1';
$_SESSION['Score']= (int)$_SESSION['Score'] -1;
}
ELSE IF($user_choice == 'Scissors' && $Computer == 'Rock'){
echo Result : Lose -1';
$_SESSION['Score']= (int)$_SESSION['Score'] -1;
}
ELSE IF($user_choice == 'Scissors' && $Computer == 'Paper'){
echo 'Result : Win +1';
$_SESSION['Score']= (int)$_SESSION['Score'] +1;
}
ELSE IF($user_choice == 'Paper' && $Computer == 'Rock'){
echo 'Result : Win +1';
$_SESSION['Score']= (int)$_SESSION['Score'] +1;
}
ELSE IF($user_choice == 'Paper' && $Computer == 'Scissors'){
echo Result : Lose -1';
$_SESSION['Score']= (int)$_SESSION['Score'] -1;
}
The last 2 things you need to do are :
- Show the user there score
- & Let them play again
These are two easy steps :
1.
echo 'You\'re score is currently: '.$_SESSION['Score'].' ';
2.
echo '<a href="RPS.php">Play Again ?</a>';
#1 just shows what’s in the SESSION var "Score"
and #2 Is a standard html link
.So ... lets put it all together shall we
?
<?php
IF($_POST['user_choice']){
$user_choice = $_POST['user_choice'];
$Choosefrom= array(Rock, Paper, Scissors);
$Choice= rand(0,2);
$Computer=$Choosefrom[$Choice];
IF($user_choice == $Computer){
echo 'Result : Draw +0';
$_SESSION['Score']= (int)$_SESSION['Score'];
}
ELSE IF($user_choice == 'Rock' && $Computer == 'Scissors'){
echo 'Result : Win +1';
$_SESSION['Score']= (int)$_SESSION['Score'] +1;
}
ELSE IF($user_choice == 'Rock' && $Computer == 'Paper'){
echo Result : Lose -1';
$_SESSION['Score']= (int)$_SESSION['Score'] -1;
}
ELSE IF($user_choice == 'Scissors' && $Computer == 'Rock'){
echo Result : Lose -1';
$_SESSION['Score']= (int)$_SESSION['Score'] -1;
}
ELSE IF($user_choice == 'Scissors' && $Computer == 'Paper'){
echo 'Result : Win +1';
$_SESSION['Score']= (int)$_SESSION['Score'] +1;
}
ELSE IF($user_choice == 'Paper' && $Computer == 'Rock'){
echo 'Result : Win +1';
$_SESSION['Score']= (int)$_SESSION['Score'] +1;
}
ELSE IF($user_choice == 'Paper' && $Computer == 'Scissors'){
echo Result : Lose -1';
$_SESSION['Score']= (int)$_SESSION['Score'] -1;
}
echo 'You\'re score is currently: '.$_SESSION['Score'].' ';
echo '<a href="RPS.php">Play Again ?</a>';
}
ELSE IF(){
echo '<form action="RPS.php" method="post" />
<input type="image" src="Rock.png" alt="Rock" name="user_choice" value="Rock" title="Rock" /> <br /><br />
<input type="image" src="Paper.png" alt="Paper" name="user_choice" value="Paper" title="Paper" /> <br /><br />
<input type="image" src="Scissors.png" alt="Scissors" name="user_choice" value="Scissors" title="Scissors" /> <br /><br />
</form> ';
}
?>
You can make it pritty using images
... and CSS to lay it out ... Here is my example
:(see attachments)
Hope I helped you
bam
Ooh, and please share your comments
.
MultiQuote
| 