How to create a simple web browser game using PHP
Article Metadata
Contents |
Introduction
The example code in this article shows how to create a simple interactive guessing game on web browser with some html and PHP serverside code.
The Game concept is a slight modification of "paper-rock-scissors" and called "Earth-Wind-Fire". Basically it only follows a simple game rule where in this version of the original, the player is against the computer for a game of chance.
Rules are simple (comparison just only for this game)
Earth wins against Fire, loses to Wind and stalemates against itself Wind wins against Earth, loses to Fire and stalemates against itself Fire wins against Wind, loses to Earth and stalemates against itself
Prerequisites
- Code editor of your choise. You can use Notepad++ which gives syntax highlighting for almost all programing languages.
- Localhost or remote hosting with PHP support. You can download Apache server for hosting.
Example code
The HTML code is very short and it only attempts to run the PHP game script. You can add styling as you wish. The images in the example are located on the server, but you could also hotlink them to some site if that is allowed by it. The game will start again by calling itself explicitly via direct URL in this case. You could use the directory name too where the file is, but in this example full URL is provided.
The file's name are given extension of PHP so that it runs on a PHP supporting server correctly.
game.php
<html>
<head>
<title>PHP based example Game - Earth & Wind & Fire (aka Paper-Scissors-Rock)</title>
</head>
<body>
<center>
<div id="game">
<a href="?item=earth">Earth<br /><img src="images/sand.png" width="135" height="135" alt="Earth"></a><br /><a href="?item=wind">Wind<br /><img src="images/wind.png" width="135" height="135" alt="Wind"></a><br /><a href="?item=fire">Fire<br /><img src="images/fire.png" width="135" height="135" alt="Fire"></a><br /></div>
</center>
</body>
</html>
maingame.php
<?php
function showComponents($items = null)
{
$pictures =
array(
"earth" => '<a href="?item=earth">Earth<br /><img src="images/sand.png" width="135" height="135" alt="Earth"></a><br />',
"wind" => '<a href="?item=wind">Wind<br /><img src="images/wind.png" width="135" height="135" alt="Wind"></a><br />',
"fire" => '<a href="?item=fire">Fire<br /><img src="images/fire.png" width="135" height="135" alt="Fire"></a><br />',
);
if ($items == null) :
foreach( $pictures as $items => $value ):
echo $value;
endforeach;
else:
echo str_replace("?item={$items}", "#", $pictures[$items]);
endif;
}
function game() {
if ( isset($_GET['item']) == TRUE ) :
$pictures = array('earth','wind','fire');
$playerPic = strtolower($_GET['item']);
$computerPic = $pictures[rand(0, 2)];
echo '<div><a href="http://mapswidgets.com/game.php">New game</a></div>';
if (in_array($playerPic, $pictures) == FALSE):
echo "Play as either Earth, Wind or Fire.";
die;
endif;
if ( $playerPic == 'fire' && $computerPic == 'wind' OR
$playerPic == 'earth' && $computerPic == 'fire' OR
$playerPic == 'wind' && $computerPic == 'earth' ):
echo '<h2>You Win!</h2>';
endif;
if ( $computerPic == 'fire' && $playePic == 'wind' OR
$computerPic == 'earth' && $playerPic == 'fire' OR
$computerPic == 'wind' && $playerPic == 'earth' ):
echo '<h2>Computer wins!</h2>';
endif;
if ($playerPic == $computerPic) :
echo '<h2>House wins! =)</h2>';
endif;
showComponents($playerPic);
showComponents($computerPic);
else :
showComponents();
endif;
}
?>
Example output
Note: In the game result page, your image is the one above, computers the one below.
Test live: http://mapswidgets.com/game.php
Tested with
Google Chrome 8.0.552.224 running on Windows XP Professional 32bit
(no comments yet)