Check out my
new book!
HTML5 Games book
Javascript Wolfenstein 3D

Ok, so here's another fun little experiment. Wolfenstein 3D using Javascript, Canvas and a touch of Ajax. Wolfenstein 3D is definitely one of the games that stand out when I think back to my younger game playing days. The mother of all FPS games, the baddest piece of nazi-ass-kicking software ever produced.

Hey! While you're here, why don't you check out the new Games section, a section completely dedicated to online JavaScript web games! And subscribe to the feeds to get the latest updates and games! Now back to Wolfenstein...

For the tl;dr crowd: Click here to play

All of the first floor is mapped out, albeit with a few modifications. For instance, secret doors are not implemented, so a hole in the wall was needed, as well as a few other minor changes. There are other limitations as well, look further down for a list before complaining.


The original Wolfenstein 3D game by id Software was made using a neat technique called ray casting which allows nice performance on modest hardware. That technique is quite possible to implement using Javascript and Canvas and other people have already done so with great success. There have even been other tiny Wolfenstein-like games made in as little as 5kB and as few as 20 lines of Javascript. Making it small wasn't the aim of this exercise, however, and aside from not caring about file size, it uses a different approach in order to test the 3D renderer I've posted about earlier. The level geometry is set up almost as any other geometry, and exploiting the locked camera angle in Wolf 3D, we simply precalculate all the angles a wall can be viewed at and save those textures. From there it's just a matter of figuring out which texture to paint.

There are both benefits and drawbacks to this approach, the main drawback being my lack of 3D programming experience causing a few ugly things to happen. On the plus side, it should allow for easily mixing in real 3D geometry, like crates and barrels or whatever they fill FPS games with these days. I'll experiment with this in the near future.

For AI, there is nothing yet. No AI for the guards whatsoever. They just stand around and wait to be shot.

For sound, it uses Scott Schiller's awesome SoundManager 2 library in order to play mp3 files converted from the game files.

All the assets (sprites, textures, sounds) were ripped from the shareware edition using FloEdit, with the exception of the music by the great Bobby Prince which was found here.

Now for the game: Click here and Get Psyched!

Tested in Firefox 2 and 3, Safari 3.1.2, Opera (9.27 and 9.50b, beta being the best).

As you will see on the page, there are a few options:
The size of the game area matters the most and the medium version is quite playable on my computer while the large is very sluggish.
The low/high res texture option only has a small effect on performance as well as visual appearance. Playing with unshaded walls may give a small increase in performance.

Controls:
Use WASD for movement. Click and drag the mouse to rotate, or use the left/right arrows.
Press "x" to open doors and "c" to fire your gun.

Now, a whole bunch of issues, missing features and disclaimers:
  • Only browsers with real canvas support are supported. That means Firefox, Opera, WebKit. Sorry, no Internet Explorer!
  • Since the guards don't shoot, you can't die. You cannot finish the level either. The elevator does nothing. Actually, it is not even there.
  • There is only one weapon, the pistol. No knife.
  • There are no dogs. Just guards.
  • There is no AI. Guards just stand still, waiting to die.
  • The collision detection is rather crappy. As is the shooting code. You can shoot through walls, but only in the same room. You can't shoot through (open) doors.
  • It is possible to get stuck in a closing door. If it happens, try to open it again.
  • Weird things happen when you get near the walls and view them at an angle, like huge distortion of the texture, or the wall simply fails to render. Also, at the moment the precalculated wall textures don't account correctly for perspective distortion.
I do plan to finish it at some point and maybe do all the shareware levels, but for the immediate future I'm probably going to leave it at this and move on, except for maybe some optimizing and code tidying.


If this caught your interest, be sure to check out the related WolfenFlickr 3D project which uses real raycasting. Also see these other posts related to games!

⇓ 37 comments Michel

Nice work. This brings up back very old memories. Works well with Firefox 3 Beta 5.

April 30, 2008 at 3:26 AM
Mathieu 'p01' Henri

Did you see any advantage of using Canvas for ray casting ?

As you know I wrote a few ray casting/marching engines in JavaScript and I can't think of any insentive for using Canvas for a mere raycaster.

Moreover Canvas makes the z-buffering, to display the enemies and items, a 2 pass thing while the Canvas-sprite approach offload this to the layout engine of the browsers ( which they tend to do well and faster than one can do programatically in JavaScript ).

April 30, 2008 at 5:50 AM
CupBoy

Well, from what I know about raycasting (not too much), then no.
As long as you're just scaling and placing images and only need rectangular masks,
I think using regular dom elements would be just as good/better.
Yes, the z-index thing is more efficient and is actually what I'm doing in the chess game, since each piece has its own canvas element.

I suppose I should try and make a ray caster some day, just to get that experience as well!

Your stuff rocks, by the way. :)

April 30, 2008 at 6:17 AM
xh

very cool

May 4, 2008 at 9:43 AM
Anonymous

I've noticed that sometimes the game slows down a lot, usually when you are looking at a wall and there are a lot of things behind it, perhaps you should add a few lines of code telling it not to render things in its field of view? Perhaps the slowdown is caused by something else, but that's just my two cents.

May 4, 2008 at 1:27 PM
Anonymous

Excellent work! Who needs flash when you can have this?!

May 5, 2008 at 3:04 PM
Anonymous

you are insane. i thought i'd seen everything, but now i've seen this. if you could go back to 1997 with this, they would shoot you for being a heretic. mad props.

