A Wolfenstein 3D style JavaScript Raycaster using the browser's HTML5 Canvas for rendering.
Heavily modified from this article by Jacob Seidelin.
Main Differences from original article:
- A single <canvas> is now used for rendering the main scene. In the original article <div> and <img> strips were used to render the walls, floor and ceiling. The walls are now drawn by manually setting the canvas pixels.
- Unit circle coordinates are now used for the player's rotation. So turning left counterclockwise is a positive angle.
- Walls and tiles now use fixed game units. The player's position in a tile is no longer a floating point value between 0 to 1, but an integer between 0 to 1280. A higher integer value seems to prevent tearing between adjacent walls.
- Horizontal walls now use a darker texture.
- Texture mapped floor and ceiling.
There is no build step but you will need a HTTP webserver like nginx to run and test locally.
If you try to load the .htm file directly with the file:// protocol you'll probably encounter an error like "The canvas has been tainted by cross-origin data."
- F. Permadi's Raycasting Tutorial. The raycast math used in this demo is closely based on this tutorial.
- Game Engine Black Book: Wolfenstein 3D Contains useful information about the original raycasting used in Wolfenstein 3D.
- Make Your Own Raycaster Game. Cool YouTube video with excellent raycasting animations.
https://opengameart.org/content/big-pack-of-hand-painted-tiling-textures
https://opengameart.org/content/first-person-dungeon-crawl-art-pack