Celebrate 20 Years of Wolfenstein 3D in Your Browser

Contributing Editor

Perhaps I’m showing my age but is it really 20 years since Wolfenstein 3D exploded onto the PC gaming scene? To celebrate that momentous occasion, the full game can now be played online within your browser at:

wolfenstein.bethsoft.com
Wolfenstein 3D browser version

(Note the game is recommended for those over 12 and banned in Germany and several other countries).

The site states it’s compatible with IE9, Firefox, Chrome and Safari — although Opera seems to work if you’re not too bothered by a few graphical glitches. The game is mouse-enabled (set it within the configuration options) although few PCs had mice in 1992 and you’ll find keyboard control best.

Wolfenstein was released as DOS shareware in 1992. The web was largely unknown and bulletin boards were the reserve of rich geeks but, despite a lack of social networks and online file sharing, word spread and so did thousands of 720kB floppy disks. Suddenly, there was a reason to use a PC for more than Lotus-123 spreadsheets.

So why the fuss? Wolfenstein started the 3D first-person gaming genre. In 1992, there were relatively few 3D games and most resorted to isometric graphics (Marble Madness, Paperboy), wire-frame (Star Wars, Elite, Starglider) or faked overlaid 2D sprites (Outrun, Chase HQ, Space Harrier). True 3D games were available in the arcades (I-Robot, Hard Drivin’) but they took themselves a little too seriously and couldn’t be replicated on the 16-bit PCs of the day.

I remember playing Wolfenstein for the first time; it changed my perceptions about what could be achieved on a PC. While it looks basic today, having the freedom to explore realistic 3D rooms blasting stuff was revolutionary — and shouldn’t have been possible given the hardware limitations.

More importantly, the game was fun; you played a prisoner trying to escape from a Nazi-controlled castle in World War II. The VGA gore was amusing and you could defeat a robotically-enhanced Hitler at the end of the game. That said, not everything was perfect. The walking movement was unrealistically smooth and the corridor map was always rectangular — combine that with may hours game play and Wolfenstein remains the only game which made me feel genuinely queasy!

iD Software’s success with Wolfenstein led to Doom a year later — it’s fair to say you wouldn’t be playing Call of Duty today if it weren’t for those two ground-breaking games.

A version of Wolfenstein was released on almost every computer and gaming platform (even Nintendo permitted the gore-fest on their family-friendly consoles, although iD were instructed to replace guard dogs with large rats). The browser version if faithful to the original DOS version and permits you to play every level. Actually, it probably plays and sounds better than it did on the latest 386 PCs we had in 1992.

Technically, the game is implemented using JavaScript and HTML5 audio. I first thought it was rendered using a canvas element but, thanks to further investigation by Matt Vaughan (below), it’s actually 320 horizontally-stacked DIVs which have their background, vertical size and top location modified as you move around. It’s clever but slightly unusual solution. The full page weight is a little over 800kB of mostly uncompressed JavaScript — impressive given that most sites use that for their home page.

But who cares about the technical details … Happy Birthday Wolfenstein 3D and thanks for 20 great years of great gaming.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://modopweb.wordpress.com Matt Vaughan

    Are you SURE it’s using canvas? I could find no evidence of canvas anywhere, just jQuery and divs. Lots and lots of divs. Floor, ceiling, overlays, sprites, and… rays. Every vertical slice of the walls is a 3px-wide div.

    • http://www.optimalworks.net/ Craig Buckler

      Crikey, you’re right (I spotted a canvas reference somewhere, but perhaps it was in Modernizr or another library).

      It’s using a few hundred vertical DIV elements which are given differing backgrounds and sized according to the perspective of the wall. It seems like a mad solution, but it works. I hope they reveal why it was done that way – perhaps it’s more compatible with the original DOS graphics engine?

      • http://www.deathshadow.com deathshadow

        I’m willing to bet it’s faster for scaling the images. I found that in my own experiments with drawing things — most browsers can manipulate the dom and shove IMG tags around the screen far, far faster than canvas can.

        This is particularly true in IE – even legacy IE. For all the talk of other browsers having faster scripting engines and faster loads, IE can actually draw DOM changes on things like IMG tags or background-images far, far, far faster than any other browser.

        See how a 1999 style ‘falling snowflakes’ can still drag Gecko to it’s knees on a modern multi-ghz machine, when it runs smooth as silk on IE5.5 on a 600mhz Pentium II under win98.

        I do think they went a bit overboard on the scripting… about two thirds of what they’re doing to draw it could probably be pitched — but that’s a given the moment jquery is on the table. I’m just a bit surprised they’re able to handle the redraw fast enough — raycasting 320 wide is tricky to do in javascript without seeing it actually refresh horizontally. Wonder if they’re double buffering, I’ll have to look deeper under the hood.

      • http://www.optimalworks.net/ Craig Buckler

        Perhaps it was faster — especially for legacy IEs — although they only claim IE9 support? Try it in Opera too; the browser seems too ignore some DOM dimensioning instructions so DIVs go out of place.

        A couple of years ago it would certainly have been the best (non-Flash) way to make the game work. I’d be surprised if canvas was too slow; it’s only a 320×200 VGA graphic although they’ve scaled it to 640×400. Maybe that was a little too large to handle? Or maybe scaling a smaller canvas resulted in a smoother, less blocky output?

  • http://wolf3d.atw.hu lazarv

    This version is using canvas with real high graphic details, up to 1280×960, scaled to 960×600 as default. Try the +/- keys while playing, it’s zoom. Runs in every browser without glitches to my knowledge.

  • http://aosteraas.com Aaron Osteraas

    oh my GOD

    It’s still just as addictive.

  • http://www.thelaughline.com Tony Payne

    I used to play Wolfenstein when it came out and it was amazing back in the days of the 386. I didn’t even have sound on my pc, but the graphics and gameplay were enough.

    When Doom came out it blew Wolfenstein away with the monsters, weapons, enhanced graphics and sounds.

    Nice to see Elite mentioned too. That didn’t work too well on the pc, at least not for me, but I spent countless hours on it on my BBC Model B. Nobody I know in the USA has heard of it, but it was a brilliant space trader game, which still exists in similar formats now – but far more advanced obviously.

    Good memories – was it really 20 years ago :(

    • http://www.optimalworks.net/ Craig Buckler

      No one in the US has heard of Elite? Is that true? They don’t know what they’re missing!
      I recall that Elite Plus and Elite II were quite good on the PC, though.

  • Faisal

    going to miss a lot of work today ;)