So, what do web developers do for fun? Work on programming even outside of work! I was bored, and decided to throw together a very simple game of rock, paper, scissors – aka roshambo – using only PHP and HTML. I actually searched for a tutorial after I made this game, and didn’t see anything quite like it.
This tutorial assumes some basic skill in HTML, and some general programming knowledge. You also need a way to process PHP code on your server. It’s not incredibly complex, it’s step by step, and all code is included for reference. It doesn’t look pretty (I didn’t bother using any css… yet), but it gets the job done.
Now, keep in mind that this is an extremely simple “AI” built in for your computer opponent. Believe it or not, rock, paper, scissors is not a game of chance. There are actual strategies to increase your chance of winning – and there are even many books and websites devoted to explaining these. Here’s a link to the authority on rock, paper, scissors.
Let’s take a moment to discuss rock, paper, scissors, and take some notes about the essentials we’ll need to throw this together as a program.
First, what is the objective of the game? This game involves 2 players, and players have the options of “throwing” either rock, paper, or scissors. Rock beats scissors, paper beats rock, and scissors beats paper – a draw results when players throw the same object. A player can either win, lose, or draw, depending on the throw of the opponent. That gives us the basis to begin programming. I decided to add a few other nifty “features” to the game, such as a count of total games, and a count for wins, losses, and draws. I also included a reset button and indicator of what you and the computer threw in the previous round and whether you won, lost, or drew.
A working model can be found here.
Now for the code!
To begin coding, set up a basic html document – create a new file and call it something like rps.php. Keep in mind that PHP is case sensitive ($throwcount is not the same as $throwCount) – this will come into play when you’re coding it in the near future.
<!DOCTYPE html>
<html>
<head>
<title>Rock Paper Scissors Tutorial</title>
</head>
<body>
</body>
</html>
Ok, now that we’ve done that, let’s build a form inside the body tags that will allow users to pick either rock, papers, or scissors. While we’re here, we’ll add in some HTML to setup display for the total number of wins, losses, draws, if you won the last game, what you threw in the last round and what the computer threw, and total games. I code the reset count button here too.
<form action=”” method=”post” style=””>
<label><input type=”submit” name=”playerthrow” value=”ROCK”></label>
<label><input type=”submit” name=”playerthrow” value=”PAPER”></label>
<label><input type=”submit” name=”playerthrow” value=”SCISSORS”></label>
</form>
<p>CURRENT GAME STATUS: </p>
<p>You threw: </p>
<p>Computer threw: </p>
<p>Total Throws: </p>
<p>Wins: </p>
<p>Losses: </p>
<p>Draws: </p>
<FORM METHOD=”GET” ACTION=”http://www.YOUR-URL.com/rps.php/”>
<INPUT TYPE=”submit” VALUE=”RESET COUNT”>
</FORM>
If the action is set to action=””, using method=”post”, the values will be sent to the same page. We’re going to add in some code to set the initial variables. We use name=”playerthrow” to set the value of the playerthrow to either rock, paper, or scissors. The second form is just a button to reload the page, but it also resets the variables (it makes it think that you are visiting the page for the first time again). Now we’re going to work in some PHP. First, declare the variables to be used. I place this code above the form.
<?php
//set initial variables
$throwcount = 0;
$wincount = 0;
$losscount = 0;
$drawcount = 0;
$winlossdraw = “No games played yet”;
$playerthrow = “N/A”;
$computerthrow = “N/A”;
?>
Now that these variables are set – I place them into the initial page display. Your display area should now look like this:
<p>CURRENT GAME STATUS: <?php echo $winlossdraw; ?></p>
<p>You threw: <?php echo $playerthrow; ?></p>
<p>Computer threw: <?php echo $computerthrow; ?></p>
<p>Total Throws: <?php echo $throwcount; ?></p>
<p>Wins: <?php echo $wincount; ?></p>
<p>Losses: <?php echo $losscount; ?></p>
<p>Draws: <?php echo $drawcount; ?></p>
If you load the page, you should see the rock, paper, scissors buttons, and then zeros for all the counts, N/A in the player and computer throw area, and current game status as “no games played yet”.
So that takes care of when the page is first loaded. Now we need a way to save the counts after the form is submitted and evaluate if you win, lose, or draw. Then we need to display all of that.
I use a rather simple technique to do this. I add hidden fields to the form to save the counts, and tell the page that the form has been sent. I add these to the form. Your new form should look like this:
<form action=”” method=”post” style=””>
<input name=”submitted” type=”hidden” value=”1″ />
<input name=”throwcount” type=”hidden” value=”<?php echo $throwcount; ?>” />
<input name=”wincount” type=”hidden” value=”<?php echo $wincount; ?>” />
<input name=”losscount” type=”hidden” value=”<?php echo $losscount; ?>” />
<input name=”drawcount” type=”hidden” value=”<?php echo $drawcount; ?>” />
<label><input type=”submit” name=”playerthrow” value=”ROCK”></label>
<label><input type=”submit” name=”playerthrow” value=”PAPER”></label>
<label><input type=”submit” name=”playerthrow” value=”SCISSORS”></label>
</form>
I included another hidden field – submitted – so that when we add the next bit of code, the page will see if the form has been submitted, to evaluate the throw and change the variables. I add the following code to the beginning of the document:
if (isset($_POST[‘submitted’])==1) {
//CODE TO EVALUATE THROWS AND CHANGE VARIABLES
} else {
//PREVIOUS CODE FROM BEFORE THIS POINT IN TUTORIAL
}
Ok – so all that’s happening above is an if statement that checks if the form has been submitted. If not, it goes to the initial page setting – all counts are at 0, etc. Look below at the full code to see exactly what is happening there if you are having issues. The commented code – beginning with two slashes ( // ) – is to show you where things are placed. We have already coded everything that needs to happen after the else. Now we’re going to begin working in the first area. Step one here is to get the variables from the form. Here’s that:
//get variables
$throwcount = $_POST[‘throwcount’];
$wincount = $_POST[‘wincount’];
$losscount = $_POST[‘losscount’];
$drawcount = $_POST[‘drawcount’];
$playerthrow = $_POST[‘playerthrow’];
Next, I use a random number from 1-3 to generate whether the computer throws rock, paper, or scissors:
//randomize computer throw
$randomcomp = rand(1,3);
if ($randomcomp == 1) {
$computerthrow = “ROCK”;}
if ($randomcomp == 2) {
$computerthrow = “PAPER”;}
if ($randomcomp == 3) {
$computerthrow = “SCISSORS”;}
Now to evaluate computer throw vs player throw:
//compare throws
if ($computerthrow == $playerthrow) {
$winlossdraw = “DRAW”;
$drawcount++;}
if ($computerthrow == “ROCK” && $playerthrow == “PAPER”) {
$winlossdraw = “WIN”;
$wincount++;}
if ($computerthrow == “PAPER” && $playerthrow == “SCISSORS”) {
$winlossdraw = “WIN”;
$wincount++;}
if ($computerthrow == “SCISSORS” && $playerthrow == “ROCK”) {
$winlossdraw = “WIN”;
$wincount++;}
if ($computerthrow == “SCISSORS” && $playerthrow == “PAPER”) {
$winlossdraw = “LOSS”;
$losscount++;}
if ($computerthrow == “PAPER” && $playerthrow == “ROCK”) {
$winlossdraw = “LOSS”;
$losscount++;}
if ($computerthrow == “ROCK” && $playerthrow == “SCISSORS”) {
$winlossdraw = “LOSS”;
$losscount++;}
$throwcount++;
The ++ after the count variables increments the variable by 1 – adds one. So if you and the computer throw the same thing, the draw count goes up 1, and none of the other statements happen. Similarly, if you throw scissors and the computer throws paper, the win count will go up one, nothing else will happen. After all of these statements, we see the throw count goes up one too. After every throw, no matter what, the total number of games increases, which is why the throw count is always increased.
And that is it. A very simple game of rock, paper, scissors. Below is the code for everything combined. I believe I will continue this tutorial in the future to add some style to the game.
<?php
if (isset($_POST[‘submitted’])==1) {
//get variables
$throwcount = $_POST[‘throwcount’];
$wincount = $_POST[‘wincount’];
$losscount = $_POST[‘losscount’];
$drawcount = $_POST[‘drawcount’];
$playerthrow = $_POST[‘playerthrow’];
//randomize computer throw
$randomcomp = rand(1,3);
if ($randomcomp == 1) {
$computerthrow = “ROCK”;}
if ($randomcomp == 2) {
$computerthrow = “PAPER”;}
if ($randomcomp == 3) {
$computerthrow = “SCISSORS”;}
//compare throws
if ($computerthrow == $playerthrow) {
$winlossdraw = “DRAW”;
$drawcount++;}
if ($computerthrow == “ROCK” && $playerthrow == “PAPER”) {
$winlossdraw = “WIN”;
$wincount++;}
if ($computerthrow == “PAPER” && $playerthrow == “SCISSORS”) {
$winlossdraw = “WIN”;
$wincount++;}
if ($computerthrow == “SCISSORS” && $playerthrow == “ROCK”) {
$winlossdraw = “WIN”;
$wincount++;}
if ($computerthrow == “SCISSORS” && $playerthrow == “PAPER”) {
$winlossdraw = “LOSS”;
$losscount++;}
if ($computerthrow == “PAPER” && $playerthrow == “ROCK”) {
$winlossdraw = “LOSS”;
$losscount++;}
if ($computerthrow == “ROCK” && $playerthrow == “SCISSORS”) {
$winlossdraw = “LOSS”;
$losscount++;}
$throwcount++;
} else {
//set initial variables
$throwcount = 0;
$wincount = 0;
$losscount = 0;
$drawcount = 0;
$winlossdraw = “No games played yet”;
$playerthrow = “N/A”;
$computerthrow = “N/A”;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Rock Paper Scissors Tutorial</title>
</head>
<body>
<form action=”” method=”post” style=””>
<input name=”submitted” type=”hidden” value=”1″ />
<input name=”throwcount” type=”hidden” value=”<?php echo $throwcount; ?>” />
<input name=”wincount” type=”hidden” value=”<?php echo $wincount; ?>” />
<input name=”losscount” type=”hidden” value=”<?php echo $losscount; ?>” />
<input name=”drawcount” type=”hidden” value=”<?php echo $drawcount; ?>” />
<label><input type=”submit” name=”playerthrow” value=”ROCK” id=”throw_1″></label>
<label><input type=”submit” name=”playerthrow” value=”PAPER” id=”throw_2″></label>
<label><input type=”submit” name=”playerthrow” value=”SCISSORS” id=”throw_3″></label>
</form>
<p>CURRENT GAME STATUS: <?php echo $winlossdraw; ?></p>
<p>You threw: <?php echo $playerthrow; ?></p>
<p>Computer threw: <?php echo $computerthrow; ?></p>
<p>Total Throws: <?php echo $throwcount; ?></p>
<p>Wins: <?php echo $wincount; ?></p>
<p>Losses: <?php echo $losscount; ?></p>
<p>Draws: <?php echo $drawcount; ?></p>
<FORM METHOD=”GET” ACTION=”http://www.YOUR-URL.com/rps.php/”>
<INPUT TYPE=”submit” VALUE=”RESET COUNT”>
</FORM>
</body>
</html>