Bubble Shooter – Browser Arcade Game

🎯 Problem Statement

Many browser games either require installation, external libraries, accounts, or large downloads before a user can start playing. I wanted to create a lightweight arcade game that could run directly in a web browser without requiring a backend, database, login, or external game engine. The main goal was to build an entertaining Bubble Shooter experience while practising JavaScript game logic, Canvas graphics, collision detection, score management, responsive design, and browser-based deployment.

🛠️ What I Built

I built a complete browser-based Bubble Shooter arcade game using HTML, CSS, and JavaScript. The player controls a bubble launcher at the bottom of the game board. The objective is to aim and shoot bubbles toward matching colours. When three or more bubbles of the same colour connect, the complete cluster is removed. The game runs inside an HTML5 Canvas, where JavaScript handles the bubble board, aiming system, shooting movement, collision detection, visual effects, and game state. Bubble Grid I implemented a staggered bubble grid to reproduce the hexagonal layout normally used in Bubble Shooter games. Each bubble can have up to six neighbouring positions. The game calculates these neighbours differently for odd and even rows. This grid system is used for: Bubble placement Collision snapping Colour matching Cluster detection Unsupported-bubble detection Row advancement Colour-Matching Logic When a new bubble is attached, the game searches connected neighbouring bubbles of the same colour. If the connected cluster contains at least three bubbles, the cluster is removed from the board. I implemented a queue-based search algorithm to visit neighbouring cells, prevent duplicate checks, and identify the complete matching cluster. Floating Bubble Detection After a colour cluster is removed, some bubbles may no longer be connected to the top of the board. The game searches from the top row to identify bubbles that are still anchored. Any bubbles that are not connected to the ceiling are treated as floating bubbles and dropped from the board. Players receive additional points for dropping these unsupported bubbles. Scoring and Combo System The game tracks several statistics: Current score Best score Current level Total shots Combo count Popped bubbles Dropped bubbles Occupied rows Successful matches increase the combo value and provide bonus points. Dropping unsupported bubbles provides a larger score reward. The best score is saved in the browser using Local Storage, allowing it to remain available after the page is refreshed or reopened. Level Progression The game includes multiple levels with increasing difficulty. As the player progresses: More rows can appear Additional bubble colours are introduced The board becomes more complex The row-drop limit becomes stricter Players must make matches more efficiently A new level begins when the player successfully clears the complete board. Row-Drop Pressure System Unsuccessful shots increase the row-drop meter. After a specific number of unsuccessful shots, a new row of bubbles is added and the existing board moves downward. The allowed number of misses decreases at higher levels, making the game progressively more difficult. A danger indicator informs the player when bubbles are approaching the lower limit of the game board. Game Controls The game provides controls for: Starting the game Aiming and shooting Pausing and resuming Restarting Turning sound on or off The interface also contains overlays for the initial screen, paused state, level completion, and game-over state. Sound Effects I used browser-generated audio effects for important game actions, including: Shooting Bubble attachment Bubble popping Bubble dropping Wall collisions Unsuccessful shots The player can enable or disable sound using the sound-control button. Responsive Interface The layout adapts to desktop, tablet, and mobile screen sizes. On smaller screens: The game board scales down Statistics reorganize into smaller grids The side information panel moves below the game Buttons and overlays remain accessible Spacing and text sizes are adjusted Deployment I uploaded the source code to GitHub and deployed the game using GitHub Pages. The game runs entirely in the browser and does not require a separate backend server.

🔥 Challenges I Faced

One of the main challenges was creating the staggered bubble grid. Unlike a normal square grid, Bubble Shooter uses offset rows where bubbles fit between the bubbles above them. I had to calculate different neighbour positions for odd and even rows to make bubble matching and placement work correctly. Another difficult part was collision detection. A moving bubble must: Bounce from the side walls Detect contact with another bubble Stop without overlapping Attach to the nearest available grid cell Avoid being placed outside the board Cluster detection was also challenging. The game needed to find all connected bubbles of the same colour without repeatedly checking the same cells. I solved this using a queue and a visited-cell set. Detecting floating bubbles required a different search process. After removing a cluster, the system had to identify which remaining bubbles were still connected to the top of the board and which should fall. Other challenges included: Managing multiple game states Keeping movement smooth at different frame rates Designing a fair scoring system Increasing difficulty between levels Preventing impossible bubble colours Maintaining accurate score and statistics Saving the best score in Local Storage Creating sound effects without external audio files Scaling the Canvas for smaller screens Keeping the game playable on different devices Testing wall-bounce angles Handling restart, pause, level completion, and game-over behaviour Publishing the project correctly through GitHub Pages

💡 What I Learned

I learned that game development requires continuous testing. A small calculation problem in collision detection, grid placement, or neighbour selection can affect the complete game.

🚀 Future Improvements

In future versions, I would add: Next-bubble preview Bubble-swapping feature Power-up bubbles Bomb bubbles Rainbow bubbles Aim-guide prediction line More visual particle effects Background music Multiple game modes Timed challenge mode Limited-shot mode Endless arcade mode Difficulty selection Player profiles Online leaderboards Achievement system Daily challenges Save-and-resume functionality Improved mobile touch controls Haptic feedback on supported phones Full-screen mode Progressive Web App support Offline installation Additional themes Custom bubble designs Accessibility settings Colour-blind mode Automated JavaScript tests Separate HTML, CSS, and JavaScript files Improved code modularity Performance optimization Multiplayer or competitive score mode The long-term goal would be to turn the project into a polished mobile-friendly arcade game with multiple modes, achievements, leaderboards, and installable offline support.

🧰 Tech Stack & AI Tools

🤖 AI Reviewer Feedback

Great job delivering a fully functional, responsive Bubble Shooter with solid game mechanics and thoughtful features like combo scoring and floating bubble detection. To elevate the project further, consider refining the touch controls for mobile devices and organizing the code into modules or classes for easier maintenance and future expansion.