Colorful Bubble Shooter | HTML5 Game

Bubble Shooter | HTML5 Game

Vibrant Bubble Shooter is a high-performance, single-file web application built using the HTML5 Canvas API. It features a fully responsive design, custom synthesized audio effects, and a procedural level generation system. Works in modern browsers like Opera, Chrome, Edge, iOS Safari, Chrome for Android

Key Design Goal: Zero external dependencies. All assets (UI, Logic, and Sound) are generated programmatically via JavaScript.

Hexagonal Grid Logic The game utilizes a staggered Row/Column Hexagonal Grid. To maximize space and create the “nested” bubble look, even-numbered rows are offset by half a bubble width.

Physics & Collision Collision detection is performed in two phases during the update loop

Wall Bouncing The projectile checks its horizontal bounds against the canvas width. On impact, the vx (velocity X) is inverted, creating a perfect reflection.

Grid Impact The engine iterates through all active bubbles in the grid. If the distance between the projectile and a grid bubble is less than Radius * 2, the projectile is “snapped” into the nearest empty grid slot.

Match Algorithm (BFS) Once a bubble snaps, the findMatches() function uses a Breadth-First Search (BFS) to identify all contiguous bubbles of the same color.

Queue-based Search: Starts at the impact bubble. Adjacency Check: Checks up to 6 neighbors (taking row offsets into account). Threshold: If the cluster size is ≥ 3, all bubbles in the cluster are marked for destruction. Following the match, a secondary Floating Check is performed to drop any bubbles that are no longer connected to the ceiling of the grid.

Rendering Pipeline The draw() function utilizes Canvas state transformations to handle high-DPI scaling and smooth animations.

Bubble Aesthetics Each bubble is rendered with a Radial Gradient to simulate depth and a “glossy” reflection point. This avoids the flat look of solid color circles.