The Net Net Home

AMAZON STORE

NOTES FROM THE EDITORS

CULTURE RANT

DRINK

FICTION

FOOD

LOOK AT ME

MUSIC

README

UNCORKED

WATCHME

WEB SCHMEB

ZED

HOME

ABOUT

MASTHEAD

CONTRIBUTE

Contribute Masthead About Home

GEEK: GAME OF CHAMPIONS

Diversion by Thomas Boutell

Play Geek!

We have all heard entirely too much about Java and Javascript. Java is an "object-oriented, type-safe, dynamically loaded, garbage collected, multithreaded programming language," loaded with powerful features, suitable for the design of amazingly sophisticated applications, currently mostly used to make silly games. Javascript is an "object-oriented scripting language," suitable for double-checking what the user has typed into an HTML form or generating a large HTML table using a simple loop, currently mostly used for just that.

You may feel this is a point in Javascript's favor: Javascript does what it is supposed to do, and does it reasonably well, and does it today. But I don't see it that way. What I see here is a silly games gap.

Javascript Deserves Silly Games

Until recently, it was widely believed that Javascript was not suitable for writing silly games. Sure, there's the occasional version of Hammurabi or Minesweeper out there, but there are very few live action games written in Javascript. I recently decided to take matters into my own hands and correct this unfortunate oversight. After all, writing silly games in a sooper-dooper amazing language like Java is too easy. The really fun stuff happens when you push a language beyond what it was intended to do.

Nifty Javascript Secrets

"Geek: Game of Champions" takes advantage of a few crucial features of Javascript that make an action game just barely possible. The first is the handy function setTimeout, which can be used to do something after a certain period of time. Here's a simple example:

setTimeout(1000, "Confirm('One second has elapsed');");
This line of Javascript pops up a message dialog box, but it doesn't do it right away; it does it one second (1000 milliseconds) later. This feature is important because it allows the game to move the "geek" and her opponents every so often. Javascript code should never sit in a "tight loop" like this:

// Don't do this!
while (1) {
	// La de da, ad nauseum, forever
}
Tight loops like this prevent the web browser from doing anything else. The latest versions of Netscape will even invite the user to shut off your script after a few seconds of this sort of abuse. Use the setTimeout function instead to call a certain function every so often and get some more work done. Be sure to call setTimeout again at the end if you want to keep your "loop" going.

The second nifty feature is the src property of every Image object in an HTML page. (There is an Image object corresponding to every <img> tag in an HTML page.) Javascript can change the image displayed by a particular <img> tag at any time by assigning a new value to the src property.

Here's a simple example in which the image displayed rotates among three different pictures, each time it is clicked on. Notice that giving the <img> tag a name attribute allows the code to easily fetch the Image object by name in the doSwitch function.

<html>
<head>
<script lang="javascript">
switchState = 0;
function doSwitch()
{
	switchState++;
	switchState %= 3;
	if (switchState == 0) {
           document.images["myimage"].src="/~boutell/images/volcano.gif";
	} else if (switchState == 1) {
	   document.images["myimage"].src="/~boutell/images/dialog.gif";
	} else if (switchState == 2) {
	   document.images["myimage"].src="/~boutell/images/troll.gif";
	}
	// Return false so no page will actually be loaded by this link
	return false;
}
</script>
</head>
</body>
<a href="dummy" name="switcher" onClick="doSwitch();">
<img src=/~boutell/images/dialog.gif name="myimage">
</a>
</body>
</html>

Really Tight Tables

Geek displays its graphics by setting the src properties of the <img> tags in a table. Each "cell" in the table is also a link with an onClick handler, which allows the game to know when the player has clicked on a particular cell. The only trouble with this scheme is that most web browsers are eager to add lots and lots of extra whitespace around table cells, around images, around imaginary black dots... well, basically everywhere. Anyone who has tried to do design work with HTML can attest to this.

I eventually solved this problem for Geek using the following combination of attributes for the <table> and <img> tags:

<table cellpadding=0 cellspacing=0 border=0>
<tr><td><img src=geek.gif hspace=0 vspace=0 border=0></td></tr>
</table>
It takes quite a few zeroes to keep Netscape at bay.

The Complete Game

Feel free to try out the game on my server. Complete source code is available as well. Since the game is written entirely in Javascript, it doesn't create much load on my machine. A simple CGI program written in Perl displays the welcome page and a list of high scores; Geek submits new high scores back to the CGI program when the game is over. (The separate "game over" window is not closed automatically for the simple reason that closing it crashes Mac Netscape the great majority of the time. Closing it manually doesn't seem to be a problem.)

Conclusions

Javascript is perfectly capable of supporting silly games. No doubt there are practical applications for all this as well, but let's not think of such unpleasant things. Have another cup of coffee and play another round of Geek: Game of Champions.

The Net Net is affiliated with Amazon.com
All contents of this Web site are copyright © 1996 - 2001 The Net Net and individual artists and authors. Do not reproduce contents of this site without permission of The Net Net and the artist or author. You may link to this site freely.
Design by Marmoset Media. Illustrations by Les graphiques Grenade. Hosted by The Anteroom.