Fish Feast Project Report
1. The Concept
Fish Feast is a casual, arcade-style browser game in which players control a small fish, eat safe prey, avoid larger predators, collect power-ups, and grow into the king of the ocean.
The game is designed for short, enjoyable sessions on mobile devices and desktop browsers. Its defining feature is the Thought Bubble, which shows players which type of fish is currently safe to eat. This creates a simple risk-versus-reward loop that is easy for beginners to understand while still requiring timing and awareness.
2. The Stack
The Stack: HTML5 Canvas, CSS, and Vanilla JavaScript
HTML5 Canvas handles game rendering, animation, characters, visual effects, and the gameplay interface. JavaScript manages player controls, collision detection, fish spawning, growth, scoring, power-ups, level progression, and local save data. CSS controls the responsive portrait layout and supporting screen presentation.
The game does not require a framework or build system. Player progress is stored locally through the browser’s localStorage.
The AI Assist: OpenAI Codex and OpenAI image-generation tools assisted with game planning, UI/UX design, code development, debugging, asset creation, project cleanup, and documentation.
AI-generated assets were used to establish a consistent visual style for the fish, power-ups, buttons, logo, interface components, and underwater environments.
3. The 1 Day Sprint
Morning (Hours 1–3): The first stage focused on defining the game concept, target audience, core gameplay loop, and MVP scope. Design references and project rules were reviewed to ensure the interface felt like a commercial mobile game instead of a traditional website. The project was structured around short levels, simple pointer and touch controls, rapid retries, and a clear eat-or-be-eaten system.
Afternoon (Hours 4–6): The playable prototype was developed using HTML5 Canvas and Vanilla JavaScript. Player movement, NPC spawning, collision detection, growth, scoring, coins, level progression, and the Thought Bubble system were implemented. Power-ups such as the Growth Potion, Stopwatch, and Blue Shield were added. Responsive support was created for both mobile and desktop browsers, together with game-over, victory, pause, retry, shop, and progress-saving systems.
The Finish Line (Hours 7–8): The visual assets and underwater environments were integrated into the game. The interface, controls, and asset loading were tested in a browser. Unused source images, black-background versions, duplicate backgrounds, debug files, and obsolete prototype code were removed. The project documentation was updated, and the final cleaned build was verified to load without browser errors.
4. The Roadblocks
Roadblocks: One of the main challenges was balancing the requirements of a responsive browser game with the visual expectations of a commercial mobile game. The interface needed to work on different screen sizes without looking like a website or dashboard.
Another challenge was managing the growing collection of image assets. Several source files, background variants, intermediate images, and obsolete assets accumulated during development. Every reference had to be checked before cleanup to avoid removing files still required by the game.
Maintaining smooth gameplay also required careful use of requestAnimationFrame, controlled object spawning, reusable game objects, limited pixel density, and efficient collision calculations. Touch and mouse input had to produce consistent movement across mobile and desktop devices.
5. Key Takeaways
A strong core gameplay loop is more important than producing all 16 levels immediately. A smaller playable prototype makes it easier to test whether movement, growth, risk, rewards, and retries feel enjoyable.
A game interface should present only the information the player needs at that moment. Large controls, clear silhouettes, minimal text, strong contrast, and immediate visual feedback make the game easier to understand.
Separating gameplay parameters from the core logic makes future balancing and level expansion easier. Asset management is also essential because unused high-resolution images can quickly increase the project size.
Vanilla JavaScript and HTML5 Canvas are capable of delivering smooth casual-game experiences when rendering, input, spawning, and collision systems are designed carefully.
My final thought: Fish Feast successfully reached the playable-prototype stage within a focused one-day sprint. The project now has a functional gameplay foundation, a recognizable visual identity, responsive controls, and a structure that can be expanded into a complete 16-level casual arcade game.