DivTron

DivTron is a DOM/HTML game based on the lightbike scene in the movie Tron.

When 2010's Tron: Legacy was released, I found myself fondly thinking back on the original Tron. It was a favorite of mine when I was a kid, and although the film definitely isn't a stellar example of screenwriting or directing, I still think it holds up as an amazing a visual achievement. Has anything else looked quite like it, before or since?

One of the first video games I ever created — way back in 1996/1997 in high school — was a two-player competitive game based on the light bike scene in the original Tron film. I wrote it in Pascal, and it was actually a minor hit around my school; people played it for fun in the computer labs, and there were even a couple of tournaments held over at one of my friend's houses.

As homage to both that game and the original Tron movie (and mostly just as a fun experiment for myself), I decided to recreate the light bike game for the web browser, and that's what DivTron is.

How to play

First of all, you need a keyboard. The game is not supported on mobile device touchscreens.

Secondly, you need a friend (unless you're feeling creative and want to control both players yourself).

Pressing the Enter/Return key begins the game (and begins each subsequent round). Players can select one of five colors for their light cycles by clicking on a color in the color picker next their player name ("1UP" and "2UP").

Player 1 is controlled using the A and D keys, and player 2 is controlled using the left and right arrow keys. The A/left keys make the light cycles turn left, and the D/right keys make them turn right. Keep in mind: the direction of the turn is relative to the direction that the cycle is heading. If your cycle is moving upward onscreen, turning left will cause you go left onscreen. But if your cycle is moving downward onscreen, turning left will actually (and perhaps counterintuitively at first) cause your cycle to move right onscreen.

Each player's score is maintained beneath his/her player name on top ("1UP" and "2UP"). One point is awarded for each win. You win when your opponent crashes and explodes.

So what's the big deal?

To the layperson, pretty much nothing. DivTron is a basic and unremarkable game. But for the programmers and web designers among you, there's some noteworthy stuff going on behind the scenes.

The name "DivTron" might have tipped you off. Given that it's a tribute to a retro technology movie, I felt like it was only appropriate to go "old-school" with the programming:

• The game is created entirely out of basic HTML <div> elements — all of it, including the light cycles, the explosions, the color pickers, and even the arcade-style font. Everything is a simple <div>. There are no images or text characters anywhere in the game, and there's no fancy HTML5 or Flash.
• All of the code is written from scratch with basic JavaScript. No external libraries are used — no jQuery, no MooTools, no Dojo, no Prototype; none of that.
• Given that the game is made up exclusively of basic HTML/CSS/JavaScript, the whole thing can be neatly encapsulated in a single HTML page. It's about 18KB in size — the core game accounts for about half of that (9KB), and the arcade-style font object accounts for the other half. ("ArcadeFont" is a custom JavaScript object [and JSON / object literal dataset] that I created for drawing the game font with <div> tags.)
• In addition to all of the usual modern browsers, DivTron is fully supported on some really ancient browsers too: I've tested as far as back as Internet Explorer 6 and Internet Explorer 5.5, and it works perfectly in both. It should be noted, however, that the game runs really slowly in all versions of Internet Explorer prior to IE9. There are even a few hiccups in Firefox. For best results, use Chrome, Safari, or Opera.

Clearly, something more visually impressive could have been created with HTML5 or Flash (and maybe I'll tackle that one of these days). But for this project, it was all about going retro and honoring Tron's roots.