Shall we play a game?



wopr.bartgrantham.com is an homage to the classic 1983 film, WarGames. It simulates the scene "Strobing Strategies" in which the Joshua AI, running on the WOPR computer, analyzes all possible strategies in a nuclear exchange in order to find the optimal first move. In another nod to the film, my version plays Tic-Tac-Toe instead of lobbing virtual missles.

The site was built as part of the application process for a development position at a high profile social networking site. It didn't get me the gig, but it's been a big hit amongst my friends and peers.

It's built in Javascript, with the interface almost entirely on an HTML5 canvas. Some of the code is atrocious, some of it is sublime. I'm particularly amused by my use of closures in the animation handling code as well as exploiting the stack-oriented drawing model of HTML5 canvas to make drawing the side screens trivial. There was a pretty heavy deadline so there's lots of features I had to leave out and a lot of refactoring that is probably in order.

In addition to the graphically intense strategy animation, the final Tic-Tac-Toe move is made by an AJAX call to the server. This is entirely unnecessary as the AI is self-contained in the client side, but the assignment had a requirement for a server side component, so I obliged. The server side AI is implemented in C as a FastCGI server. Backend web programming in C is pretty uncommon, so I figured it'd be a fun twist. The code for the back end is browsable here.

The list of strategies that Joshua/WOPR tests ("MEDITERRANEAN WAR", "HONGKONG VARIANT", "SEATO DECAPITATING", etc.) are all transcribed from the film. This entailed meticulous frame-by-frame analysis of the DVD in VLC. I got all of them except I made a guess at "CANADIAN TAKEOVER" which, even if wrong, is amusing. The font is also pretty accurate for the machine that rendered the original, an HP 9845C.

VLC screenshot

Even though wopr.bartgrantham.com's strategies are accurate to the film, you can get your own programmatically-generated Global Thermonuclear War strategy by clicking here.



This page gives a great background on the process by which the animations were created. If they resemble the computer graphics from 2001: A Space Odyssey or Star Wars, that makes sense: all three were designed by Colin Cantwell. At the time WarGames was being filmed, these animations took a minute per frame to render. Today computers and projection systems are so powerful the animations can be done in real time in a browser and projected onto a screen. Not even 30 years has passed between then and now!

Love it? Hate it? Have suggestions? Let me know!





U.S. STRIKE FIRST, USSR STRIKE FIRST, NATO / WARSAW PACT, FAR EAST STRATEGY, US USSR ESCALATION, MIDDLE EAST WAR, CHINA ATTACK, INDIA PAKISTAN WAR, MEDITERRANEAN WAR, HONGKONG VARIANT, SEATO DECAPITATING, CUBAN PROVOCATION, INADVERTENT LAUNCH, EGYPT MANEUVER, ATLANTIC HEAVY, CUBAN PARAMILITARY, NICARAGUAN PRESUMPTIVE, PACIFIC TERRITORIAL, BURMESE THEATERWIDE, TURKISH DECOY, NATO ALERT, ARGENTINA ESCALATION, ICELAND MAXIMUM, ARABIAN THEATERWIDE, U.S. SUBVERSION, AUSTRALIAN MANEUVER, ARABIAN DIVERSION, NORTHERN LIMITED, SUDAN SURPRISE, NATO TERRITORIAL, ZAIRE ALLIANCE, ICELAND INCIDENT, ENGLISH ESCALATION, ZAIRE SUDDEN, EGYPT PARAMILITARY, MIDDLE EAST HEAVY, MEXICAN TAKEOVER, CHAD ALERT, SAUDI MANEUVER, AFRICAN TERRITORIAL, ETHIOPIAN ESCALATION, CANADIAN TAKEOVER, TURKISH HEAVY, NATO INCURSION, U.S. DEFENSE, CAMBODIAN HEAVY, PACT MEDIUM, ARCTIC MINIMAL, MEXICAN DOMESTIC, TAIWAN THEATERWIDE, PACIFIC MANEUVER, PORTUGAL REVOLUTION, ALBANIAN DECOY, PALISTINIAN LOCAL, MOROCCAN MINIMAL, BULGARIAN DIVERSION, CZECH OPTION, FRENCH ALLIANCE, ARABIAN CLANDESTINE, GABON REBELLION, NORTHERN MAXIMUM, ALGERIAN SURPRISE, WELSH PARAMILITARY, SEATO TAKEOVER, HAWAIIAN ESCALATION, IRANIAN MANEUVER, NATO CONTAINMENT, SWISS INCIDENT, CUBAN MINIMAL, CHAD ALERT, ICELAND ESCALATION, VIETNAMESE RETALIATION, SYRIAN PROVOCATION, LIBYAN LOCAL, GABON TAKEOVER, ROMANIAN WAR, MIDDLE EAST OFFENSIVE, DENMARK MASSIVE, CHILE CONFRONTATION, S.AFRICAN SUBVERSION, USSR ALERT, NICARAGUAN THRUST, GREENLAND DOMESTIC, ICELAND HEAVY, KENYA OPTION, PACIFIC DEFENSE, UGANDA MAXIMUM, THAI SUBVERSION, ROMANIAN STRIKE, PAKISTAN SOVEREIGNTY, AFGAN MISDIRECTION, THAI VARIATION, NORTHERN TERRITORIAL, POLISH PARAMILITARY, S.AFRICAN OFFENSIVE, PANAMA MISDIRECTION, SCANDINAVIAN DOMESTIC, JORDAN PREMPTIVE, ENGLISH THRUST, BURMESE MANEUVER, SPAIN COUNTER, ARABIAN OFFENSIVE, CHAD INTERDICTION, TAIWAN MISDIRECTION, BANGLADESH THEATERWIDE, ETHIOPIAN LOCAL, ITALIAN TAKEOVER, VIETNAMESE INCIDENT, ENGLISH PREEMPTIVE, DENMARK ALTERNATE, THAI CONFRONTATION, TAIWAN SURPRISE, BRAZILIAN STRIKE, VENEZUELA SUDDEN, MAYLASIAN ALERT, ISRAEL DISCRETIONARY, LIBYAN ACTION, PALISTINIAN TACTICAL, NATO ALTERNATE, CYPRESS MANEUVER, EGYPT MISDIRECTION, BANGLADESH THRUST, KENYA DEFENSE, BANGLADESH CONTAINMENT, VIETNAMESE STRIKE, ALBANIAN CONTAINMENT, GABON SURPRISE, IRAQ SOVEREIGNTY, VIETNAMESE SUDDEN, LEBANON INTERDICTION, TAIWAN DOMESTIC, ALGERIAN SOVEREIGNTY, ARABIAN STRIKE, ATLANTIC SUDDEN, MONGOLIAN THRUST, POLISH DECOY, ALASKAN DISCRETIONARY, CANADIAN THRUST, ARABIAN LIGHT, S.AFRICAN DOMESTIC, TUNISIAN INCIDENT, MAYLASIAN MANEUVER, JAMAICA DECOY, MAYLASIAN MINIMAL, RUSSIAN SOVEREIGNTY, CHAD OPTION, BANGLADESH WAR, BURMESE CONTAINMENT, ASIAN THEATERWIDE, BULGARIAN CLANDESTINE, GREENLAND INCURSION, EGYPT SURGICAL, CZECH HEAVY, TAIWAN CONFRONTATION, GREENLAND MAXIMUM, UGANDA OFFENSIVE, CASPIAN DEFENSE

A strange game. The only winning move is not to play.