I am currently designing a ray caster demo in html5. I understand ray casting in general but I don't understand how to calculate collisions of rays with lines on the grid.

At a given frame, the camera is projecting rays outwards at various angles. Each ray intersects grid lines until it hits one that is a wall of sprite or something.

My question is, how mathematically do I calculate all these intersections? It seems like there are a lot of cases I have to consider for each "square" the ray is passing through to determine which wall of the square it is hitting on its way out.

The intersections with horizontal grid lines always have the same distance. Same for vertical intersections.

So on ray setup you calculate those two distances, and then you process always the closer of both resulting next intersections first while traversing the grid and checking for solid edges.

Just to give the idea, look up 'DDA' e.g. here: https://www.scratchapixel.com/lessons/advanced-rendering/introduction-acceleration-structure/grid