Sea Bubble Shooter
A browser-based bubble-shooting arcade game with an underwater oceanic theme, featuring 40 levels across 5 planets, boosters, a daily lottery system, in-game shop, and integrated ad monetization — built with Cocos2d-JS and deployed as a static HTML5 game for the Famobi game portal.
Problem
Build a mobile-first HTML5 bubble-shooter arcade game that runs smoothly at 60fps across browsers, supports 40+ levels with progressive difficulty, integrates ad monetization (interstitial + rewarded video), and packages cleanly for distribution on the Famobi game portal — all while maintaining a small footprint and consistent gameplay experience on both desktop and mobile.
Approach
Leveraged Cocos2d-JS as the core 2D game engine for its成熟 rendering pipeline (WebGL + Canvas fallback), scene management, sprite batching, and particle system support. Designed a grid-based bubble physics system with wall-bouncing trajectories, color-matching group detection, and a synchronized state machine to manage gameplay flow. Built a full progression system with planet-gated levels, star ratings, localStorage persistence, and an in-game economy (coins, lives, boosters). Integrated the Famobi SDK end-to-end for ads, GDPR consent, i18n (10 languages), analytics, and cross-promotion.
Key Engineering Decisions
Single-bundle fat-file architecture
Merged the entire Cocos2d-JS engine + game code into one minified all.js file (~37k lines). This eliminated HTTP request overhead for portal embedding and ensured instant load on Famobi's CDN, trading maintainability for deployment simplicity — a deliberate trade-off for a production HTML5 game.
TexturePacker sprite atlas for all UI
Consolidated all bubble sprites, buttons, particles, and UI elements into a single UI.png texture atlas with plist metadata. This minimized GPU draw calls and memory usage, enabling smooth 60fps rendering even on lower-end mobile devices.
LocalStorage-based progression with fallback
Implemented a Storage wrapper using localStorage for level progress, coins, boosters, and settings — with an in-memory fallback (Saver proxy) for private browsing modes. This ensured game state persistence without requiring a backend server.
Famobi SDK-first monetization design
Integrated ad monetization (interstitial + rewarded video) and analytics from the architecture phase rather than retrofitting it. Rewarded ads power the core economy loop (free coins, lives, boosters), creating a natural engagement funnel while keeping the game playable without purchases.
Portrait-first responsive design
Set the design resolution to 640x1136 portrait with FIXED_HEIGHT scaling policy and retina support. Added an orientation lock overlay for desktop users. This prioritized the mobile casual gaming audience while ensuring desktop playability.
Object pooling for sprite management
Used Cocos2d's built-in object pool pattern for bubble and effect sprites to avoid garbage collection pauses during gameplay. This prevented frame drops during intense bubble-popping sequences with many simultaneous particles.
Results
40
Levels across 5 themed planets
60fps
Smooth gameplay on mobile and desktop
10
Languages supported via i18n
3
Monetization streams (interstitial, rewarded, cross-promo)
1
Static deployment — zero backend required
<100KB
Initial HTML payload (engine + game bundled)
Technologies