A 2D game without canvas, only html vibes. SVG is used not only for artwork but to annotate as much world/level data as possible, simply by drawing shapes accoring to a few rules. Exploring wether it's worthwile to make it into an open source 2d world game engine.
Investigate if a (much) smaller version of the track layout can be generated, used as a light brackground-image over a dark background-color and scaled up to match the world's dimensions. With a bit of luck this could give you some "free" irregularities because of upscaling pixels.
After this, investigate if the graphics in the #elevated layer can be duplicated and used as an inverted mask, to block out lights on building corners etc.
Implement day/night cycle by animating either this entire layer's opacity, or only the background color
----8<--------8<-------8<--------8<--------8<----
previously, in this issue:
This super simple effect can add dramatic night time lighting:
create an element to cover the entire world (ie, ::after)
add a dark (blue) background color and add a repeating background-image with a radial gradient
set this (pseudo) element's mix-blend-mode to multiply
Yields:
Not bad.
However, to have light around the complex shapes of a racetrack, a repeating pattern won't do.
Sometimes, an input release may not be captured which you'll notice by the car sometimes going straight when you wanted to turn, or it may keep turning when you've clearly released the arrow key(s).
It is my hunch that this is because we're capturing key up and down events and handling those by storing pressed keys in an array. Because of the possibility of frame drop, we might sometimes not capture a keydown or keyup event.
Is there a solution where we capture input on a separate thread or something?