Raycasting.js

This is an implementation of the once-popular 3-D rendering technique known as raycasting which was famously featured in 1991's popular video game hit Wolfenstein 3D.

The engine has been written from scratch in pure JavaScript with no external dependencies other than that of HTML5's 2d canvas context to draw pixels on.

This personal project has more or less been my learning journey about early 90's 3d–or pseudo-3d rather–tech for the last couple of years. So the project has been growing with me, so to speak. Because this is the case, the code is not in its best shape as I mostly have been prototyping ideas and feature implementations and have not had the opportunity to undergo a major and a much needed refactoring. However such a refactor is in the backlog and is sure to gradually happen in future versions.

Key features include:

AABB collision detection & resolution
Custom occlusion-culling routine
Free-look (perpective-incorrect, achieved via y-shearing)
Player elevation
Texture-mapped walls, floors & ceiling
Alpha-blending
Skybox rendering for outdoors
Depth-based shading (fog effect)
Mini-map display
2d static & animated sprites for in-game objects

Controls

Use keys W and S on your keyboard to move forwards and backwards, respectively.
Key ← rotates player counter-clockwise, and key → rotates player clockwise.
Use keys A and D to strafe left and right, respectively.
You may use either *, or the keys E and Q to raise and lower the player, respectively.
Use keys ↑ and ↓ to look up and down, respectively.
You may use either *, or SPACE to shoot.
Use ENTER to open/close doors.
You may also use the mouse* for free-look.
* You should first click on the canvas to activate mouse controls.

Please note that this is still heavily a WIP and regard it as a mere tech demo, as there is still no major gameplay loop implemented in.

Some of the visual and audio assets have been re-used from the original 1993 release of Doom.

Raycasting.js Engine v0.3 Tech Demo screenshots