it's pronounced 'wolfen-STEEN'

So Bethesda released a playable online port of the 1992 PC classic Wolfenstein 3D - it was a great game with awesome music, the first FPS worthy of the name, and the precursor to DOOM. When Peter Cooper's JavaScript Weekly (kind of a must-read for keeping up with the whole HTML5/js/jQuery world) linked to it they mentioned

 Interestingly, it doesn't use Canvas, etc, but a lot of CSS and DOM manipulation.

So I took a peek with Firebug, and wow, they're right! I always wondered if you could build a game this way, and sure enough! (It's a testimonial to the cleverness of the original Wolf3D programmer John Carmack, how robust his ideas in rendering engines were). When you inspect the DOM, you can see that besides some divs for "ceiling" "floor" and "player-weapon" and the like, there's a giant pile of (mostly hidden) sprite divs, and the a big collection 3 pixel wide vertical slices. Each one of those then holds a carefully manipulated piece of a wall texture. There's a lot of manipulation of the z-index to get everything to appear in the right order as well. (the Wikiepedia article talks a bit about this technique, called "Ray Casting".

Quite the tour de force! I've seen recreations of the basic technique in minimalist programming competitions, but it's cool to see my old friend Wolf3D.

Here's one of the sprite sheets from it, the basic soldier...

At first I was going to slice this by hand to fit in this site (the original file is a horizontal row 3136 pixels across), but then I realized I could just use some CSS shuffling. (In theory I could have then baked the result into a single image, but but it was a a bit more fun this way)

And check out this cool walk through with Wolf3D creator John Carmack!