p
A full-featured, 2D top-down city builder built with pure HTML, CSS, and JavaScript. No frameworks or libraries. Everything runs in the browser.
📦 Features
Drag and drop roads, buildings, and parks
Grid snapping system
Zoom and pan controls
Budgeting and cost management
Save/load city using localStorage
Theme toggle (day/night)
Mini-map rendering
Undo/redo system
Screenshot/export to image
Achievements for item placements
Tutorial onboarding overlay
📁 File Structure
city-designer/ ├── index.html ├── styles.css ├── scripts/ │ ├── app.js │ ├── achievements.js │ ├── constants.js │ ├── events.js │ ├── grid.js │ ├── logic.js │ ├── renderer.js │ ├── state.js │ ├── storage.js │ ├── tutorial.js │ ├── ui.js │ └── utils.js
🚀 How to Run
Download and unzip the project.
Open index.html in any browser.
Start building your city!
No installation required.
📸 Screenshot & Theme Toggle
Click the camera icon to download your city as an image.
Use the theme toggle to switch to night mode.
🧠 Credits
Created by zeyad , June 2025. Help hassan 😉😉