May 9, 2008 at 5:34 AM
Anonymous

great job dude. You made me feel young again.

May 9, 2008 at 5:17 PM
Szczad

Great job, it's insane to write games in JavaScript but thats the most crazy thing You would ever did! This is amazing! It's very similar to the old, first FPS that i've ever played on PC! I;m Your fan guy!

August 6, 2008 at 6:03 PM
Prdonja

Obscenely good 0_o
Did you hear from Id Software's lawyers?
I wonder if Blizzard would let me do similar showcase of Warcraft2 in JS....

August 10, 2008 at 3:09 PM
Jacob Seidelin

@prdonja: Ha. No, I haven't heard from them and I bet they have more important matters to worry about. Same goes for Blizzard, so do come back if you make a Warcraft game/showcase in JavaScript!

August 12, 2008 at 12:09 PM
Azu

It's not very playable in Chrome. I tried setting the resolution to large and turning everything on (except low res textures) but just barely tapping the w key teleports me across the room instantly :/

Works nice in Firefox and Opera though :)

Good job

September 8, 2008 at 4:17 PM
Jacob Seidelin

Yes, I'm aware of that. It wasn't really prepared for Chrome. Oh well.

September 9, 2008 at 12:17 AM
zahid ayar

i just played through the whole level in chrome :)

October 14, 2008 at 3:29 AM
Jacob Seidelin

Cool, hope you enjoyed :)

October 14, 2008 at 3:54 AM
Anonymous

it's cool and quite fast in chrome, but gets boring soon w/o ai :D

November 20, 2008 at 3:34 AM
Anonymous

So nice and so fast! Even possible to use the mouse. Works wonderful in opera10.

May 19, 2009 at 3:40 AM
Anonymous

but it loads on Chrome

July 12, 2009 at 7:55 AM
Anonymous

I found similar information about 3D Ready technology and movies on www.3D-News.net (not my website)
This may help people looking for information on the topic.

August 9, 2009 at 4:52 PM
Biz

Wolfenstein sequel has finally arrived. The good old formula with WWI and occult is still working. It was worth to wait so long.

September 6, 2009 at 3:33 AM
martin

what about "ilm" ?

November 25, 2009 at 5:06 AM
Le Sanglier des Ardennes

Hello,

I would like to know if it doest possible to use/modidy your game on my website ?
Thanks in advance ! :-)

January 1, 2010 at 1:37 AM
Nintendo Maniac 64

This could use an update for the sound by using HTML5 + OGG vorbis, then we wouldn't need ANY plugins!

Note that due to Apple's stubborness, Safari doesn't support vorbis, yet Firefox and Chrome do (and Opera will).

February 4, 2010 at 8:57 PM
tot2ivn

Pretty cool man !! Cheers

February 23, 2010 at 12:05 PM
saperlipopete

so cool!!

nice work. i wonder i one could use floedit and compile it for a java game like that...

by the way it works well in google chrome web browser 4.1

April 20, 2010 at 4:27 PM
atomic1fire

It works great in the latest preview of Internet explorer 9.
I kid you not...

June 24, 2010 at 2:09 PM
Anonymous

Firefox 3.6.6 on Win here. Soliders don't attack.

July 14, 2010 at 6:53 AM
Anonymous

I got Google chrome, very nice! But the enemies just stay there forever without doing anything =(

July 16, 2010 at 2:49 PM
Mathieu 'p01' Henri

Glad to add another prod to the list of tiny Wolfenstein-like games/engines. This time in 1kB: WOLF1K

September 13, 2010 at 8:55 AM
Anonymous

wow love your blog!! especially when I saw the embedded mario game :)

September 14, 2010 at 3:19 PM
Chris

Very nice, there seems to be a bit of a problem with your ray-casting algo at short distances. I've written a lot of these, and could probably help you if you wanted it.

- Chris

November 17, 2010 at 6:01 AM
Chris A. H. Adams

In case that last comment didn't go through, also I didn't list my email:

Very nice, although there seems to be some problems with the ray casting algo at short distances (If that's what you're using). I've written a bunch of these, and could help you fix it if you'd like.

chris[dot]ah[dot]adams[at]gmail[dot]com

November 17, 2010 at 6:03 AM
Indian Sarees

Realy good post... thanks for sharing..

December 13, 2010 at 12:18 AM
vibha kapadia

Very Nice Stuff. Its very useful for all. Thanks for sharing it here. Please keep sharing such more useful information..

February 9, 2012 at 1:48 AM
Manohar singh Jodhpur

Between me and my husband we've owned more MP3 players over the years than I can count, including Sansas, iRivers, iPods (classic & touch), the Ibiza Rhapsody, etc. But, the last few years I've settled down to one line of players. Why? Because I was happy to discover how well-designed and fun to use the underappreciated (and widely mocked) Zunes are. Partywear saree

April 24, 2013 at 1:30 AM
Manohar singh Jodhpur

This is a great post ! it was very informative. I look forward in reading more of your work. Also, I made sure to bookmark your website so I can come back later. I enjoyed every moment of reading it. Bridal lehenga

May 10, 2013 at 9:35 PM
unnati silk

Thanks for posting online....nice and useful stuff...like it online

Online shopping for sarees and salwars
http://www.unnatisilks.com

July 8, 2013 at 3:41 AM
Post a Comment