Fill - Grid Puzzle Game

Seele01-Flash
By
Fill is an innovative grid puzzle game where you guide colored lights through challenging non-symmetrical grids. With 80 levels across 4 phases, this free browser game offers hours of strategic puzzle-solving fun.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "**Fill - Neon Path Puzzle**". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: Minimalist Cyberpunk / Neon aesthetic. A dark background (deep charcoal or dark navy, e.g., `#111111`) to make the game elements pop. * **Camera Setup**: Use an `OrthographicCamera` fixed in a top-down view to ensure the grid looks flat and consistent across all screen sizes. * **Grid System**: * The board consists of tiles (PlaneGeometries). * **Empty Tiles**: Dark grey outlines or slightly lighter fill than background. * **Obstacles**: Solid dark blocks or "holes" in the grid where the path cannot go. * **Start Block**: Distinct color (e.g., bright white or pulsing). * **The Path (Player)**: A glowing neon trail (e.g., Cyan `#00FFFF` or Magenta `#FF00FF`). As the player moves, the "head" of the path emits a soft point light or uses a simple glowing shader effect. * **Performance**: Use `InstancedMesh` for the grid tiles to minimize draw calls. Avoid heavy post-processing like standard UnrealBloomPass if possible; instead, fake the glow using additive blending on texture sprites or simple shader materials to ensure high FPS on mobile browsers. ### 2. Audio Requirements * **BGM**: A soft, ambient, "zen" electronic track. It should be repetitive but non-intrusive, aiding concentration (Lo-fi or ambient synth pad style). * **Sound Effects (SFX)**: * **Move Tone**: A soft musical pluck or synth note that plays every time the path enters a new block. Pitch could slightly increase with every step to build tension. * **Level Complete**: A satisfying harmonic chord (Major key) accompanied by a particle burst sound. * **Error/Invalid Move**: A dull "thud" or low-frequency buzz if the player tries to backtrack or hit a wall. * **Reset**: A "rewind" or "whoosh" sound. ### 3. Gameplay Loop * **Core Mechanic**: A "Hamiltonian Path" puzzle. The player starts at a specific grid block and must draw a continuous line. * **Rules**: 1. The player must visit **every** empty square in the grid exactly once. 2. The path cannot cross itself. 3. The path cannot go through obstacles. 4. Movement is strictly orthogonal (Up, Down, Left, Right). * **Victory Condition**: The level is won immediately when the last empty square is filled. * **Failure/Retry**: If the player hits a dead end but squares remain empty, they must tap a "Reset" button or backtrack (undo movement). * **Level Design**: Create a `LevelManager` that can read a simple 2D array or JSON configuration to generate different non-symmetrical grid shapes and obstacle placements. Include logic for at least 3 demo levels. ### 4. Mobile Controls & Interaction * **Touch Control Scheme**: Implement a "Swipe/Drag" system using `Raycaster`. * The player touches the current "head" of the path (or anywhere on screen) and drags in a direction. * The movement should snap to the grid. A move is registered when the finger crosses the threshold of the adjacent block. * **Responsiveness**: * Prevent default browser behaviors (scrolling/zooming) via `event.preventDefault()` on `touchstart` and `touchmove`. * **Haptic Feedback**: Trigger `navigator.vibrate(10)` (light vibration) on every successful step to provide tactile confirmation. * **UI Layout**: * Keep UI minimal. * **Top**: Level Counter (e.g., "Level 1/20"). * **Bottom**: A large, thumb-friendly "Reset" button (at least 44x44px touch area) and a "Hint" button. * **Orientation**: Lock visuals to Portrait mode logic, scaling the grid dynamically to fit within the screen width (with padding) regardless of the device aspect ratio. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About Fill

Fill is a captivating grid-based puzzle game that challenges players to navigate colored lights through intricate non-symmetrical grids. With an impressive 4.6/5 rating, this free online puzzle game combines strategic thinking with satisfying visual feedback as you create paths using every square in each grid.

The game features a unique approach to puzzle gaming, where each level presents a new grid layout that requires careful planning and execution. Your objective is simple yet challenging: guide the neon-colored lights through the grid, ensuring you use every available square to complete each level.

Core Features

Extensive Level Progression

  • 80 challenging levels spread across 4 distinct phases
  • 20 levels per phase with increasing difficulty
  • Progressive complexity that keeps you engaged throughout

Cross-Platform Compatibility

  • Free browser-based gameplay - no downloads required
  • Perfect mobile optimization for touch screen devices
  • Desktop and mobile support - play anywhere, anytime
  • HTML5 technology ensures smooth performance across all devices

Engaging Visual Design

  • Neon-colored lights create stunning visual effects
  • Clean grid interface that's easy to understand
  • Satisfying animations when completing paths
  • Minimalist design that focuses on pure puzzle-solving

Strategic Gameplay Elements

  • Path-finding challenges that test your logical thinking
  • Grid optimization requires careful planning of each move
  • Restart functionality lets you perfect your strategy
  • Leaderboard system to compete with other players

Gameplay Mechanics

Fill transforms the classic path-finding concept into an addictive puzzle experience. Each level presents you with a unique grid layout where you must create a continuous path that visits every single square. The challenge lies in planning your route efficiently while avoiding dead ends.

The game's non-symmetrical grids ensure that no two levels feel the same. As you progress through the phases, you'll encounter increasingly complex layouts that demand creative problem-solving approaches. The satisfaction of completing a particularly challenging grid makes every victory feel earned.

Operation Guide

Desktop Controls

  • Mouse Click and Drag : Point and click to start your path, then drag to guide the light through the grid
  • Strategic Planning : Take time to visualize your complete path before starting
  • Restart Option : Use the restart function to try different approaches

Mobile Controls

  • Touch and Drag : Tap the screen to begin, then drag your finger to create the path
  • Smooth Touch Response : Optimized for precise touch control
  • Portrait and Landscape : Play in your preferred orientation

Winning Strategy

Success in Fill requires thinking several moves ahead. Before starting each level, spend time analyzing the grid layout to identify potential challenging areas. Look for corners and narrow passages that might create bottlenecks in your path.

Why Play Fill?

Fill offers a perfect blend of simplicity and complexity that appeals to puzzle enthusiasts of all skill levels. The game's "easy to learn, hard to master" philosophy makes it accessible to newcomers while providing substantial challenges for experienced players.

The free-to-play model means you can enjoy the complete experience without any financial commitment. With 80 levels available, Fill provides excellent value and hours of entertainment. The mobile optimization ensures you can enjoy quick puzzle sessions during breaks or longer gaming sessions at home.

Whether you're looking for a casual brain teaser or a serious puzzle challenge, Fill delivers an engaging experience that will test your spatial reasoning and strategic planning skills. The leaderboard system adds a competitive element, encouraging you to perfect your solutions and climb the rankings.

Frequently Asked Questions (FAQ)