Play Game
Bubble Cat is a browser-based bubble cat puzzle game inspired by classic puzzle mechanics. A non-commercial browser puzzle game inspired by Puzzle Bobble mechanics and the Warriors cat novel universe. Features a complete versus mode with AI opponent, 5-type bubble system, card-chain penalty scoring, illustrated cat character selection.Non-commercial browser puzzle game with classic bubble-shooter mechanics — cat theme
Core Stack
- Custom Bubble Physics Engine · Collision Detection · BFS/DFS Cluster Clear
- Web Audio API · AI Opponent Logic · Card-chain Penalty Scoring System
Game Architecture & Route Flow
- Modular component structure separating game logic, UI state, physics engine, and audio management
- Fan tribute to Puzzle Bobble and the Warriors cat novel universe — non-commercial, free to play
Bubble Physics & Versus Gameplay
- Custom collision detection: flight trajectory calculation, wall reflection, and precise grid-snap positioning
- BFS/DFS cluster detection for connected-group clear logic and gravity-drop for floating disconnected bubbles
- Real-time dual-panel rendering — player on left, AI on right
- Atmospheric Warriors universe forest background with illustrated cat art overlaying each board panel
Character Selection & Cat Art
- 7 + unique Warriors cat personas with distinct personality-driven illustrations
- Each cat displays a real-time bubble attribute color set preview on selection
- Character artwork reflects Warriors novel archetypes: fierce · curious · calm · playful · stoic · mysterious
- Selected character’s large illustration overlays the player’s game board panel during the match
5-Type Bubble System
- Standard color bubble — triggers row-clear when contacting a same-color cluster of 3 or more
- Star bubble — eliminates all bubbles of the matching color across the entire board instantly
- Red bubble — destroy all bubbles in the same row, regardless of color.
- Black full-clear bubble — removes every bubble from the board simultaneously
- Fixed immovable block — permanent obstacle that cannot be cleared by any bubble type
Technical Implementation
- Quasar component system for responsive cross-device UI — consistent on desktop and mobile browsers
- Self-written physics engine: trajectory, wall reflection, grid-snap positioning, floating-group gravity-drop
- Web Audio API for BGM and SFX — dynamic mute toggle with audio state persisted across route transitions
- Fully static deployment — zero backend, no server required, instantly playable via browser URL
Card-Chain Scoring & AI Opponent
- Every 5 cleared bubbles sends 1 yellow card to the opponent’s board as a penalty
- 3 yellow cards escalate to 1 red · 3 red cards escalate to 1 purple (maximum difficulty penalty)
- Card accumulation modifies the opponent’s board, creating escalating pressure throughout the match
- AI opponent executes independent board logic with timed shot intervals running in full parallel
- Consistent AI pace combined with card penalties creates genuine, sustained competitive challenge
