basil656552/fuzzy-umbrella

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.

All of the rendering is carried out within a single 640x480 canvas at ~30 frames per second. The rendering at its core is basically comprised of vertical slices of texture-mapped walls at constant-Z and per-pixel rendered ceiling and floor textures. An offscreen frame buffer is utilized to optimize per-pixel rendering.

This little project was inspired by a video on YouTube posted by a fellow seasoned programmer who goes by the name 'javidx9.' You can follow this link to refer to his tutorial of ray-casting done entirely on a command-line window!

Setting up

Requirements

• Node.js
• ejs
• express

After cloning the repository, navigate to the root folder and install the dependencies using npm.

$ npm install

Once all the dependencies are installed, you can start up an Express development server with:

$ npm run start

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.

Live Demo

You can check out the live demo here!

Map Editor GUI

Coming soon...

Features include

• AABB collision detection & resolution
• Walking animation
• Ability to look up & down
• Player elevation
• Texture-mapped walls, floors & ceiling
• Alpha-blending
• Skybox rendering for outdoors
• Shading with depth
• Doors
• Mini-map display

TODOs

• Diagonal walls
• World-object sprites
• Transparent walls
• Pseudo portal-rendering