Pixel2Life Forum > [php] - [twister!]

Full Version: [php] - [twister!] - [adam123]

Pixel2Life Forum > Member Tutorials and Requests > Forum Tutorial Archives > PHP Tutorials

adam123

May 4 2005, 01:57 PM

Ok, today we're going to make online twister in PHP. Yes, completely pointless, but it allows you to play with only one/two people.

Skill needed: Beginner - Intermediate

Requirements: A server/computer with PHP 4.x.x

Live example: Twister

=========================================================

Let's get the ball rolling

We're going to start with a simple HTML page that allows the user to choose the time in between colour changes.

Open up your text editor and create a new document. As with all of your other HTML pages, start with this:

CODE

<html>
<head>
<title>Speed Selector</title>
</head>

<body>
Choose the speed you want the spinner to go at: <br /><br />

Extremely simple.
Now let's get to the complicated part, forms

Underneath the previous code, put:

CODE

A simple form that creates a drop down list with time choices.

CODE

</body>
</html>

Finish your page and save it as index.html

=========================================================

Now onto the PHP.

Create a new page, save it as twist.php and begin with this:

CODE

<?php

ob_start();

?>

This little code snippet turns on output buffering. OB does a lot of things but for the sake of brevity we will only use it for one. This function will stop any of those annoying header cannot be modified warnings.

After that we're going to put in some simple styling:

CODE

I won't bother to explain as this is a PHP tutorial.

Now for some actual PHP.

CODE

<?php

$speed = $_GET['a'];

if (empty($speed))
{
echo "You have not set a speed! Quick, <a href=\"index.html\"> set</a> one!";
exit;
}

if ($speed > 40)
{
echo "You appear to have tried to break our forty second limit, you can't be that slow can you?";
exit;
}

We'll go through this line by line.

CODE

$speed = $_GET['a'];

First of all we set up our speed variable, this contains it's counterpart that the script just received from the previous form.

CODE

if (empty($speed))
{
echo "You have not set a speed! Quick, <a href=\"index.html\"> set</a> one!";
exit;
}

Next we check to see if the $speed variable exists or has a value, if it doesn't display the error and exit the script.

CODE

if ($speed > 40)
{
echo "You appear to have tried to break our forty second limit, you can't be that slow can you?";
exit;
}

After that we check to see if the user has tried to go over 40 seconds. Of course you can remove this if you want any time you like but it could be set to millions of seconds and waste your server resources.

CODE

echo "<meta http-equiv=\"refresh\" content=\"" . $speed . "; url=" . $_SERVER['PHP_SELF'] . "?a=" . $speed . "\">";
echo "You have " . $speed . " seconds to do the following movement";

To change the colour and body part we're going to use a very simple HTML meta refresh that uses the $speed variable to check how long between each refresh. We've also used '$_SERVER['PHP_SELF']', this tells the refresh that it should refresh your current page. You can just change this to the page name but it allows you to change the page name and the script to still work.

CODE

$body = rand (0, 3);
switch($body)
{

case '0':
$part = 'Left Hand';
break;

case '1':
$part = 'Right Hand';
break;

case '2':
$part = 'Left Foot';
break;

case '3':
$part = 'Right Foot';
break;

default:
echo "Incorrect Usage.";
break;

}

Now we've come to the code that chooses the body part.
It's a very simple switch statement that chooses the body part depending on the number from the rand() function. Complicated? Nah.

The rand function will pick a random number; Either 0,1,2 or 3. The switch statement then uses this number and checks what body part is assigned to it. For instance, if the rand function chose 2, 'Left Foot' would be chosen.

Now you might be wondering, well how does it get on my page? We're getting there.

CODE

echo "<h1>" . $part . "</h1>";

A simple echo statement than prints out the selected body part as a level one header.

CODE

$color = rand (0, 3);
switch($color)
{

case '0':
$col = 'red.png'; //Red;
break;

case '1':
$col = 'green.png'; //Green;
break;

case '2':
$col = 'blue.png'; //Blue;
break;

case '3':
$col = 'yell.png'; //Yellow;
break;

default:
echo "Incorrect Usage.";
break;

}

This works exactly the same as the previous one except this time we have images assigned to the numbers.

CODE

echo "<h2>Color</h2><h1><img src=\"" . $col . "\" /></h1><br />";

This is, just as the other one was, a simple echo statement, but this time it will show you an image based on the choice of the switch statement. You can download the images here, here, here, and here

CODE

Finish with the closing tags and we've finsished! Well, sort of.

=========================================================

Finishing Up

Now for a final addition.
Underneath your script add this:

CODE

This will display the current colour and body part in the title.

=========================================================

Now we've really finished!

Here's both the scripts for those who are too lazy to read the whole tutorial.

index.html

CODE

<html>
<head>
<title>Speed Selector</title>
</head>

<body>
Choose the speed you want the spinner to go at: <br /><br />
<form action="twist.php" method="get">

<select name="a">
<option name="1" value="1">1 Sec</option>
<option name="2" value="2">2 Sec</option>
<option name="3" value="3">3 Sec</option>
<option name="4" value="4">4 Sec</option>
<option name="5" value="5">5 Sec</option>
<option name="10" value="10">10 Sec</option>
<option name="15" value="15">15 Sec</option>
<option name="20" value="20">20 Sec</option>
<option name="25" value="25">25 Sec</option>
<option name="30" value="30">30 Sec</option>
<option name="35" value="35">35 Sec</option>
<option name="40" value="40">40 Sec</option>
</select>
<br /><br />
<input type="submit" value="Choose Speed!" name="submit" />
</form>

</body>
</html>

twist.php

CODE

<?php

ob_start();

?>

<style type="text/css">

body
{
text-align: center;
font-family: Verdana;
}

h1
{
font-weight: bolder;
font-family: Verdana;
font-size: 60px;
}

h2
{
font-family: Verdana;
font-size: 20px;
}

</style>

<?php

$speed = $_GET['a'];

if (empty($speed))
{
echo "You have not set a speed! Quick, <a href=\"index.html\"> set</a> one!";
exit;
}

if ($speed > 40)
{
echo "You appear to have tried to break our forty second limit, you can't be that slow can you?";
exit;
}

echo "<meta http-equiv=\"refresh\" content=\"" . $speed . "; url=" . $_SERVER['PHP_SELF'] . "?a=" . $speed . "\">";
echo "You have " . $speed . " seconds to do the following movement";

$body = rand (0, 3);
switch($body)
{

case '0':
$part = 'Left Hand';
break;

case '1':
$part = 'Right Hand';
break;

case '2':
$part = 'Left Foot';
break;

case '3':
$part = 'Right Foot';
break;

default:
echo "Incorrect Usage.";
break;

}

echo "<h1>" . $part . "</h1>";

$color = rand (0, 3);
switch($color)
{

case '0':
$col = 'red.png'; //Red;
break;

case '1':
$col = 'green.png'; //Green;
break;

case '2':
$col = 'blue.png'; //Blue;
break;

case '3':
$col = 'yell.png'; //Yellow;
break;

default:
echo "Incorrect Usage.";
break;

}

echo "<h2>Color</h2><h1><img src=\"" . $col . "\" /></h1><br />";

?>

<head>
<title><? echo $part . " · " . $col; ?></title>
</head>

=========================================================

That's it, you've managed to endure my tutorial so you should manage to endure the torture that is called twister. And if you're really bored, you can add sound like I did.

If you have any problems reply to this topic and i'll try to sort them out.

Donna

May 4 2005, 02:24 PM

Nice Adam, thanks for adding this

meadow

Jul 26 2005, 12:40 PM

You don't reckon you culd redirect some of links to images do you?

Becuase they don't seem to work but it looks like an interesting script and I'd like to see it work properly.

syndrome

Jul 26 2005, 01:22 PM

apparently sharpknife.net does not exist, is your site having problems adam?

Jaymz

Jul 26 2005, 01:35 PM

QUOTE(syndrome @ Jul 26 2005, 03:22 PM)

aparently sharpknife.net does not exist, is your site having problems adam?

Adam is having DNS problems, he's contacted his registrar and is awaiting a response

syndrome

Jul 26 2005, 02:08 PM

QUOTE(Jaymz @ Jul 26 2005, 07:35 PM)

QUOTE(syndrome @ Jul 26 2005, 03:22 PM)

aparently sharpknife.net does not exist, is your site having problems adam?

Adam is having DNS problems, he's contacted his registrar and is awaiting a response

ah ok, i want to see the end result

btw im pretty n00bish so whats DNS stand for?

Time-2-Design

Jul 26 2005, 04:48 PM

DNS - Domain Name System

Jaymz

Jul 26 2005, 05:03 PM

You can view it here if you wish
http://www.adammulligan.com/devs/twister/

SN.net is down temporarily.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.