Fish Race

22nd March 2002

Fish Race is a very cute game, featuring five colourful fish who race across an underwater scene. The object of the game is to back the winning fish - you can bet on the outcome of each race, and if you win you score a point.

After that it's up to you how you play - you could, for example, compete against your friends to be the first to a set number of points. You could even combine it in with another game - using the race as an elaborate dice or qualifier!

The game works in all modern graphical browsers (with javascript enabled).

Enter the names of up to five players in the text boxes below, then click Play Fish Race! (opens in a popup window):

Player 1

Player 2

Player 3

Player 4

Player 5

How to play

At the beginning of each race you can bet on the fish you fancy, but once the fish are swimming you can't change your bet. Any players who aren't named will bet automatically:

The game defaults to even points - each fish has an equal chance of winning. You can also use biased odds so that some fish have a much lower chance of winning, and consequently score more points:

The purple fish scores 1 point

The blue fish scores 2 points

The orange fish scores 3 points

The green fish scores 4 points

The white fish scores 5 points

This is controlled with two buttons:

There are five more buttons to the left of those, which set the game speed. I found this a necessary feature to allow for different processors (and different amounts of patience!) You can change the speed at any point in the game:

The final button begins a new race, which you can also do at any point in the game:

Get the script

Download the zipfile [83K], unzip it into your site directory then add the entry-form scripting and HTML to your page:

• Skip code example

<!-- Fish Race game by Brothercake - http://www.brothercake.com/ -->
<script type="text/javascript">

//global object
var wind = new Object;

//open fish window
function fishWindow()
{

	//open window
	wind.window = open('','windWindow','width=785,height=460,status=yes,scrollbars=no,scrolling=no,toolbar=no,menubar=no,location=no,resizable=yes');

	//compile query string of player names
	wind.pln = [];
	wind.plQ = '';
	for(var i=1; i<6; i++)
	{
		wind.pln[i] = document.getElementById('player' + i).value;
		
		if(wind.pln[i].indexOf('Player')==-1)
		{
			wind.plQ += wind.pln[i];
			if(i<5){ wind.plQ += ','; }
		}
	}

	//set URL
	wind.window.document.location = 'fishrace.html?' + wind.plQ;
	
	//focus it
	wind.window.focus();
	
	//don't follow the form
	return false;
	
};

</script>


<form action="" onsubmit="return fishWindow()">

	<fieldset>
		<div>
			<label for="player1">
				Player 1
			</label>
			<input id="player1" size="12" maxlength="10" />
		</div>
		<div>
			<label for="player2">
			Player 2
			</label>
			<input id="player2" size="12" maxlength="10" />
		</div>
		<div>
			<label for="player3">
				Player 3
			</label>
			<input id="player3" size="12" maxlength="10" />
		</div>
		<div>
			<label for="player4">
				Player 4
			</label>
			<input id="player4" size="12" maxlength="10" />
		</div>
		<div>
			<label for="player5">
				Player 5
			</label>
			<input id="player5" size="12" maxlength="10" />
		</div>
	</fieldset>

	<fieldset>
		<input type="submit" value="Play Fish Race!" />
	</fieldset>

</form>

Credits

Those lovely floating bubbles come from Lisa Explains it All, a script I found at Dynamic Drive.