Newsreel |
|
|
|
Click on a feature of DNJ Dilemma to see how it was written! |
A brief history of DNJ Dilemma
The DNJ Dilemma project started with a chapter in Richard Dawkins' book The Selfish Gene, in which he describes the game of Iterated Prisoner's Dilemma. Despite being one of the simplest games ever invented (see rules), playing it successfully requires perception, nerve and either a well-developed social conscience or utter ruthlessness. It also lends itself to computer simulation, and has been the subject of major computer-based tournaments in the academic world, with strategy programs bearing names such as 'Suspicious Tit for Tat' and 'Remorseful Prober' slugging it out against each other.
I checked the Web for Prisoner's Dilemma simulations, and found mainly CGI-based applications with fairly basic user interfaces (often just a pair of radio buttons for 'cooperate' and 'defect'). It seemed to me, though, that Dilemma would make a great Dynamic HTML application, using client-side scripting to provide a much richer interface. Scripting languages could also be used to write strategy functions which would allow the computer to play against the user, with the game designed to make it easy for developers to add their own strategies to the existing code.
My
first Dilemma version, published on my website, was Netscape/IE compatible
(click here to see it),
so missed out on the later versions' IE-only DHTML goodies. However it
used core features such as indirected function
calls to switch between computer strategies, as well as between basic
image-substitution and IE-only dissolve transitions when 'turning over'
the cards. It also had graphics-based scoreboard
displays, and used timer events to allow the computer to play
asynchronously, with a random delay, against its human
opponent.
All the 'text' messages in the first version had to be graphic images, because NetScape browsers still don't support an equivalent to IE's .innerText property. This meant no player-name or end-of-game information displays. Netscape limitations also made it impractical to have the pop-up control panel that lets you choose which strategy to play against, and to pit two computer strategies against each other. There were no IE5-based animated buttons either.
Version
2, the first DNJ Dilemma, was an IE-based product, which let me remove the
Netscape-compatibility limitations. I replaced the text-as-graphics
messages with dynamically-updated DIVs, so in came the player's name at
the top of the left-hand column, using IE4's visual filters to add a
tasteful(!) drop shadow to the text. Meanwhile a new control panel
let you choose your opposing computer strategy, and provided a 'high-speed
play' option which removed the artificial delays I'd put in to make the
computer seem to be taking time to think.
I also did some heavy 're-architecting' of the strategy function standards, removing my earlier use of global variables (inexcusable, I know, but everyone makes mistakes sometimes!). Instead, a strategy function now received a reference to an object representing either the left or right-hand player. This made strategies properly re-entrant and 'side-neutral' (including being able to play both sides in a game). As a result self-play mode and the Tournament Edition were born.
To complete the tidying of the strategy system, I made the drop-down strategy selection lists dynamically loaded at runtime. This achieved my objective of allowing new strategy functions to be added to the system without editing the main game page source (to help achieve 'no game page edits' status, the strategy functions are held in a separate document, and the game page reads their names from it, then uses them to populate the lists).
Originally the strategy-function document had run in a separate browser window, but this cluttered the Task Bar and was liable to be overwritten by pages launched from Favorites. To avoid these problems I moved the strategies into a frameset document, which loads the game page in 'underneath' itself in a full-screen frame. It sounds weird, but it's tidier and makes it much easier to switch between live and development strategy files, and as far as I know there's no law against it! For full specifications of strategy functions and frameset documents, see the 'writing strategies' section in DNJ Dilemma Help.
Version 3 of DNJ Dilemma introduced game statistics. Inter-document
JScript programming is one of my favourite techniques (see strategies,
above), so I used it again to make a statistics page in a separate window
'reach across' into the main game page, retrieve the game statistics data,
and format it into an HTML table.
This was fine, except that when there were lots of statistics to gather (because lots of games had been played), the page appeared to go dead for quite a long time, displaying just a table full of blank cells.
The reason was that, although I was filling the table on a game-by-game basis (by updating the .innerText properties of its cells), IE was waiting until I'd finished updating the whole table before rendering it on screen. It was working, but as every developer knows it's the user's perception that counts, and the perception reported by my chief user-tester (my daughter, aged 14) was that "it's crashed again, Dad", so something had to change.
The solution turned out be another old JScript favourite, setTimeout() timer events. My cell-update statements were being fired off so fast that IE didn't have time to update each table row display individually, so waited until they stopped coming before updating them all at once. Introducing a short timer-delay between each update allowed IE to update the table display row-by-row. It's actually slower than the original version, but the user sees the table being built, and knows everything's OK. My chief tester's reaction? "Oh good, you've got it working!"
The
final part of the DNJ Dilemma project was the creation of the MatchPlay
Edition, which lets you play against the built-in strategies, then submit
your score to the DNJ Dilemma Online player's competition. This took us
into the heady world of three-tier client-server processing, with special
versions of the game pages sending data to an ASP 'score-receiver' page,
which store it in a SQL Server database.
Developing MatchPlay's client-side pages was an extensive exercise in 'raiding the parts bin', as I built modified versions of the existing game and statistics pages.
The game page was based on the Standard Edition (which allows the user to play interactively in the left-hand column), but with technology borrowed from the Tournament Edition (which has a mechanism for playing the left-hand column against all the built-in strategies in turn).
The statistics page had three new jobs:
-
Calculate a single overall score figure, using a formula based on number of wins and average scores;
-
Collect the contestant's email and address data;
-
Send the score and contestant data to www.dnjonline.com
Following my strict 'keep it simple' policy, I sent the data to the server via the Web's oldest data transmission method - as a query string generated by the data collection form's SUBMIT button. This took care of the contestant's details automatically, while the score figure was placed into a hidden form field's .value property immediately prior to submission, so was included too.
The server-side ASP page breaks the query string up into its constituent fields, checks the database for an existing record (using the contestant's email address as a unique key), then either inserts a new record or updates the old one. The ASP scripting and database access was coded by John Molloy and Steve Hancock, who are far better at server side stuff than I am!
A final point - the score-receiver ASP page includes a simple but effective security mechanism, in case anyone gets tempted to write a Dilemma client simulator which submits extremely large scores to the competition. Can you spot it?
DNJ Dilemma was fun (if tiring!) to write. I hope visitors to DNJ Online will have a lot of fun playing it, and writing new strategies for it. Good luck in the competitions!
Paul Stephens.
|
DNJ Dilemma |
Overview of the game's processes
Indirectly-called strategy functions
Asynchronous left/right players