Space Bubble - An Interactive Card Game that Explores Social Distancing

About the Project

The web-based game project developed directly from the client’s Adobe Illustrator files. The challenge here was managing the large image files from the design sources. A significant portion of time was spent on exporting, organizing, and compressing these images for web deployment, due to their substantial size in the source files.

The main development phase involved first establishing the basic gameplay logic, then refining details to align with the client’s specifications. The project utilized Next.js, TypeScript, and Adobe Illustrator for its development.

Challenges

The game’s logic was not overly complex; the primary difficulties lay in creating dynamic animations, defining player moves, moving ‘pieces’ to the correct cards, and revealing these cards to trigger various game outcomes.

Screenshots

Summary

This project was my first experience with web development incorporating game logic. Crafting the gameplay mechanics was an enjoyable task, while organizing and optimizing the images was more challenging.