Fill It - Physics Puzzle Game

Seele01-Flash
By
Fill It is an engaging physics-based puzzle game that challenges players to fill containers through strategic tapping and precise timing. With intuitive controls and progressively challenging levels, it's perfect for puzzle enthusiasts of all skill levels.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Fill It". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** Minimalist 2D aesthetic rendered in a 3D WebGL context. Use a high-contrast color palette inspired by the logo: Deep Black background (`#101010`), Neon Blue (`#0055FF`) for the player's fill area, and Metallic Silver/Grey for obstacles/enemies. * **Camera:** Use an Orthographic Camera fixed at a top-down view to ensure precise gameplay judgment. * **Assets:** * **Player Objects:** Smooth spheres or flat circles (using `THREE.CircleGeometry` with low segment count ~32 for performance) that expand dynamically. * **Enemies:** Small, jagged shapes or smaller red spheres that move constantly within the play area. * **Boundaries:** A visible white wireframe box defining the playable level area. * **Performance:** strictly manage polygon count. Use **InstancedMesh** if rendering many identical particles. Ensure textures are compressed or use procedural materials (`MeshBasicMaterial` or `MeshToonMaterial`) to keep the initial load "Instant". ### 2. Audio Requirements * **BGM:** A minimalist, ambient electronic track. It should be calm and repetitive (Zen-like) to aid concentration. * **Sound Effects (SFX):** * **Growth Tone:** A synthesizing sound that rises in pitch as the player holds the screen (rising tension). * **Impact/Fail:** A sharp "glass breaking" or digital glitch sound when a growing shape hits an enemy. * **Success/Lock:** A satisfying "thud" or "lock" click when the player releases the finger successfully. * **Level Clear:** A harmonious chord progression. ### 3. Gameplay Loop * **Core Mechanic:** The goal is to fill 2/3rds (66%) of the screen area with blue spheres. * **Controls & Physics:** * Enemies (red balls) bounce around the container continuously with simple reflection physics (velocity vectors inverting on wall collision). * The player **presses and holds** anywhere in empty space to spawn a blue sphere. * The sphere **expands** as long as the player holds the touch. * **Lose Condition:** If an enemy touches the blue sphere *while* it is expanding, the sphere pops, the player loses a "life" or the level restarts. * **Safe Condition:** Once the player **releases** the touch, the sphere solidifies/freezes and becomes a static obstacle. Enemies now bounce off this solidified sphere. * **Progression:** Level is won when the total area of solidified blue spheres exceeds the target percentage. ### 4. Mobile Controls & Interaction * **Input Handling:** * Map `touchstart`, `mousedown`, `touchend`, and `mouseup` to a unified input handler. * Support multi-touch prevention (only one fill active at a time). * **Crucial:** Add `event.preventDefault()` on touch events to prevent the browser window from scrolling or zooming while playing. * **Orientation:** Lock UI layout to **Portrait Mode** logic (or responsive vertical container) as this is a casual one-handed game. * **UI/UX:** * Display a "Filled: XX% / 66%" progress bar at the top. * Restart button should be at least 44x44 pixels for touch accessibility. * **Haptics:** Trigger `window.navigator.vibrate(50)` when a shape successfully solidifies, and a longer vibration `(200)` if the player hits an enemy. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About Fill It

Fill It is a captivating physics puzzle game that combines strategic thinking with precise timing. This free-to-play browser game challenges players to fill various containers while navigating obstacles and maintaining balance. With its simple yet addictive gameplay mechanics, Fill It has earned an impressive 4.5/5 rating from players worldwide.

Core Features

Intuitive Physics-Based Gameplay

Fill It leverages realistic physics mechanics to create engaging puzzle scenarios. Every tap affects the flow of materials, requiring players to think strategically about timing and positioning. The game's physics engine ensures that each level feels natural and responsive.

Progressive Difficulty System

The game features carefully designed levels that gradually increase in complexity. Starting with simple filling tasks, players eventually encounter: - Complex Container Shapes : Navigate intricate vessel designs - Moving Obstacles : Avoid dynamic barriers that block your path - Balance Challenges : Maintain equilibrium while filling containers - Precision Requirements : Master exact timing for perfect fills

Instant Play Accessibility

As an HTML5 game, Fill It offers immediate access through any modern web browser. No downloads, no installations - just pure puzzle-solving fun that's ready when you are.

Game Mechanics

The core gameplay revolves around a simple yet sophisticated "tap to fill" mechanic. Players must:

  1. Analyze the Level : Study the container layout and identify potential obstacles
  2. Plan Your Strategy : Determine the optimal filling sequence and timing
  3. Execute Precisely : Tap at the right moments to control the flow
  4. Adapt Dynamically : Adjust your approach as new challenges emerge

Physics Elements

The game incorporates realistic physics principles including: - Gravity Effects : Materials flow naturally downward - Collision Detection : Objects interact realistically with barriers - Momentum Conservation : Moving elements maintain their physical properties - Balance Dynamics : Containers tip and shift based on weight distribution

Gameplay Instructions

Basic Controls

  • Tap : Primary action to initiate filling
  • Timing : Critical for successful level completion
  • Observation : Watch physics interactions for strategic insights

Success Strategies

  1. Study Each Level : Take time to understand the layout before acting
  2. Master Timing : Practice precise tapping for optimal results
  3. Use Physics : Leverage gravity and momentum to your advantage
  4. Stay Patient : Complex levels may require multiple attempts

Why Play Fill It?

Perfect for All Ages

With its "All Ages" content rating, Fill It provides clean, family-friendly entertainment that appeals to both children and adults. The game's simple controls make it accessible to younger players, while the strategic depth keeps experienced gamers engaged.

Stress-Free Gaming

Unlike high-pressure action games, Fill It offers a relaxing puzzle experience. Players can take their time to think through each level, making it perfect for: - Casual Gaming Sessions : Quick breaks or commute entertainment - Brain Training : Improve problem-solving and spatial reasoning skills - Relaxation : Unwind with methodical, satisfying gameplay

No Barriers to Entry

  • Completely Free : No purchase required, no hidden costs
  • Instant Access : Start playing immediately in your browser
  • Cross-Platform : Works on desktop computers, tablets, and smartphones
  • No Registration : Jump straight into the game without creating accounts

Frequently Asked Questions (FAQ)