Reef Riot

Inspiration

Reef Riot was inspired by the real-world damage happening to coral reef ecosystems because of pollution, climate change, and habitat destruction. We wanted to create something interactive that makes environmental issues feel immediate, emotional, and memorable instead of just informational.

What it does

Reef Riot is an educational action game/experience where the player explores a damaged reef as a shark and works to restore the environment. Players interact with pollution zones, clear hazards, help marine life, and push the reef from a corrupted state toward healing and restoration. Along the way, the game shows facts and environmental messaging to connect gameplay with real ocean issues.

How we built it

We built Reef Riot as a web-based interactive experience using a React + Vite frontend with game-style logic for movement, interactions, objectives, and visual state changes. The project uses custom components for the shark, pollution nodes, enemies, particles, stats, objectives, overlays, and fact cards. We also connected backend support to help structure the project and prepare it for future expansion.

Challenges we ran into

One of our biggest challenges was building game behavior inside React, which is not traditionally designed for games. Getting the shark’s movement to feel smooth was harder than expected. We had to carefully manage keyboard event listeners with useEffect and handle cases where multiple keys were pressed at once; otherwise, the shark felt laggy or unresponsive.

State management was another major hurdle. The game has many interconnected pieces—reef health, pollution levels, cleared hazards, and player stats—and keeping them all in sync was tricky. When the shark clears a pollution node, the reef health needs to update, the node needs to disappear, and a fact card might trigger all at once. Getting that to happen cleanly, without flickering or updates happening out of order, took a lot of debugging.

As the project grew, we also had to refactor our component structure mid-development to keep the codebase organized and manageable. Beyond the technical side, we had to balance gameplay, visual design, and storytelling. We wanted Reef Riot to feel engaging and fun while still clearly communicating the environmental message behind reef restoration. Working within a limited timeframe also meant that collaboration, delegation, and integrating different parts of the project were challenges throughout the process.

Accomplishments that we're proud of

We’re proud that Reef Riot is more than just a game concept—it communicates a meaningful environmental cause through interaction. We created a playable experience with clear goals, progression, visual feedback, and an educational purpose centered on reef restoration and ocean conservation.

What we learned

We learned a lot about building interactive systems in React, organizing components, managing game state, and designing with both engagement and impact in mind. We also learned how important it is to connect storytelling, visuals, and user interaction when building for a cause.

What's next for Reef Riot

Next, we want to expand the world, improve animations and art, add more missions and marine species, connect more live environmental data or educational content, and make the experience even more immersive and replayable.

Built With

• component-based-ui-design
• css
• gamestatelogic
• github
• javascript
• python
• react
• uvicorn
• vite
• vscode