Hexamotive

This simulation was an experiment with building a simulation style game for the browser with zero dependencies, no game engine, no javascript libraries imported, no framework used. It took a bit longer building this from completely from scratch, but as a result it is extremely small for browsers to load, and I find it very satisfying that it starts near instantly. The map is procedurally generated to allow building endlessly in any direction.

All the building and terrain art are drawn directly in javascript using the canvas api. Rather than redrawing every hex and building each time from scratch, since this would be very expensive, the drawing system pre-renders each visual component once and stores it to an offscreen canvas. These can then be "stamped" to the main canvas in a loop, making the process much faster. To allow for animation of the buildings, the building stamps are generated fresh each frame.

The system that drives the simulation is very simple. Buildings produce resources corresponding to their type. Trains move along the tracks, randomly branching at intersections or following the track with the highest priority (player configurable). The pickup and delivery system works by checking if a train has crossed the midpoint of hex edge adjacent to a building which produces or consumes resources. If the building has room for resources it consumes and the train has them, they get sent to the building; if the building has produced resources and the train has cargo space they get sent there. Buildings produce and consume resources as the simulation updates.