Show HN: MicroState – JavaScript City Builder
4 months ago
- #javascript
- #isometric-game
- #tech-demo
- Early tech demo of MicroState engine, not a finished game.
- Built with HTML 2D Canvas and vanilla JavaScript.
- Better support for mouse/keyboard than touch input.
- Right-click drag to move map; left-click with Move tool.
- Touch devices support two/three-finger drag and pinch-to-zoom.
- Interactive mini-map for navigation and zoom (+/- buttons or mouse wheel).
- Press 'M' to open a larger map view.
- Place terrain tiles: Parkland, Soil, Clay, Scrub, Paved, Sand, Water.
- Terrain tools: Raise, Lower, Flatten, Smooth.
- Different terrains support different trees and structures.
- Terrain heights are flexible but have steepness limits.
- Control Key for flood-fill terrain or modify terrain under roads.
- Roads can be placed on most terrains except deep water (bridges on shallow water).
- Road constraints: no steep gradients or excessive leaning; use Smooth tool.
- Shift Key to constrain roads to horizontal/vertical lines.
- Control Key to draw road grids.
- Zone areas: Residential, Commercial, Industrial.
- Buildings auto-level terrain; currently static (early demo).
- Control Key for flood-fill zoning up to road boundaries.
- Place trees on Parkland, Soil, Sand; some roadsides support trees.
- Fountains can be placed in paved plazas.
- Wireframe and Grid views for terrain/infrastructure visibility.
- Generate new maps with varied terrain (rivers, lakes, shorelines).
- Auto-generate cities with City Generation button.
- Save/Load maps locally (one save slot; no undo; changes saved manually).
- Saves persist across browser sessions.