Archived learning note: This project began as a hands-on implementation of Vinícius Avellar's RayCastingTutorial. I first followed the JavaScript tutorial, then ported my version to TypeScript with static typing, minor refactors, and a few quality-of-life improvements.
The interactive version above casts rays through a two-dimensional map to render a simple three-dimensional scene on an HTML canvas. It includes wall and floor textures, movement, collision detection, perspective correction, and keyboard controls.
What remains
- The embedded TypeScript version, which you can control with W, A, S, and D.
- My earlier JavaScript implementation.
- The original raycasting and floorcasting walkthroughs.
The previous version of this page repeated the source tutorial in detail. I have removed that walkthrough rather than present it as an original explanation. The original tutorial is the right place to learn the complete implementation.