SpySquirrel

Inspiration

After checking in, your brain can only brainstorm so much when you're off of four hours of sleep and a dream. My teammate and I collectively decided that it was best to feed our brains, so we went to Glasgow. On our way there, I notice a squirrel up in a tree, while my teammate could not find it. That is what gave me the idea of making SpySquirrel.

What it does

SpySquirrel is a web-based training simulation for aspiring secret agents. We’ve gamified the "art of the spy" into a series of four progressively difficult field tests. Players start as a rookie and must navigate through diverse training scenarios testing their agility, reaction time, and memorization to eventually earn the rank of "Legend."

How we built it

We drew inspiration from classic browser-based games (like Duck Life), focusing on a high-energy, "cartoon-style" aesthetic. We used custom CSS animations for the scrolling clouds, floating mascot, and hover states to give the game a snappy, polished feel.

To handle the "Dossier" (progression system), we implemented browser localStorage. This allows the game to persist the player's rank across different mission pages without needing a back-end database.

We focused on a responsive, mobile-friendly design using CSS Grid and Flexbox to ensure that whether you're playing on a desktop or a phone, the spy training never stops.

Challenges we ran into

We initially struggled to make the entire UI feel like a cohesive app rather than just a collection of links. We had to iterate on our CSS to make the mission cards fully clickable, providing visual feedback that matches modern app expectations.

Accomplishments that we're proud of

We’re really proud of the design language. The mascot animations, the floating "stars" around the squirrel, and the vibrant color palette make the game feel like a legitimate product rather than just a hackathon prototype.