Water Color Sort - Color Sorting Puzzle Game

Seele01-Flash
By
Water Color Sort is an engaging puzzle game that challenges you to sort colorful liquids by moving them between test tubes. Use logic and strategy to organize each color into separate tubes in this brain-training experience.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Water Color Sort". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** Create a clean, minimalist 3D aesthetic that mimics the 2D vector style of the reference. Use an **Orthographic Camera** to maintain a flat, puzzle-like perspective without perspective distortion. * **Models:** * **Test Tubes:** Generate clear, glass-like `CylinderGeometry` with a `MeshPhysicalMaterial` (enable transmission and roughness for a glass effect). They should have a slight rim at the top. * **Liquids:** Create inner cylinders representing liquid layers. Use bright, saturated colors (Cyan, Lime Green, Magenta, Yellow). * **Background:** A smooth vertical gradient shader or CSS background ranging from soft periwinkle to light purple, similar to the screenshot. Include subtle, floating star shapes in the background for depth. * **Mobile Optimization:** * Limit `radialSegments` on cylinders to 32 to ensure high FPS on mobile. * Use a single directional light combined with ambient light to reduce shadow calculation costs. * Avoid complex fluid physics; simulate liquid transfer using simple scaling/translation animations (tweening). ### 2. Audio Requirements * **BGM:** A looping, zen-like ambient track. Think "spa music" or soft lo-fi keys to encourage focus and relaxation. * **Sound Effects (SFX):** * **Selection:** A soft "pop" or "bubble" sound when a tube is tapped. * **Pouring:** A liquid pouring sound ("glug-glug") that plays while the animation is active. * **Success:** A cheerful chime or major chord when a tube is successfully filled with a single color. * **Error:** A subtle, low-pitched thud or buzzer if the player tries an invalid move. * **Win:** A celebratory fanfare with particle effect sounds. ### 3. Gameplay Loop * **Core Mechanic:** The scene initializes with `N` tubes. Some are mixed with 4 layers of different colored liquids; 2 tubes are empty. * **Logic:** 1. **Select:** Player taps a tube to select it (source). 2. **Target:** Player taps another tube (destination). 3. **Validation:** Liquid moves ONLY if: * The destination tube is empty OR * The top color of the destination matches the top color of the source AND the destination is not full. * **Animation:** When moving, the source tube should animate (rotate/tilt) towards the destination, and the liquid mesh should scale down in the source and scale up in the destination to simulate pouring. * **Win Condition:** The game is won when every tube is either completely full of **one single color** or completely empty. ### 4. Mobile Controls & Interaction * **Touch Controls:** Implement a `Raycaster` bound to `touchstart` and `click` events. * **Tap 1:** Lifts the selected tube slightly on the Y-axis to indicate selection (Visual Feedback). * **Tap 2:** Triggers the pour action if valid. * **Tap Same Tube:** Cancels selection (drops the tube back down). * **Invalid Move Feedback:** If a player tries an invalid move, the selected tube should do a quick "shake" animation (left-right wiggle) to indicate the error without text. * **UI Layout:** * **Portrait Mode:** Arrange tubes in a grid (e.g., 2 rows of 3) to maximize screen usage. * **Landscape Mode:** Arrange tubes in a single horizontal line. * **HUD:** Place a "Restart" and "Undo" button at the top of the screen. Ensure these buttons have a minimum touch target size of 48x48px for accessibility. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About Water Color Sort

Water Color Sort is a captivating puzzle game that combines logic, strategy, and visual satisfaction. Your mission is to sort various colored liquids by carefully transferring them between test tubes until each tube contains only one pure color. This seemingly simple concept creates increasingly complex puzzles that will challenge your problem-solving skills and keep you engaged for hours.

The game features a clean, minimalist design with vibrant colors that make each level visually appealing. As you progress through the levels, you'll encounter more tubes, more colors, and more intricate arrangements that require careful planning and logical thinking.

Core Features

Brain-Training Puzzle Mechanics

Water Color Sort is designed as a brain game that enhances your logical thinking and problem-solving abilities. Each level presents a unique challenge that requires you to think several moves ahead, much like chess or other strategic games.

Progressive Difficulty System

The game starts with simple 2-3 color combinations and gradually introduces more complex scenarios with multiple colors and tubes. This progressive difficulty ensures that both beginners and puzzle experts can find their perfect challenge level.

Helpful Game Aids

  • Hint System : When you're stuck, use the hint feature to get guidance on your next move
  • Undo Function : Made a mistake? Simply undo your last movement and try a different approach
  • No Time Pressure : Think at your own pace without worrying about time limits

Cross-Platform Compatibility

Enjoy Water Color Sort on any device - whether you're using a desktop computer, smartphone, or tablet. The game is optimized for both touch controls and mouse input.

Game Mechanics

The core gameplay revolves around the simple yet challenging concept of liquid physics. You can only pour liquid from one tube to another if: - The receiving tube has enough space - The top color of the source tube matches the top color of the destination tube, or the destination tube is empty - You cannot mix different colors in the same pour

These rules create a puzzle dynamic where you must carefully plan your moves to avoid getting stuck in impossible situations.

Operation Guide

Mouse Controls (Desktop) : - Click on any tube to select it - Click on another tube to pour the liquid - The top layer of colored liquid will transfer to the destination tube

Touch Controls (Mobile) : - Tap on a tube to select it - Tap on the destination tube to complete the pour - Visual feedback shows which tube is currently selected

Strategic Tips : 1. Start by identifying tubes that contain only one color - these are your "safe" tubes 2. Look for opportunities to create empty tubes, which serve as temporary storage 3. Work backwards from your goal - visualize what the final solution should look like 4. Don't be afraid to use the undo feature to experiment with different approaches

Why Play Water Color Sort

Mental Exercise and Relaxation

This game perfectly balances mental stimulation with relaxation. The satisfying visual of perfectly sorted colors combined with the mental challenge creates a meditative gaming experience that can help reduce stress while keeping your mind sharp.

Accessibility and Convenience

  • Completely Free : No hidden costs, premium features, or pay-to-win mechanics
  • No Downloads Required : Play instantly in your web browser
  • Offline Capability : Once loaded, many levels can be played without an internet connection
  • Family-Friendly : Suitable for all ages, making it perfect for family puzzle time

Educational Benefits

  • Improves logical reasoning skills
  • Enhances pattern recognition abilities
  • Develops strategic planning capabilities
  • Increases patience and persistence

Social Competition

Challenge friends and family members to see who can complete levels faster or with fewer moves. The game's simple concept makes it easy to explain to others, creating opportunities for friendly competition.

Perfect for Puzzle Game Enthusiasts

If you enjoy games like Sudoku, crosswords, or other logic puzzles, Water Color Sort offers a fresh take on the puzzle genre. The visual nature of the game makes it more accessible than number-based puzzles while still providing the same level of mental challenge.

The game's difficulty curve is expertly crafted to provide a sense of achievement with each completed level while gradually introducing new challenges that prevent the gameplay from becoming repetitive.

Frequently Asked Questions (FAQ)