A modern, web-based city simulation game built with Three.js, inspired by Cities: Skylines. Build and manage your dream city with realistic 3D graphics, economic simulation, and strategic urban planning.
- 3D City Building: Construct buildings in a full 3D environment
- Zoning System: Residential, commercial, and industrial zones
- Infrastructure: Roads, power lines, and water systems
- Public Services: Hospitals, schools, fire stations, and police stations
- Economic Simulation: Budget management with income and expenses
- Population Growth: Dynamic population based on your city's development
- Grid-Based Building: Precise placement on a 50x50 grid
- Resource Management: Balance budget, population, and happiness
- Real-Time Simulation: City evolves and grows over time
- Building Development: Zones automatically develop when connected to roads
- Service Requirements: Citizens need access to essential services
- Modern 3D Graphics: Built with Three.js WebGL renderer
- Dynamic Lighting: Realistic shadows and lighting effects
- Smooth Animations: Fluid camera controls and building animations
- Intuitive UI: Clean, game-like interface with notifications
- Responsive Design: Works on desktop and mobile devices
- Open the game in your web browser
- Wait for loading - the city simulation will initialize
- Start building your first roads and zones
- Mouse: Navigate the 3D view (click and drag to rotate)
- Build Tool (1): Place buildings and infrastructure
- Bulldoze Tool (2): Remove unwanted structures
- Info Tool (3): Get information about specific areas
- Space: Pause/unpause the game
- Speed Controls: Adjust simulation speed (1x, 2x, 3x)
- Start by building roads to connect your city
- Add power lines and water pipes for utilities
- Roads are essential - buildings won't develop without road access
- Residential Zones (🏠): Houses for your citizens
- Commercial Zones (🏢): Shops and businesses that generate income
- Industrial Zones (🏭): Factories that provide jobs and income
- Power Plant (🏭): Provides electricity to your city
- Water Tower (🗼): Supplies clean water
- Hospital (🏥): Keeps citizens healthy
- School (🏫): Educates the population
- Fire Station (🚒): Protects against fires
- Police Station (🚓): Maintains law and order
- Starting Budget: $100,000
- Income Sources:
- Population taxes ($2 per citizen)
- Commercial buildings (random $10-30)
- Industrial buildings (random $15-45)
- Expenses:
- Base maintenance: $50
- Building maintenance: $5 per building
- Service buildings: $20 each
- Base Happiness: 50%
- Service Bonuses: +5% per service type (max +20% each)
- Population Penalty: -1% per 100 citizens over 1,000
- Budget Impact: -10% if budget below $1,000
- Three.js: 3D graphics and rendering engine
- JavaScript: Game logic and simulation
- HTML5/CSS3: Modern web interface
- Font Awesome: UI icons
- Google Fonts: Typography
- Object-Oriented Design: Modular CityBuilder class
- Grid System: 50x50 building grid with 2-unit cell size
- Event-Driven: Mouse and keyboard interaction handling
- Real-Time Simulation: Continuous game loop with time-based updates
- Optimized Rendering: Efficient Three.js scene management
- Shadow Mapping: Realistic lighting with optimized shadow quality
- Responsive Controls: Smooth camera movement with damping
- Memory Management: Proper cleanup of 3D objects
- Modern 3D Aesthetic: Clean, colorful building designs
- Realistic Lighting: Dynamic shadows and ambient lighting
- Color-Coded Systems: Easy identification of building types
- Smooth Animations: Fluid camera movement and building placement
- Intuitive Interface: Familiar city-building game conventions
- Visual Feedback: Immediate response to player actions
- Progressive Complexity: Start simple, grow into complex cities
- Satisfying Growth: Watch your city develop organically
- Traffic Simulation: Realistic vehicle movement on roads
- Disaster System: Natural disasters and emergency response
- Transportation: Public transit, airports, and harbors
- Advanced Zoning: Mixed-use developments and density controls
- Multiplayer: Collaborative city building
- Mod Support: Custom buildings and assets
- Save/Load: Persistent city storage
- Achievements: Goals and challenges system
- Performance Optimization: LOD system for large cities
- Enhanced Graphics: Better materials and post-processing
- Sound Design: Ambient city sounds and music
- Mobile Optimization: Touch controls and mobile-specific UI
- Chrome: 60+ (recommended)
- Firefox: 55+
- Safari: 12+
- Edge: 79+
- RAM: 4GB+ recommended
- Graphics: WebGL 2.0 support
- CPU: Modern multi-core processor
- Internet: Required for initial loading
- Plan Your Layout: Design road networks before zoning
- Balance Development: Mix residential, commercial, and industrial
- Service Coverage: Ensure all areas have access to services
- Monitor Budget: Keep income higher than expenses
- Population Growth: Build residential zones near services
- Hub Design: Create central service districts
- Economic Zones: Separate industrial areas from residential
- Transportation: Plan for future traffic flow
- Expansion: Grow gradually to maintain balance
- Specialization: Focus on specific city types (industrial, commercial, etc.)
# Clone or download the project
# No build process required - pure web technologies
# Serve the files with any static server
# Examples:
python -m http.server 8000
# or
npx serve .
# or simply open index.html in a modern browserskyline-cities/
├── index.html # Main game page
├── styles.css # Complete game styling
├── script.js # Game engine and logic
└── README.md # This documentation
This project is open source and available under the MIT License.
Contributions are welcome! Feel free to:
- Report bugs and issues
- Suggest new features
- Submit pull requests
- Improve documentation
🏗️ Start building your dream city today! Open index.html in your browser and begin your urban planning adventure.