Building Doom in HTML

I have been on a bit of a browser development kick lately, building small single file HTML projects using Canvas 2D and the Web Audio API for sound. Doom felt like the natural next challenge to attempt.

Getting the raycasting engine working from scratch was the interesting part. Doom’s original renderer uses a technique where you cast a ray for every vertical strip of the screen, figure out where it hits a wall, and use the distance to scale that strip’s height. Get that right and you get a surprisingly convincing 3D looking space out of pure 2D math.

Sound is handled with the Web Audio API rather than audio files, generating simple synth tones for footsteps, gunfire, and hits, which keeps the whole thing to a single HTML file with no external assets to manage.

Still refining enemy behavior and level design, but the core engine is running smoothly. More on this as it progresses.

You can play the current build here: Try the current build