PHP Tutorials

Welcome to Dream.In.Code
	Become an Expert! Join 307,215 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,581 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

Rock Paper Scissors Game in PHP

Rock Paper Scissors Game in PHP, :D

Options

bammurdo

8 Oct, 2009 - 01:19 PM

Post #1

-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?

CODE

<!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>

... 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:

CODE

<?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 :

CODE

<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>

*****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

CODE

<?php

IF(){
// Our RPS code will go here:D
}
ELSE IF(){
// the form will go here.
}

?>

Ok ... now we can slot in our form :

CODE

<?php

IF(){
// Our RPS code will go here :D
}
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> ';
}
?>

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 :

CODE

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.

CODE

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.

CODE

$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.

CODE

$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 ...

CODE

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:

CODE

IF($user_choice == $Computer){

}

we can also put what we want it to output ...

CODE

    IF($user_choice == $Computer){
    echo ' Result : Draw +0 ';
    }

Now for a little "SESSION" magic

CODE

$_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 :

CODE

Your current score is : 0 points

not this :

CODE

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 :

CODE

    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:

CODE

    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.

CODE

echo 'You\'re score is currently: '.$_SESSION['Score'].' ';

CODE

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

CODE

<?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)