Color Roll 3D

Seele01-Flash
By
Color Roll 3D is an innovative puzzle game that challenges you to unroll colorful layers in precise sequences to recreate beautiful images. This brain-teasing experience combines logic, creativity, and relaxation in one engaging package.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Color Roll 3D". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: Clean, bright, and vibrant "Paper Craft" aesthetic. The game should mimic the look of colored paper strips laid out on a physical surface. * **Models**: * **Rolls**: Cylindrical meshes representing rolled-up paper. They should have a primary color (Red, Blue, Yellow, etc.) and a slight shading gradient to show curvature. * **Unrolled Strips**: Flat planes or thin box geometries that extend from the rolls. They must support different shapes (rectangular strips, triangles, semi-circles) using alpha maps or custom geometry. * **Background**: A high-quality, seamless light wood texture (oak or pine) plane to simulate a tabletop workspace. * **Lighting & Shadows**: Use a soft Directional Light combined with Ambient Light to create gentle, realistic shadows. Shadows are critical for depth perception to show which paper layer is on top of another. * **Mobile Optimization**: Use low-poly meshes for the rolls. Use a single shared material with vertex colors or a texture atlas to reduce draw calls. Limit real-time shadow map resolution (e.g., 512x512) or use baked ambient occlusion blobs under the rolls for performance. ### 2. Audio Requirements * **BGM**: A calm, zen-like, looping acoustic guitar or lo-fi track. It should be unobtrusive and promote concentration (Background volume ~30%). * **Sound Effects (SFX)**: * **Unroll**: A satisfying, crisp "thwip" or carpet-unrolling sound (ASMR quality). * **Retract/Undo**: A reverse "whoosh" sound, slightly lower pitch. * **Level Complete**: A bright, ascending melodic chime or chord. * **UI Tap**: Soft wooden click sounds. ### 3. Gameplay Loop * **Objective**: The player is presented with a "Target Image" (a finished geometric pattern) and a messy board of rolled-up colored tapes. The goal is to unroll them in the specific order to match the target. * **Mechanics**: * **Layering Logic**: The core puzzle is Z-index management. A strip unrolled *later* will physically cover a strip unrolled *earlier*. * **Interaction**: Clicking a rolled tape unrolls it. Clicking it again rolls it back up. * **Validation**: The system must check the overlap order. For example, if the target shows a Blue square inside a Red frame, the player must unroll Red first, then Blue. * **Win Condition**: Real-time checking. Once the visible pixels/geometry on the main board match the target image exactly, trigger a confetti particle effect and a "Next Level" modal. ### 4. Mobile Controls & Interaction * **Touch Controls**: * Implement `Raycaster` for touch detection. * **Tap**: Single tap on a roll object triggers the unroll/roll animation. * The hit area for rolls should be slightly larger than the visual mesh to accommodate "fat finger" inaccuracy. * **Screen Orientation**: Portrait mode preferred (to allow space for the Target Image UI at the top and the play area at the bottom). * **UI Layout**: * **Top 20%**: "Target View" (a small preview window showing what the solution looks like). * **Center 70%**: The 3D Play Area (Interactive). * **Bottom 10%**: Level indicator and a "Restart" button. * **Feedback**: * **Visual**: When unrolling, use a smooth animation curve (e.g., `TWEEN.Easing.Cubic.Out`). Do not just snap the object; the strip should visually expand. * **Haptic**: Trigger a light vibration (haptic feedback) on mobile devices when a roll completes its animation. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About Color Roll 3D

Color Roll 3D is a captivating puzzle color game that puts your logic and attention to detail to the test. This innovative brain-training experience challenges you to unroll colorful layers in the correct sequence to recreate intricate images on a blank canvas. With its smooth mechanics and satisfying visuals, the game offers the perfect blend of mental stimulation and relaxation.

The game features increasingly complex levels that start simple and gradually build up to challenging puzzles requiring careful planning and strategic thinking. Each level presents a unique image that you must recreate by rolling out colors layer by layer, making it an excellent choice for puzzle enthusiasts and casual gamers alike.

Core Features

Progressive Difficulty System

Color Roll 3D begins with simple patterns like crosses and basic shapes, then evolves into complex designs including heel shapes and paper airplanes. This graduated difficulty curve ensures players of all skill levels can enjoy the game while being appropriately challenged.

Relaxing ASMR Experience

The game incorporates soothing sound effects that create an ASMR-like experience. The satisfying audio of rolling colors combined with smooth visual animations makes every move feel rewarding and stress-relieving.

Mistake-Friendly Gameplay

Made an error? No problem! The game allows you to peel back layers and try again, encouraging experimentation and learning without frustration. This forgiving mechanic makes it perfect for players who want to enjoy puzzle-solving without pressure.

Brain Training Benefits

Every puzzle exercises your: - Logic and reasoning skills - Spatial awareness - Color recognition - Pattern matching abilities - Attention to detail

Game Mechanics

Layer-by-Layer Puzzle Solving

The core gameplay revolves around understanding how colors and shapes interact when layered. You must consider both the base colors and top layers, as the sequence of placement directly affects the final image outcome.

Strategic Color Placement

Success requires careful analysis of the target image. Players must identify which colors form the foundation and which create the details, then execute the unrolling sequence accordingly.

Visual and Shape Recognition

Beyond colors, the game challenges your ability to recognize complex shapes and understand how different geometric forms combine to create the final picture.

Operation Guide

Simple Mouse Controls

  • Left Click : Click or tap any color roll to unroll it onto the canvas
  • Undo Function : Click or tap on already unrolled sections to revert previous moves
  • Strategic Planning : Study the target image before making moves for optimal results

Gameplay Strategy Tips

  1. Analyze First : Always examine the target image carefully before starting
  2. Work Bottom-Up : Generally, base layers should be placed before detail layers
  3. Use Trial and Error : Don't hesitate to undo moves and try different approaches
  4. Pay Attention to Overlaps : Understand how colors blend and overlap in the final image

Why Play Color Roll 3D

Perfect for All Ages

Color Roll 3D is designed to be appropriate for children and adults alike. The colorful imagery and creative gameplay promote artistic thinking while the logical challenges enhance problem-solving skills.

Completely Free Experience

Enjoy the full game experience without any cost. No downloads required - play directly in your browser with instant access to all levels and features.

Cross-Platform Compatibility

Whether you're on a computer, tablet, or smartphone, Color Roll 3D works seamlessly across all devices. The intuitive touch and mouse controls adapt perfectly to your preferred gaming platform.

Stress Relief and Mental Wellness

The combination of logical thinking and satisfying visual/audio feedback makes this game an excellent choice for stress relief and mental relaxation. It's perfect for short breaks or longer gaming sessions.

Educational Value

Beyond entertainment, Color Roll 3D helps develop: - Critical thinking skills - Color theory understanding - Spatial reasoning - Patience and persistence - Creative problem-solving

Frequently Asked Questions (FAQ)