note Use firefox, chrome/edge are slooow! (but they do actually draw the svg nice n' crisp, firefox seems to stretch the original viewbox pixels)?
Big performance update by drawing as little as possible on the <canvas>
. Why do manually what the browser gives you for free? World layers are now html elements with moving background images. Rather than stacking 5 images on top of each other and drawing that onto a canvas and then draw all that every frame inside a raf
loop was a bit silly.
Now, more or less the only real use of the canvas is to check pixel color data. See Game engine below.
python3 -m http.server
in the checkout folder and open http://localhost:8000 in a browser)This is based off of a simple tutorial about moving a character on a plane. I took that and inverted some logic to make the world move around the player. Next step was to create a system that can determine wether a player is on track or off track.
Every track has a hidden #path
layer, with each color representing a type of ground: racetrack, grass / gravel / paddock and pit area.
The player is always in the center of the screen, so by analyzing the color of the center pixel directly underneath, we can know where in the world the player is and make decisions based on that (ie, slow down, show warning, rumble..).
The tracks are layered svg files (starting point is the svg file on the racetrack's Wikipedia page).
Using css in the svg, all layers are hidden, and using the :target
selector. a layer may become visible by loading the image like: url("track.svg#world")
or `.
One layer, #path
, will contain a bright-colored version of the track as well as other surfaces such as pit lane, pit box area, all in their own distinct color.
Other layers, #world
, #track
and #elevated
will all contain artwork that is layered on top or below the #path
layer and do not affect the car behavior in any way.
All the world layers are updated in the game loop to receive new location data to which their background image will move every frame.
Want to contribute?