×
Namespaces

Variants
Actions
Revision as of 04:47, 19 October 2011 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

How to create a simple web browser game using PHP

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: Maveric (25 Dec 2010)
Last edited: hamishwillee (19 Oct 2011)

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

This page was last modified on 19 October 2011, at 04:47.
582 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×