🕹️ Inspiration

Games in the Civilization franchise were some of our favourite childhood games as we could conquer other players, create alliances, and build our empire. One of the things that we always tried to do was pretend to roleplay in these games as if we were in real-world location doing actual historical fights. Paying homage to the original retro PC game Civilization (1991), the original game in the series, we created MiniCiv.

👾 What it does

MiniCiv is an 8-bit local-multiplayer browser-game recreation of Sid Meier's Civilization (1991) where players can play a Civ game with a map they can pick as anywhere in the world. Upon starting their game, players can choose their Civilization and their map using a Google Maps interactive map, and are then put into a game where they can found cities, build roads, create warriors to defend themselves, choose the production of their cities, all like an actual miniature Civ game!

🛠️ How we built it

Front End: HTML, CSS, Vanilla Javascript
Back End: Flask, Python
Google Cloud APIs: Google Maps Static API, Google Maps Javascript API
Image Processing: Pillow

🚧 Challenges we ran into

  • Python scoping issues and circular imports (we ended up solving the circular imports by putting all the game code in one giant file 😎)
  • Using the Pillow library within Python for map image processing.
  • Trying to get the latitude and longitude of the Google Maps Javascript API programatically of the user-selected starting location
  • Trying to get the Google Maps Static API to return a high-contrast image for better map-processing.
  • Adding a persistent server state to allow switching between browser windows. (This was really frustrating at the time of the bug.)
  • Creating functional road tiles which need to change graphics depending on if there are roads beside it. (We ended up using a recursion-ish approach)

✅ Accomplishments that we're proud of

  • Creating a docstring/type annotation for each one of our functions, classes, and modules (for code maintainability and future expandability)
  • Processing images into maps using the Pillow image library
  • Using the Google Maps Javascript API to have an interactive map in the browser and the Google Maps Static API to return an image which then can be processed into a map.
  • Setting up a Python game in the browser using Flask
  • Creating a whole friggin civ game in 48 hours!! :D 🎉

💡 What we learned

  • Got a strong grasp of Flask to implement the backend server to communicate with the browser.
  • Incorporated image-processing techniques through the pillow library to aid in the photo conversion paving the way for automated map generation
  • Learned a lot about Python scoping, class typing, and module organization for better code practices!
  • Learned how to use some of the Google Maps APIs properly to implement something we're proud of!
  • A funny thing we also learned was that pre-made game engines/libraries are a lot more helpful than we thought they were and just how many things it does to help the developer to not run into the same low-level bugs that we did 😅

💭 What's next for MiniCiv

Moving forward we would like to add so many more actual Civ features that we didn't get to in the 48 hours like resource tiles, more units, a time system, a technology tree, religion, and so much more. On top of this, we're looking forward to updating various graphics for the cities, units and terrain tiles as currently, it's a little hard to tell what everything is. Another huge thing that we would do if we were to continue with MiniCiv is to make an online multiplayer system, so that we can finally have it so, even during the COVID-19 pandemic, we can still recreate these epic historical battles from the comforts of our homes!

+ 1 more
Share this project: