Color Fill 3D

Seele01-Flash
By
Color Fill 3D is an addictive 3D puzzle game where you strategically move blocks to fill entire grids with color. Navigate obstacles, avoid enemies, and solve increasingly challenging puzzles in this brain-teasing adventure.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Color Fill 3D". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: Minimalist, Voxel/Blocky aesthetic with high contrast. Use a fixed **Orthographic Camera** (Isometric view) to ensure grid alignment looks clean on mobile screens without perspective distortion. * **Color Palette**: Strictly follow the screenshot reference: * **Player & Territory**: Bright Pink (`#FF00FF` or `#E040FB`). * **Enemies**: Bright Yellow (`#FFEB3B`). * **Unfilled Grid**: Dark Grey (`#212121`) with lighter grey grid lines (`#424242`). * **Borders**: Slightly darker shade of the player color for 3D depth. * **Models**: * **Player**: A simple cube with slightly beveled edges (use `BoxGeometry`). * **Enemies**: Cubes that are slightly smaller than the grid cells to distinguish them from the terrain. * **Terrain**: A grid system where each cell is an object. * **Effects**: * **Trail**: As the player moves out of the safe zone, generate a temporary trail of smaller cubes. * **Fill Animation**: When a shape is closed, use a "wave" or "scale-up" tween animation to fill the enclosed area with the player's color. * **Explosion**: Simple particle system (cubes scattering) when an enemy is trapped/destroyed or when the player dies. * **Performance**: Use `InstancedMesh` for the static floor grid to reduce draw calls. Limit particle counts to <50 for mobile optimization. ### 2. Audio Requirements * **BGM**: A relaxing, low-tempo "Lo-fi Hip Hop" or "Minimalist Synth" track. It should be repetitive but non-intrusive to support the "Relaxing" tag. * **Sound Effects (SFX)**: * **Movement**: A soft, rhythmic "click" or "slide" sound as the block moves between grid cells. * **Fill Success**: A satisfying, rising major chord or "pop" sound when a territory is successfully captured. * **Enemy Bounce**: A hollow wooden "tok" sound when enemies hit walls. * **Game Over**: A glass-shattering or heavy impact sound. * **Enemy Destroyed**: A retro 8-bit "crunch" sound. ### 3. Gameplay Loop * **Core Mechanic (Qix/Volfied style)**: * The player starts in a filled "Safe Zone" (border). * **Drawing**: When the player moves into the dark grey area, they leave a **Line/Trail**. The player cannot stop moving while in the danger zone. * **Capturing**: If the player returns to *any* filled Safe Zone, the path creates a polygon. The game logic must calculate the area formed. * **Fill Logic**: 1. Identify the enclosed area. 2. Check if enemies are inside. 3. **Strategy**: If an enemy is inside the enclosed area, the enemy is destroyed (Kill), and the area fills. If no enemy is inside, the area simply fills. * **Enemies**: * Yellow blocks move diagonally or linearly at constant speed within the unfilled dark space. * They bounce off filled territory borders and the level edges. * **Win/Loss Conditions**: * **Lose**: If an enemy touches the **Player** OR the **Active Trail** (the line being drawn before it closes), the player explodes and the level restarts. * **Win**: Fill 100% of the grid (or eliminate all enemies and fill the remaining space). * **Level Progression**: Start with a small 10x10 grid with 1 enemy. Increase grid size and enemy count in subsequent levels. ### 4. Mobile Controls & Interaction * **Control Scheme**: **Swipe-to-Turn** (Snake-style). * The player moves automatically at a constant speed. * Swipe Up/Down/Left/Right anywhere on the screen to change direction. * Prevent 180-degree turns (cannot instantly reverse direction). * **Orientation**: **Portrait Mode** optimized. The grid should be centered vertically. * **UI Layout**: * **Top**: Level Indicator and "Percent Filled" Progress Bar. * **Overlay**: "Tap to Start" overlay. * **Game Over/Win**: A semi-transparent modal with a large "Replay" button (minimum 60x60px touch area). * **Haptic Feedback**: Trigger a light vibration (using `navigator.vibrate`) when a shape is filled or when the player crashes. * **Visual Feedback**: Highlight the "Trail" in bright white or glowing color to indicate vulnerability. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About Color Fill 3D

