Color Match - Creative Color Mixing Puzzle Game

Seele01-Flash
By
Color Match is an innovative 3D puzzle game that challenges your artistic skills through precise color mixing. Blend different hues to perfectly match colorful objects while enjoying a relaxing and creative gaming experience.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "**Color Match 3D**". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** High-saturation, bright, and "juicy" aesthetic similar to hyper-casual mobile games. The look should be clean and semi-realistic using `MeshPhysicalMaterial` to simulate glossy surfaces (like popsicle coating, fruit skin). * **Key Objects:** * **Target Object:** A 3D model (use a simple primitive composition to represent a popsicle or fruit, e.g., a rounded box geometry for a popsicle) placed in the center. It should have a specific target color (e.g., Bright Red `#FF0044`). * **Mixing Palette:** A flat surface or a 2D UI plane at the bottom where the player mixes colors. * **Comparison Card:** A movable 3D plane that holds the player's current mixed color, which can be dragged over the Target Object for comparison. * **Background:** A solid, vibrant cyan/light blue color (approx `#40E0D0`) to make the object pop, matching the reference screenshot. * **Mobile Optimization:** Use simple geometries with high segment counts for smoothness (Catmull-Clark look) but keep overall draw calls low. Use a single directional light with soft shadows and an ambient light to ensure no dark spots. ### 2. Audio Requirements * **BGM:** A looping, low-tempo, "Lo-Fi Hip Hop" or gentle acoustic track. It must be relaxing and non-intrusive. * **Sound Effects (SFX):** * **Mixing:** Wet, squishy "paint stirring" sounds when the user drags their finger on the mixing palette. * **Success:** A bright, uplifting major-chord chime when the match is >90%. * **Failure:** A dull, low thud or "hollow" sound if the match is <70%. * **UI:** Soft "pop" sounds when selecting base color tubes. ### 3. Gameplay Loop * **Phase 1: Observation.** The player sees a gray/white uncolored object and a "Reference Photo" or a small colored version of the object in the corner showing the Target Color. * **Phase 2: Mixing.** The player selects base paint tubes (Red, Blue, Yellow, White, Black) from a UI menu. Tapping a tube adds a blob to the Mixing Palette. The player drags their finger on the palette to blend these colors using `THREE.Color.lerp()` logic to calculate the resulting hex code. * **Phase 3: Comparison.** The player presses a "Compare" button. The game calculates the difference between the **Target Color** and the **Mixed Color**. * *Logic:* Convert both RGB values to HSL or LAB space for better perceptual accuracy calculation. * *Scoring:* Calculate a percentage match (100% - delta). * **Phase 4: Result.** * If score > 90%: The "Comparison Card" blends seamlessly into the object, the object spins, confetti particles explode, and the level completes. * If score < 90%: The game displays feedback (e.g., "Too Dark", "Needs more Red") and allows the player to continue mixing. ### 4. Mobile Controls & Interaction * **Touch Handling:** The game must rely entirely on `touchstart`, `touchmove`, and `touchend`. * **Mixing:** Implement a raycaster. When the finger moves over the mixing palette, update the visual texture of the palette to look "mixed" and update the current logic color. * **Orientation:** Force **Portrait Mode** layout. The 3D object stays in the top half, the mixing interface in the bottom half. * **Haptic Feedback:** Trigger `navigator.vibrate(20)` every time a new color blob is added to the mix. Trigger a strong vibration pattern on a successful match. * **UI Design:** Buttons (Paint Tubes, Compare Button) must be large (minimum 44x44 pixels logic size) and placed at the bottom of the screen for easy thumb access. Prevent default browser scrolling/zooming gestures. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About Color Match

Color Match is a captivating creative puzzle game that transforms color theory into an engaging interactive experience. This innovative 3D puzzle challenges players to become digital artists by mastering the art of color mixing and matching. With its unique blend of artistic creativity and logical thinking, Color Match offers a refreshing take on puzzle gaming that appeals to both casual players and color enthusiasts.

The game presents players with various colorful 3D objects - from fresh avocados and ripe tomatoes to juicy cherries and watermelons. Your mission is to recreate these natural colors by skillfully blending available paint colors until you achieve the perfect match.

Core Features

Precision Color Mixing System

Color Match features an advanced color blending mechanism that requires genuine skill and understanding of color theory. Players must experiment with different color combinations, learning how primary colors interact to create secondary and tertiary shades.

Progressive Difficulty Challenge

The game employs a percentage-based matching system that adds depth to the gameplay: - 60% Match : Getting warmer, but more precision needed - 70% Match : Close match, but refinement required
- 90% Match : Perfect! Ready to apply your color creation

This graduated system encourages players to keep experimenting and refining their color mixing techniques.

Relaxing 3D Environment

Unlike fast-paced action games, Color Match provides a calming, meditative experience. The smooth 3D graphics and peaceful gameplay make it perfect for stress relief and creative expression.

Educational Value

While entertaining, the game subtly teaches color theory principles, helping players understand how different hues interact and blend naturally.

Gameplay Mechanics

Object Variety

Challenge yourself with diverse items including: - Fresh Fruits : Avocados, tomatoes, cherries, watermelons - Natural Objects : Each with unique color properties and challenges - Realistic Textures : 3D rendering that captures authentic color nuances

Visual Comparison System

Once you achieve the target percentage, you can apply your mixed color directly to the 3D object. The side-by-side comparison feature lets you see exactly how close your color creation matches the original, providing instant visual feedback.

Controls and Operation

Mouse Controls : Simple click and drag interface for intuitive color mixing - Left Click + Drag : Mix and blend colors on the palette - Color Selection : Choose from available base colors - Application : Apply your mixed color to the target object

The streamlined control system ensures that players can focus on creativity rather than complex button combinations.

Why Play Color Match?

Perfect for Relaxation

Color Match serves as an excellent stress-reliever, combining the meditative qualities of art creation with engaging puzzle mechanics. The game's pace allows for thoughtful experimentation without time pressure.

Develops Artistic Skills

Regular play naturally improves your understanding of color relationships, potentially benefiting real-world artistic endeavors like painting, digital design, or color coordination.

Accessible to All Ages

The intuitive interface and educational value make Color Match suitable for children learning about colors, adults seeking creative outlets, and seniors looking for engaging brain exercises.

Completely Free Experience

Enjoy full access to all features without any hidden costs, advertisements, or premium content barriers. The complete Color Match experience is available instantly through your web browser.

Frequently Asked Questions (FAQ)