I've been working on a HTML5 canvas raycasting engine for the web browser, with the end goal of making a simple FPS game in the style of the early 90s. The engine sits somewhere between Wolfenstein 3D and Doom in terms of complexity and capabilities - there are fixed-height floors and ceilings, skies, and wall geometry made using line segments, which can be non-orthogonal.
Development was going fairly well until I started trying to implement a simple 2D collision system. The collision detection itself is not a problem - I've written collision and vector maths modules which I've tested and have confidence in. The issue is resolving the collision in an acceptable manner. What I'm trying to make is a basic collision resolution algorithm which will detect when the player collider (circle) is colliding with one or more walls (line segments), and resolve the collision so the player slides along the wall(s) they are colliding with. Basically I want the exact same collision behaviour as DOOM has.
Some googling around led me to the following tutorial:
This seemed to describe a method for achieving the desired collision response in a robust and pleasing way, but after a couple of weeks of trying various approaches, mostly following this tutorial's method, I'm still no closer to having a working implementation.
Rather than asking for code-specific advice on one of my failed implementations, I'm here looking for guidance from someone experienced in this sort of programming. I need to learn "The Right Way" to approach the problem, from someone who has got similar systems working before, and knows how it's meant to be done.
Any help is sincerely appreciated.
Here is a stable build of the game from just after I got the first basic collision resolution system working: http://22.214.171.124:346/raycaster.html
(Shrink your browser window to see the 2D map below the main game canvas. WASD and arrow keys, mouse support is dodgy at best, I think this build has 360 controller support but I can't remember.)