Bubble Invasion - Free Online Bubble Shooter Game
Prompt
MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Bubble Invasion". Please read the following detailed game design requirements first, and then generate the code accordingly:
### 1. Assets & Environment
* **Visual Style**: A "2.5D" Candy/Glossy aesthetic. The game should be viewed from a top-down or slightly angled perspective (OrthographicCamera recommended for gameplay precision, or Perspective with a narrow FOV).
* **Bubbles**: Use `THREE.SphereGeometry` with `THREE.MeshPhysicalMaterial`. They should look like shiny, polished candy or glass orbs with high transmission and clear coat to emphasize the "Cute" tag. Colors must be vibrant (Red, Cyan, Yellow, Lime Green, Purple).
* **The Cannon**: A stylized, low-poly turret or mechanical launcher located at the bottom center. It should rotate based on input.
* **Background**: A deep violet/purple gradient plane or skybox (referencing the screenshot's purple hue) to make the bright bubbles pop.
* **Lighting**: Soft `HemisphereLight` for base illumination, plus a `DirectionalLight` casting soft shadows to give depth to the bubble cluster.
* **Mobile Optimization**: Use instanced mesh (`THREE.InstancedMesh`) for the bubbles to maintain 60 FPS on mobile devices, as there may be hundreds of bubbles on screen.
### 2. Audio Requirements
* **BGM**: An upbeat, casual "puzzler" track. Electronic but soft, resembling Marimba or Synth-pop, increasing in tempo slightly as the bubble wall descends.
* **Sound Effects (SFX)**:
* **Shoot**: A pneumatic "Thwump" or "Pop" sound.
* **Bounce**: A light rubbery "ping" when the ball hits the side walls.
* **Stick**: A wet "clack" when the bubble attaches to the grid.
* **Match/Explode**: A satisfying high-pitched chime or glass-shattering sound for clearing groups.
* **Warning**: A low throbbing sound when the wall gets close to the player.
### 3. Gameplay Loop
* **Grid System**: Implement a **Hexagonal Grid** system (staggered rows) for bubble packing.
* **Shooting Mechanic**: The player fires a bubble from the bottom. It travels in a straight line, bouncing off the vertical side walls (simple reflection physics), until it collides with an existing bubble or the top ceiling.
* **Matching Logic**: When a bubble lands, run a recursive search (Flood Fill). If it connects to 2 or more bubbles of the same color (total 3+), destroy them.
* **Structural Integrity (The "Hidden Artery" mechanic)**: After a match, check for "floating clusters" (bubbles not connected to the ceiling). Any floating bubbles must fall off the screen (physics gravity drop) and award extra points.
* **Invasion Mechanic**: Every X shots (or every X seconds), the entire grid shifts down one row. New random rows are generated at the top.
* **Win/Loss**:
* **Loss**: If any bubble crosses a defined "Danger Line" near the shooter.
* **Win**: Clear the board completely (or achieve a high score in Endless mode).
### 4. Mobile Controls & Interaction
* **Control Scheme**: **"Drag to Aim, Release to Fire"**.
* Touch anywhere on the screen and drag to rotate the cannon.
* Display a **Trajectory Line** (dotted raycast) that shows exactly where the ball will travel, including the first bounce off the wall. This is crucial for the "Think fast and aim true" requirement.
* Release the finger to fire the bubble.
* **Orientation**: Portrait Mode (Vertical) is preferred for one-handed play.
* **UI Elements**:
* Score display at the top (large, readable font).
* "Next Bubble" preview indicator near the cannon.
* Restart/Pause button in the top corner (min size 44x44px).
* **Feedback**:
* **Haptics**: Trigger a short vibration (`navigator.vibrate(20)`) when shooting and a heavier vibration when clearing a large cluster.
* **Visual Juice**: Screen shake slightly on massive combos. floating text ("+100") appears when bubbles pop.
Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.
Game Introduction
About the Game
Bubble Invasion is a thrilling bubble shooter game that puts you in command of a powerful chromatic cannon. With a stellar 4.4/5 rating from players, this colorful arcade game challenges you to match bubbles of the same color while racing against time. The game features vibrant graphics, intuitive controls, and addictive gameplay that keeps players coming back for more.
As the commander of the rainbow army, your mission is to strategically fire colored orbs to create matches of three or more identical bubbles. Watch as they burst and disappear, clearing your path to victory. But beware - the wall of colorful bubbles slowly creeps toward you, adding urgency to every shot.
Core Features
Instant Play Action
- Completely Free : No downloads, no registration required - just pure bubble-popping fun
- Cross-Platform Compatible : Perfect performance on desktop computers, tablets, and smartphones
- HTML5 Technology : Smooth gameplay in any modern web browser
- All Ages Content : Family-friendly entertainment suitable for players of all skill levels
Strategic Gameplay Mechanics
- Smart Aiming System : Precise mouse and touch controls for accurate bubble placement
- Bank Shot Strategy : Use wall bounces to reach difficult spots and create spectacular combos
- Combo System : Chain multiple matches together for massive point bonuses
- Progressive Difficulty : The descending bubble wall creates increasing pressure and excitement
Colorful Visual Experience
The game features a vibrant rainbow of bubble colors, each beautifully rendered with smooth animations. The chromatic cannon design and cute visual style make every gaming session a delightful experience.
Game Controls
Desktop Players
- Mouse : Point and click to aim and fire your colored orbs
- Precision Aiming : Move your mouse to line up the perfect shot
- Strategic Positioning : Plan your shots to maximize bubble elimination
Mobile Device Controls
- Touch Interface : Tap anywhere on screen to aim your cannon
- Intuitive Gestures : Simple finger movements for precise bubble placement
- Responsive Design : Optimized touch controls for smartphones and tablets
Why Play Bubble Invasion
Bubble Invasion stands out in the crowded bubble shooter genre with its perfect balance of strategy and action. The game's unique chromatic cannon concept and military-themed narrative add depth to the classic match-3 formula. Whether you're looking for a quick 5-minute break or an extended gaming session, this title delivers consistent entertainment.
The progressive difficulty system ensures that both newcomers and bubble shooter veterans will find appropriate challenges. The ability to create massive chain reactions by targeting "hidden arteries" in the bubble wall adds a satisfying strategic element that rewards careful planning and skillful execution.
Perfect for Any Gaming Session
- Quick Matches : Ideal for short breaks and casual gaming
- No Commitment : Play as long or as little as you want
- Stress Relief : Satisfying bubble-popping action helps unwind
- Skill Development : Improves hand-eye coordination and strategic thinking
Frequently Asked Questions (FAQ)
Is Bubble Invasion completely free to play?
+
Yes! Bubble Invasion is completely free with no hidden costs, in-app purchases, or premium features. You can enjoy the full game experience without spending any money.
Do I need to download anything to play?
+
No downloads required! Bubble Invasion runs directly in your web browser using HTML5 technology. Simply visit the game page and start playing instantly.
Can I play on my phone or tablet?
+
Absolutely! The game is fully optimized for mobile devices with responsive touch controls. It works perfectly on iOS and Android smartphones and tablets.
How do I aim and shoot bubbles?
+
On desktop, use your mouse to point and click where you want to shoot. On mobile, simply tap the screen where you want to aim your colored orb. The cannon will automatically fire in that direction.
What happens when the bubbles reach the bottom?
+
If the descending wall of bubbles reaches the bottom of the screen, the game ends. You must clear bubbles fast enough to prevent this from happening and achieve high scores.
How do I create combos and high scores?
+
Match 3 or more bubbles of the same color to clear them. Look for opportunities to use bank shots off walls and target clusters that will cause large sections to fall for bonus points and combos.
Is there a time limit in the game?
+
While there's no strict time limit, the wall of bubbles slowly moves down as you play, creating natural time pressure. The longer you take between shots, the closer the bubbles get to the bottom.
What makes Bubble Invasion different from other bubble shooters?
+
Bubble Invasion features a unique chromatic cannon concept, military rainbow army theme, and strategic bank shot mechanics that allow for spectacular chain reactions and massive point bonuses.