Bubble Pop Project Report
1. The Concept
Bubble Pop is a mobile-first underwater bubble shooter game. The player aims a launcher, shoots coloured bubbles, creates matches of three or more bubbles, and earns extra points by dropping bubbles that lose their connection to the ceiling.
The goal of the project was to create a polished casual-game experience in a responsive 9:16 layout while keeping the gameplay simple, fast, and easy to understand.
2. The Stack
The Stack: HTML, CSS, vanilla JavaScript, and the Canvas API.
The game runs from one index.html file. The supplied PNG artwork is reused for the underwater background, home screen, gameplay controls, launcher, and overlays. No framework, backend, package manager, or build process is required.
The AI Assist: Codex was used to help implement the game interface, Canvas rendering, responsive layout refinements, gameplay feedback, animations, sound effects, accessibility improvements, documentation, and visual adjustments against the supplied mockups.
3. The 1 Day Sprint
Morning (Hours 1–3): Set up the single-file game structure, load the supplied artwork, create the responsive 9:16 game shell, and build the home, how-to-play, settings, pause, win, and lose screens.
Afternoon (Hours 4–6): Implement the Canvas bubble board, aiming guide, wall bounce preview, shooter, projectile movement, collisions, bubble matching, detached-bubble drops, score progression, and unlimited-moves play mode.
The Finish Line (Hour 7–8): Refine the mobile and desktop layouts, align HUD and bottom controls, improve game-over and win overlays, add game-feel feedback such as particles, score popups, combo messages, sounds, haptics, recoil, and reduced-motion support. Finish with README and project documentation.
4. The Roadblocks
Roadblocks: The largest challenge was preserving the original visual proportions across very different viewport heights. A full-height mobile gameplay stage initially scaled Canvas artwork differently in the horizontal and vertical directions, which made bubbles appear oval. This was fixed by using uniform Canvas scaling and calculating the mobile launcher position in the extra logical stage height.
Another challenge was achieving a polished visual result with supplied assets that have different sizes and transparent padding. The home controls, HUD, launcher, next-bubble frame, and overlays were adjusted independently while keeping their original filenames and avoiding changes to the core gameplay rules.
Mobile touch behavior also required careful event handling. The swap interaction was changed from a generic click handler to direct pointer-release handling so a delayed touch click could not accidentally swap a bubble after a shot.
5. Key Takeaways
Small feedback details make a simple game feel much more responsive. Recoil, impact rings, score popups, particle effects, combo messages, and short sound effects give every shot a clear result without changing the core rules.
Responsive Canvas games need a single, consistent scale for visual objects. The game logic can use a larger logical area when needed, but circles and sprite artwork must always use the same horizontal and vertical scale.
Using supplied artwork as reusable components instead of full-screen clickable images keeps the interface responsive, accessible, and easier to maintain.
My final thought: Bubble Pop became a stronger mobile game by combining a focused core mechanic with clear visual feedback, responsive presentation, and a lightweight single-file implementation.