Sea Arcade Project Story

Inspiration

The ocean has always been a place of wonder, mystery, and urgency. We wanted to build something that captured all three a game that felt fun and immersive but carried a real message about marine conservation. Watching our classmates sketch squids, anglerfish, pufferfish, and sharks on the whiteboard during brainstorming sessions sparked the idea of making those drawings literally come alive in the game. We were also inspired by classic arcade machines the idea that one cabinet could hold multiple worlds and we wanted to recreate that feeling in the browser, where anyone could jump in without downloading anything.

What It Does

Sea Arcade is a browser-based arcade experience where players dive into the ocean across multiple games and levels, each with its own challenges and environment. In the flagship game, Deep Sea Cat, a brave little cat in a diving helmet swims through three increasingly dangerous ocean zones The Shallows, The Twilight Zone, and The Abyss collecting underwater trash, avoiding enemies like jellyfish and electric eels, dodging underwater mines, and using a fishing boat on the surface to catch rare fish for bonus rewards. Players must both clean up all the trash and catch a fish to advance each level, making every stage a dual mission. A custom draw tool even lets players sketch their own fish and release them into the ocean to be caught.

How We Built It

We built the entire project using vanilla HTML, CSS, and JavaScript no game engines, no external libraries, just raw web technologies pushed to their limit. The game runs on the HTML5 Canvas API, with a custom frame-by-frame render loop that redraws every element sixty times per second. All sound background music, bubble pops, catch jingles, explosion effects, and the level-win fanfare was generated programmatically using the Web Audio API, meaning not a single audio file was loaded. Fish physics, collision detection, particle systems, and the boat hook mechanic were all hand-coded from scratch. Each whiteboard fish design the squid, anglerfish, jellyfish, pufferfish, and shark was recreated as pure canvas drawing code, translating our classmates' marker sketches into animated sea creatures.

Challenges We Ran Into

Integrating multiple games into a single cohesive arcade experience was our steepest hill to climb. Each game had its own state, its own loop logic, and its own input handling, and getting them to coexist without interfering with each other required careful architectural decisions. Within Deep Sea Cat specifically, implementing a pause system that truly froze every moving part enemies, particles, the fishing hook mid-drop, the cat itself without crashing the render loop demanded precision. We also struggled with the level progression logic: triggering the win condition only after both the trash and fish requirements were met, without accidentally firing early, took multiple rounds of debugging. Balancing the difficulty curve across three levels while keeping the game feel satisfying rather than frustrating was an ongoing negotiation throughout the build.

Accomplishments That We're Proud Of

We're proud that we built a fully functional, multi-level arcade game in pure HTML, CSS, and JavaScript without leaning on any game framework. Generating all audio through the Web Audio API including a real melodic fanfare that plays on every level clear felt like a genuine technical achievement. We're especially proud of the custom fish drawing tool, which lets players become co-creators of the ocean world they're playing in, and of translating our classmates' whiteboard sketches into animated, catchable sea creatures that actually swim through the game. Building a working pause system, a fishing hook mechanic with rarity tiers, and a particle explosion system from scratch are things we didn't know we could do when we started.

What We Learned

We learned game development from the ground up. Before this project, none of us had built a real-time game loop, worked with canvas-based rendering, or touched the Web Audio API. We learned how velocity, drag, and collision math turn into the feeling of smooth swimming. We learned how particle systems create visual juice the splashes, the sparks, the bubbles that make a game feel alive. We learned that game design is really systems design: every mechanic is a small machine, and the fun comes from how those machines interact. Most importantly, we learned that the gap between "this is too hard for us" and "we built this" is smaller than it looks when you just start building.

What's Next for Sea Arcade

Sea Arcade is just the beginning. We want to expand the arcade cabinet with more original games — each with its own ocean biome, its own cast of sea creatures, and its own conservation theme. We're looking at adding a leaderboard so players can compete across sessions, multiplayer support so friends can clean the ocean together, and more drawing tools so entire classrooms can populate the sea with their own creations. We also want to build out the story layer giving the cat a name, a backstory, and a world that grows as you play. The dream is a living, player-shaped ocean arcade that teaches, entertains, and surprises every time someone dives in.

Built With

Share this project:

Updates