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:
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!
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.
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!
Nice work. This brings up back very old memories. Works well with Firefox 3 Beta 5.
April 30, 2008 at 3:26 AM AnonymousDid you see any advantage of using Canvas for ray casting ?
April 30, 2008 at 5:50 AM Jacob SeidelinAs 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 ).
Well, from what I know about raycasting (not too much), then no.
April 30, 2008 at 6:17 AM AnonymousAs 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. :)
very cool
May 4, 2008 at 9:43 AM AnonymousI'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 AnonymousExcellent work! Who needs flash when you can have this?!
May 5, 2008 at 3:04 PM Anonymousyou 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 Anonymousgreat job dude. You made me feel young again.
May 9, 2008 at 5:17 PM AnonymousGreat 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 AnonymousObscenely good 0_o
August 10, 2008 at 3:09 PM Jacob SeidelinDid you hear from Id Software's lawyers?
I wonder if Blizzard would let me do similar showcase of Warcraft2 in JS....
@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 AnonymousIt'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 :/
September 8, 2008 at 4:17 PM Jacob SeidelinWorks nice in Firefox and Opera though :)
Good job
Yes, I'm aware of that. It wasn't really prepared for Chrome. Oh well.
September 9, 2008 at 12:17 AM Anonymousi just played through the whole level in chrome :)
October 14, 2008 at 3:29 AM Jacob SeidelinCool, hope you enjoyed :)
October 14, 2008 at 3:54 AM Anonymousit's cool and quite fast in chrome, but gets boring soon w/o ai :D
November 20, 2008 at 3:34 AM AnonymousSo nice and so fast! Even possible to use the mouse. Works wonderful in opera10.
May 19, 2009 at 3:40 AM Anonymousbut it loads on Chrome
July 12, 2009 at 7:55 AM AnonymousI found similar information about 3D Ready technology and movies on www.3D-News.net (not my website)
August 9, 2009 at 4:52 PM BizThis may help people looking for information on the topic.
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 Unknownwhat about "ilm" ?
November 25, 2009 at 5:06 AM Le Sanglier des ArdennesHello,
January 1, 2010 at 1:37 AM Nintendo Maniac 64I would like to know if it doest possible to use/modidy your game on my website ?
Thanks in advance ! :-)
This could use an update for the sound by using HTML5 + OGG vorbis, then we wouldn't need ANY plugins!
February 4, 2010 at 8:57 PM tot2ivnNote that due to Apple's stubborness, Safari doesn't support vorbis, yet Firefox and Chrome do (and Opera will).
Pretty cool man !! Cheers
February 23, 2010 at 12:05 PM Anonymousso cool!!
April 20, 2010 at 4:27 PM Anonymousnice 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
It works great in the latest preview of Internet explorer 9.
June 24, 2010 at 2:09 PM AnonymousI kid you not...
Firefox 3.6.6 on Win here. Soliders don't attack.
July 14, 2010 at 6:53 AM AnonymousI got Google chrome, very nice! But the enemies just stay there forever without doing anything =(
July 16, 2010 at 2:49 PM Mathieu 'p01' HenriGlad 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 Anonymouswow love your blog!! especially when I saw the embedded mario game :)
September 14, 2010 at 3:19 PM UnknownVery 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.
November 17, 2010 at 6:01 AM Chris A. H. Adams- Chris
In case that last comment didn't go through, also I didn't list my email:
November 17, 2010 at 6:03 AM Indian SareesVery 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
Realy good post... thanks for sharing..
December 13, 2010 at 12:18 AM vibha kapadiaVery 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 UnknownBetween 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 UnknownThis 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 UnknownThanks for posting online....nice and useful stuff...like it online
July 8, 2013 at 3:41 AMOnline shopping for sarees and salwars
http://www.unnatisilks.com