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) and, as it happens, is just the right size for the iPhone/iPod Touch (despite predating it by almost 10 years — now there's forward compatibility for you ).

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:

<!-- 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 window URL and focus it
    wind.window.document.location = 'fishrace.html?' + wind.plQ;
    wind.window.focus();
    
    //don't do native submission
    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.