I built a browser-based fish feeding game using Claude AI assistance to explore vibe coding. Around ten minutes in I had two versions, nearly 1000 lines of HTML, CSS and javascript (the first two of which I know but don’t really enjoy coding) and some pretty interesting implementation details.
Version 1 is here. (Result of first basic prompt)
Version 2 is here. (After asking for a reset button and some special effects)
Version 3 is here. (After asking for a infinite food bugfix and phone compatibility – I haven’t written about this but just couldn’t resist a few more prompts to see if these last two slightly more complex fixes could be done. Super quickly responsive layout was added but it took another few prompts – and no manual coding – to finally get a working mobile game.)
The experience revealed some useful patterns for AI-driven development and highlighted several interesting technical implementations that emerged from the process.
The Brief: Simple Game Mechanics
The requirements were straightforward: build a top-down fish tank game where players drag food around to feed fish. Fish should chase food of their own color, grow when fed, and demonstrate “big fish eat little fish” behavior. The visual design should be cartoon-like with intuitive interactions. The initial prompt was:
You are a game designer with a focus on creating simple but beautiful art and layouts and building intuitive fun UX experiences.
I would like you to build a fish feeding game with a view over the top of a fish tank. There should be a few different coloured food sources around the tank which the player clicks and holds to pick up. When this happens fish of that colour will chase the food around the bowl. If you feed a fish it will get bigger, but if two fish run into each other the bigger fish will eat the smaller fish.
Could you build a one page JavaScript game with cartoon like graphics.After the first run I thought of some alterations – and all I needed to ask was:
Can you please add a reset button (and animate the remaining fish jumping out of the tank and a bucket pouring new fish in).
Could you add some simple water effects?
Could you add some watery and munching sound effects?Development Timeline: Concept to Polish
The initial version took about 5 minutes to implement. You can try version 1 here.
It includes core mechanics, fish AI, collision detection, and visual design with gradients and animations.
A quick play through suggested some improvements: add a reset game button and add some sound and water effects. This took a few moments to write and another few minutes for Claude to generate a new version. You can try version 2 here.
This approach allowed me to build a basic game structure – see how it felt and iterate on the idea. Building the game was as much of a game (more of a text adventure really) as playing the simple game itself. One really handy feature of Claude was that it showed me an in-Claude execution (perhaps in an IFRAME or similar) of the code before I had to download and run it elsewhere.
I’ve used much stronger structure prompting with Claude Code to build Wordle Analyzer but this was my first full code-free / vibe build. I can see how I could easily construct something (perhaps even something more useful) for a one-off-task or use this as the start of a more complex build. It also poses the interesting scenario (albeit with relatively limited complexity) of not just choosing a game to play at the end of the day – but to instead design and vibe code a completely new game just because I can.
It’s not perfect!
Other than being slightly simple and the procedural munching sounds not really sounding like munching – but they’re entertaining enough.
I’ve realised that the fish never stop eating my food – so long as I’ve clicked and held the fish will grow forever (not intended sure, but so far I’ve spent much more time looking at the generated code and writing this blog post than actually developing the game!).
For some reason Claude chose italic Comic Sans – and while I can sort of live with the font family a quick manual edit saw that italic removed and all of a sudden it was possible to read the text!
Just as with the font – the only manual change made and so representing about 20 seconds of my programming time – all these things can be changed and improved with very little effort. Manually if needed or continuing with the vibe. If I want to restart vibing after manual changes all I need to do is attach my latest copy and go from there.
Technical Implementation – What’s under the hood
It’s interesting to look at some of the techniques used to create this stand-alone one-page javascript application. In particular there are no external assets to load (something I’ve found I can trigger by asking for a one-page application, where the AI models are more than capable of generate complete directory and file structures with multiple assets).
Procedural Audio with Web Audio API
This was really cool – and something I hadn’t considered. Reading through this code was a sort of accelerated intro/learning opportunity. All sounds are generated procedurally using the Web Audio API instead of audio files. This approach provides:
- Zero loading time – no audio assets to download
- Random sound variation – each effect is slightly different
- Small footprint – the entire game is a single HTML file
- Immediate volume control response
Water sounds use filtered noise, munching sounds employ frequency sweeps, and bubble effects combine oscillators with exponential decay curves.
Canvas Rendering Pipeline
Similarly the fish graphics include random sizes and speeds (and are purely rendered using a HTML canvas). Simple but effective special effects like bubbles and ripples are all generated in code.
- Background gradients with animated floating bubbles
- Water distortion waves using sine functions
- Fish entities with shadows, wiggling tails, and eye tracking
- Particle effects for feeding hearts and eating bubbles
- Water ripples expanding from fish movement
- UI overlays for food sources and dragged food
The rendering pipeline handles transparency, shadows, and animation and the game play feels pretty seamless and smooth.
State Management
The game transitions between different modes:
- Normal gameplay – fish swimming, feeding, and collision detection
- Reset initiation – fish begin jumping animations
- Reset transition – bucket animation and fish pouring
- Reset completion – return to normal gameplay
This prevents conflicting behaviors (like spawning new fish during a reset) and coordinates multi-stage animations.
Emergent Behaviors from Simple Rules
Complex behaviors emerged from basic rule sets:
Fish movements: Fish randomly wander around the pond, randomly running into each other sometimes and can be forced to eat (or be eaten by) other fish when chasing matching food. It would not be hard (and again problem done purely by prompt) to add extra behaviours like bigger fish hunting smaller fish (and smaller fish hiding or running behind other slower fish) for some fun ecosystem dynamics.
Visual Polish: CSS transitions, canvas animations, particle effects, and procedural sound combine to create a cohesive experience – and one which can be adjusted by hand or vibing.
AI Development Patterns
Working with AI on this project revealed several patterns:
Holistic Start and Iterate: Rather than incremental building from the start – the Claude created a fully working prototype from which focused iteration and improvements could begin.
Design: Visual decisions were minimal (by my choice) – generating lots of CSS gradients, canvas rendering, and UI components without explicit style guides or definition. As these are areas I’m not all that interested in this is a huge bonus.
Creative Problem Solving: Solutions like Web Audio API for procedural sound and physics-based animations weren’t specified but emerged as practical approaches.
Development Process Observations
This experience demonstrates how AI-assisted development compresses the time between concept and working prototype. The traditional cycle of design → implement → test → refine became describe → enhance → polish. If I was actually building a game at this stage the generated code could be used in all sorts of ways:
- As a launching point for more detailed implementation
- To “reverse the flow” as a prompt used to then generate a more complex system specification – from which alternate development / testing plans / best tool analysis etc. could be done
- As a sort of prompt to write a blog post (hey, like this one!)
The quality of results still depends on clear initial requirements and the ability to identify useful enhancements. The AI handled technical execution well, but creative direction and feature prioritization and final responsibility for code safety and correctness remain human responsibilities.