Classic Bubble Shooter

Seele01-Flash
By
Classic Bubble Shooter brings back the timeless arcade excitement of matching colorful bubbles. Clear the board by grouping three or more bubbles of the same color and aim for the highest score possible.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Classic Bubble Shooter". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: Glossy, colorful "Candy/Plastic" aesthetic. Use `THREE.SphereGeometry` for bubbles with a high-gloss `MeshPhysicalMaterial` (high roughness, clearcoat enabled) to simulate the shiny look seen in the reference image. * **Color Palette**: Vibrant, distinct colors for bubbles: Cyan, Magenta, Bright Yellow, Lime Green, Royal Blue, and Red. * **Lighting**: A combination of Ambient Light (soft white) and a Directional Light (casting shadows) to enhance the 3D spherical volume of the bubbles. * **Background**: A static, soothing vertical gradient (Light Blue to White) skybox or backdrop plane to match the "Classic" cheerful arcade vibe. * **Performance (Mobile)**: Use `THREE.InstancedMesh` for the bubble grid to render hundreds of bubbles with a single draw call to ensure 60 FPS on mobile devices. Limit polygon count on sphere geometry (e.g., `widthSegments: 16, heightSegments: 16`). ### 2. Audio Requirements * **BGM**: A lighthearted, looping casual arcade track (tempo ~100-110 BPM), featuring marimbas or synth-plucks. * **SFX - Launch**: A satisfying "Woosh" or spring sound when the bubble is fired. * **SFX - Collision/Pop**: A high-pitched "Plop" or bubble-wrap popping sound. Pitch shift slightly upwards for combo chains. * **SFX - Bounce**: A subtle "Thud" when a bubble hits the side walls. * **SFX - Game Over/Win**: A short joyful jingle for clearing the board; a descending sad trombone for losing. ### 3. Gameplay Loop * **Grid System**: Implement a standard hexagonal packing grid (staggered rows) at the top of the screen. * **Shooting Mechanic**: A "cannon" at the bottom center holds the current bubble. A "Next Bubble" preview is shown nearby. * **Physics & Collision**: * Bubbles travel in a straight line. * **Wall Bounce**: Bubbles must reflect off the left and right vertical walls (angle of incidence = angle of reflection). * **Grid Snap**: When the projectile hits a stationary bubble or the top ceiling, it snaps to the nearest valid grid coordinate. * **Matching Logic**: * **Match-3**: If the snapped bubble creates a cluster of 3 or more of the same color, destroy them. * **Floating Cluster Check**: After a pop, run a search (like BFS/DFS) to identify bubbles no longer connected to the ceiling. These "orphan" bubbles must drop/fall off the screen (giving extra points). * **Win/Loss**: * **Win**: Clear all bubbles from the field. * **Lose**: If the bubble grid reaches the bottom "deadline" (near the shooter). ### 4. Mobile Controls & Interaction * **Control Scheme**: **"Drag-to-Aim, Release-to-Shoot"**. * User touches anywhere on the screen and drags to rotate the cannon. * **Trajectory Line**: Render a dotted line (using `THREE.Line` or small sprites) showing the path of the bubble, *including the wall bounce reflection*, so players can aim precise bank shots on small screens. * Release touch to fire. * **Orientation**: Force **Portrait Mode** design to maximize the vertical play area for the bubble grid. * **Haptic Feedback**: Trigger `navigator.vibrate(15)` when a bubble is shot and `navigator.vibrate([30, 50, 30])` when a large cluster pops. * **UI**: * Top bar: Score display (Large, bold font). * Bottom area: Clear zone for the shooter mechanism, ensuring UI elements don't overlap with the Android/iOS gesture bar. * Restart Button: A large (minimum 44x44px hit area) button appearing on Game Over. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Classic Bubble Shooter is a beloved arcade-style puzzle game that captures the nostalgic fun of the original bubble shooting games. With a rating of 3.9/5, this HTML5 game offers endless entertainment as you aim, shoot, and match colorful bubbles to clear the board. The simple yet addictive gameplay makes it perfect for players of all ages and skill levels.

This free online game combines strategy, precision, and quick thinking as you work to create the largest possible bubble combinations while preventing the bubbles from reaching the bottom of the screen.

Core Features

Timeless Arcade Action

Experience the classic bubble shooting mechanics that made this genre famous. The game maintains the original charm while offering smooth, modern HTML5 performance that works seamlessly across all devices.

Strategic Puzzle Gameplay

Each shot matters! Plan your moves carefully to create chain reactions and massive bubble combinations. The physics-based gameplay adds realistic bounce and trajectory elements that enhance the strategic depth.

High Score Competition

Compete for the highest scores and challenge yourself to beat your personal best. The scoring system rewards larger bubble groups and efficient clearing strategies, encouraging multiple playthroughs.

Colorful Visual Design

Enjoy vibrant, eye-catching bubble graphics with smooth animations and satisfying pop effects. The clean interface ensures you can focus on the gameplay without distractions.

Brain Training Benefits

This isn't just entertainment - bubble shooting games help improve hand-eye coordination, spatial reasoning, and strategic planning skills, making it a perfect brain teaser for mental exercise.

Game Mechanics

The core gameplay revolves around shooting bubbles from the bottom of the screen toward clusters of matching colors at the top. When you connect three or more bubbles of the same color, they disappear from the board. Your goal is to clear all bubbles before they descend too far down the screen.

Physics-Based Shooting

The game features realistic physics that affect bubble trajectory. You can bounce shots off walls to reach difficult angles and create strategic plays that wouldn't be possible with straight shots alone.

Progressive Challenge

As you advance, the bubble arrangements become more complex, requiring increasingly sophisticated strategies to clear the board efficiently.

Operation Guide

Mouse Controls: - Aim : Move your mouse to direct the shooting angle - Shoot : Click to fire the bubble toward your target - Preview : The dotted line shows your shot trajectory

Touch Controls (Mobile): - Aim : Touch and drag to adjust shooting angle - Shoot : Tap to release the bubble - Precision : Use gentle movements for accurate targeting

Winning Strategies

  • Look for opportunities to create large groups before shooting
  • Use wall bounces to reach bubbles in difficult positions
  • Focus on bubbles that support large clusters - removing them can cause chain reactions
  • Plan several moves ahead to avoid getting stuck with difficult color combinations

Why Play Classic Bubble Shooter

Perfect for Everyone : The easy-to-learn mechanics make this game accessible to players of all ages, while the strategic depth keeps experienced players engaged.

No Download Required : As an HTML5 game, you can start playing immediately in any web browser without downloads or installations.

Cross-Platform Compatibility : Play seamlessly on desktop computers, tablets, and smartphones with responsive controls optimized for each device type.

Stress Relief : The satisfying bubble-popping action and colorful visuals create a relaxing gaming experience that's perfect for unwinding.

Mental Exercise : Regular play helps maintain and improve cognitive functions including pattern recognition, strategic planning, and reaction time.

Completely Free : Enjoy unlimited gameplay without any cost, subscription fees, or hidden charges.

Frequently Asked Questions (FAQ)