Aura City

Build a sustainable city, balance economy and environment, and lead Aura City to prosperity!

Comment

About the project: Aura City | Ultimate Edition

Inspiration

The inspiration behind Aura City came from observing real-world urban challenges such as pollution, overpopulation, and resource management. We wanted to create an interactive simulation that allows players to understand how city planning decisions impact happiness, economy, and the environment. Our goal was to make learning about sustainability fun, engaging, and accessible.

What it does

Aura City is a city-building simulation game where players:

  • Construct buildings like parks, houses, solar farms, and factories.
  • Monitor environmental impact (CO₂ levels), citizen happiness, and treasury funds.
  • Unlock achievements based on milestones like creating a green city, generating clean energy, or balancing industry and environment.

The game uses simple resource management mechanics to teach players the consequences of urban planning. For example, building too many factories increases pollution ( CO_2 ), which can lower happiness:

[ \text{Total CO₂} = \sum_{i=1}^{n} CO2_i ]

while adding green spaces reduces CO₂:

[ \text{CO₂}{new} = \text{CO₂}{total} - \sum_{j=1}^{m} CO2_{reduction_j} ]

How we built it

We built Aura City using HTML, CSS, and JavaScript. Key features include:

  • Dynamic UI: sidebars display live stats like treasury, happiness, and pollution.
  • Interactive grid: players place buildings on a 24-tile map.
  • Sound and visual feedback: background music, sound effects, toast notifications, and confetti for achievements.
  • Responsive design: works on desktop and mobile devices using media queries.
  • Simulation engine: a JS object manages game state, economy loops, day/night cycles, and achievement tracking.

Challenges we ran into

  • Balancing the economy: Making sure building costs, revenue, and CO₂ impact were realistic and fun.
  • Responsive design: Ensuring the game looks good on small mobile screens without losing usability.
  • User feedback: Designing clear notifications for players about errors or achievements.
  • Sound integration: Making audio cues work seamlessly with gameplay without becoming distracting.

Accomplishments that we're proud of

  • Successfully created a fully interactive simulation playable in a web browser.
  • Implemented achievements and milestone system to reward thoughtful gameplay.
  • Integrated educational elements about sustainability and urban planning in an engaging way.
  • Ensured smooth performance and responsive design across devices.

What we learned

  • How to structure a simulation engine in JavaScript that tracks multiple variables.
  • Best practices for responsive UI and UX for games.
  • The importance of player feedback loops in interactive design.
  • How to balance gameplay mechanics to be both fun and educational.

What's next for Aura City

  • Add new building types and policies to simulate more complex urban challenges.
  • Include data analytics reports for players to see the impact of their decisions.
  • Create community scenarios where players can compete or collaborate in city planning.
  • Potentially expand to a mobile app version with improved visuals and interactive tutorials.

Built With

Share this project:

Updates