IsoCity & IsoCoaster

Open-source isometric city and theme park builder built with NextJS, TypeScript, and HTML5 Canvas.

IsoCity	IsoCoaster
City builder with trains, planes, cars, and pedestrians iso-city.com	Theme park builder with roller coasters, rides, and guests iso-coaster.com

Made with Cursor.

Features

• Isometric Rendering Engine: Rendering with HTML5 Canvas (CanvasIsometricGrid) capable of handling complex depth sorting, layer management, and both image and canvas sprites.
• Dynamic Simulation:
  • Traffic System: Autonomous vehicles including cars, trains, planes, buses, and seaplanes.
  • Trains, bridges, buses, barges, and more: Vehicles will navigate throughout your city and respect traffic lights.
  • Pedestrian System: Pathfinding and crowd simulation for city inhabitants.
  • Economy & Resources: Resource management, zoning (Residential, Commercial, Industrial), and city growth logic.
• Interactive Grid: Tile-based placement system for buildings, roads, rail, parks, utilities, and more.
• State Management: Save and load functionality for multiple cities.
• Responsive Design: Mobile-friendly interface with touch friendly controls, drawers, and toolbars.

Tech Stack

• Framework: Next.js 16
• Language: TypeScript
• Graphics: HTML5 Canvas (No external game engine libraries; pure native implementation).
• Icons: Lucide React icons.

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm

Installation

1. Clone the repository bash git clone https://github.com/amilich/isometric-city.git cd isometric-city

2. Install dependencies bash npm install

3. Run the development server bash npm run dev

4. Open the game Visit http://localhost:3000 to play IsoCity. Visit http://localhost:3000/coaster for IsoCoaster.

Contributing

Contributions, bug reports, and feature requests are welcome.

License

Distributed under the MIT License. See LICENSE for more information.