Color Fill 3D is a captivating casual puzzle game that combines strategy, timing, and spatial reasoning in a vibrant 3D environment. Your mission is simple yet challenging: control a colored block to spread your color across an entire grid while avoiding dangerous obstacles and moving enemies. With its relaxing gameplay and progressively challenging levels, this game offers the perfect balance of entertainment and mental stimulation.

The game features clean 3D graphics with bright, eye-catching colors that create an immersive and satisfying visual experience. Each level presents a unique grid layout that requires careful planning and strategic thinking to complete successfully.

Core Features

Strategic Puzzle Gameplay

Every move matters in Color Fill 3D. As you navigate your block across the grid, you leave a colored trail behind you. The challenge lies in planning your path to cover every empty space while avoiding deadly collisions with moving enemy blocks.

Progressive Difficulty System

Start with simple grids and gradually face more complex layouts featuring: - Multiple moving enemies with different patterns - Intricate obstacle arrangements - Larger grids requiring advanced planning - Time-sensitive challenges that test your quick thinking

Safe Zone Strategy

Create enclosed colored areas to establish safe zones where enemies cannot harm you. This defensive strategy becomes crucial in later levels where multiple threats patrol the grid simultaneously.

Completely Free Experience

Enjoy unlimited gameplay without any cost. No downloads, installations, or hidden fees - simply open your browser and start playing immediately.

Gameplay Mechanics

Basic Movement and Coloring

Control your block using WASD keys or arrow keys to move in four directions. Every tile you pass over becomes filled with your color, creating a permanent trail that forms the foundation of your strategy.

Enemy Avoidance System

Moving enemy blocks patrol the grid with predictable patterns. Direct collision with these enemies results in immediate game failure, making observation and timing essential skills for success.

Territory Creation

By forming complete enclosed shapes, you can eliminate enemies that venture into your colored territory. This offensive strategy allows you to clear threats while expanding your safe zone.

Operation Guide

Controls: - WASD Keys or Arrow Keys : Move your block in four directions - Mouse : Navigate menus and select options

Winning Strategy: 1. Study the Level : Observe enemy movement patterns before making your first move 2. Plan Your Route : Identify the safest path to create your first enclosed area 3. Create Safe Zones : Establish secure territories where you can plan your next moves 4. Eliminate Threats : Use territory expansion to remove enemies strategically 5. Complete Coverage : Fill every empty tile to complete the level

Pro Tips: - Start from corners or edges where you have fewer directions to worry about - Create small enclosed areas first, then expand gradually - Watch for enemy patterns - they often follow predictable routes - Don't rush - careful planning beats speed in most situations

Why Play Color Fill 3D

Perfect Brain Training

This game excellently develops spatial reasoning, strategic planning, and problem-solving skills. Each level presents a unique puzzle that challenges different aspects of logical thinking.

Stress-Free Gaming

Despite its challenging nature, Color Fill 3D maintains a relaxing atmosphere with its smooth animations, pleasant colors, and non-aggressive gameplay pace. It's perfect for unwinding while keeping your mind engaged.

Accessible Anywhere

As a browser-based game, you can enjoy Color Fill 3D on any device with internet access. Whether you're on a computer, tablet, or smartphone, the game adapts perfectly to your screen size and input method.

Endless Replayability

With multiple levels of increasing difficulty and various strategic approaches to each puzzle, the game offers substantial replay value. Challenge yourself to complete levels with optimal efficiency or explore different solution paths.

Social Gaming

Share your progress and compete with friends to see who can solve the most challenging levels. The game's straightforward concept makes it easy to explain and fun to discuss strategies with others.

Frequently Asked Questions (FAQ)