A simple raycasting rendering in Wolfenstein-style using vanilla JS canvas APIs. The project is a proof of concept for future similar ideas (e.g. games, although unsure).
Warning
- Since it is simply rendered on HTML canvas, poor performance on old machines and browsers are expected. (I'll adjust this in the future)
- This might still be buggy and not used for anything serious, only for educational purposes.
- Some logic might not be best practice.
Ensure npm or python3 is installed and run the following to open a local HTTP server
npx http-server /path/to/project -o -p 6969
# or
python3 -m http.serverW: forward; S: backward; A,D: rotate
The casting is implemented using DDA (Digital Differential Analyzer) algorithm to detect collision points between the rays and the walls. The algorithm works well in a tile-based world.
The renderer is heavily inspired by https://lodev.org/cgtutor/raycasting.html with some minor adjustments.