html5-raycast

HTML5 Raycast

A Wolfenstein 3D style JavaScript Raycaster using the browser’s HTML5 Canvas for rendering.

View Demo Here

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.

Building

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.”

Other links

• 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.

Asset Credits

https://opengameart.org/content/big-pack-of-hand-painted-tiling-textures

https://opengameart.org/content/first-person-dungeon-crawl-art-pack