A tiny city builder in the spirit of the classic 90s SimCity. Zero build step,
zero dependencies, zero image assets — plain ES modules and a canvas, with
every sprite drawn procedurally in code. Open index.html from any static
server and play.
python3 -m http.server # or any static server, then open http://localhost:8000
(A server is needed because ES modules don't load over file://. The gh-pages
branch deploys as-is.)
- Zone residential, commercial, and industrial land next to roads or rail
- Power it with a coal plant — power flows through roads, rails, wires, and buildings; each plant feeds a limited load before brownouts start (⚡). Nuclear is 5× the price for 3× the capacity and none of the smog
- Water it with pumps (much bigger reach on a shoreline) — without water service no zone develops past density 2, and dense buildings empty out
- Rail counts as road access, and districts near a line send far fewer cars onto the roads — the cure for traffic and its pollution
- Watch the RCI meter and zone what the demand bars ask for
- Click the funds readout for the budget: taxes are land-value weighted (rich districts pay more) and demand tolerates ~9% before the Laffer curve bites hard. Run a deficit and your unpaid road crews let the streets crumble into rubble
- Sound is synthesized live with WebAudio — city hum scales with population, fires crackle, disasters rumble (🔊 to mute)
- Overlays (top bar) show power, pollution, land value, and traffic as flat map views
- Parks and waterfront raise land value; industry and traffic pollute
- Disasters (top bar): fires spread until they hit water, roads, or a bulldozed firebreak and leave rubble to clear; tornadoes carve a path; meteors crater the city — and accidental fires happen on their own
- Your settlement is promoted from Village → Town → City → Capital → Metropolis as it grows; click the population readout for history charts, and watch the advisor strip for warnings
Drag to place roads (L-shaped routes) and to zone rectangles. Right-drag to
pan, wheel to zoom, arrows to scroll. Space pauses, +/- changes speed,
letters select tools (hover a tool for its key). Save/Load uses localStorage.
?demo=1 auto-builds a starter city and fast-forwards six years.
?overlay=pollution opens with an overlay active; ?fire=1 starts fires;
?stats=1 opens the history panel.
The sim is pure data (js/sim.js, typed arrays, no DOM) ticked 24 times per
game month:
- Growth — each tick samples random zone tiles; a tile develops (level 0→5) if it has power, a road within 3 tiles, and positive desirability (demand + land value − pollution), and decays when those fail.
- Power — flood fill from coal plants across conductive tiles; each network's developed load beyond plant capacity causes randomized brownouts.
- Demand (RCI) — residential follows the jobs/workforce ratio plus early migration; commercial follows population; industrial follows external demand that fades as the city grows. Taxes drag all three.
- Fields — pollution (industry, plants, traffic) and land value (water, trees, parks, centrality, minus pollution) are diffused with box blurs.
- Traffic — fake, like the classics: developed zones load their nearest road tile.
node test/growth.js runs a headless 10-year growth test — a scripted city
must reach population and development thresholds without going broke.
node test/disasters.js checks that fires spread and burn out, meteors
crater, tornadoes dissipate, and burning cities survive a save/load.
node test/infra.js proves the dynamics: the water density gate, nuclear
capacity, rail-only access, the tax curve, and bankruptcy road decay.
Everything you see — terrain, water animation, shorelines, auto-tiling roads,
buildings at five density levels, the coal plant, smoke, cars — is generated
at boot on offscreen canvases (js/sprites.js), drawn with gradients and
iso-projected boxes at 2× supersampling.