Color Rings - Free Online Puzzle Game

Seele01-Flash
By
Color Rings is a relaxing and addictive puzzle game where players drag colorful rings to create perfect matches. With its easy-to-learn mechanics and beautiful visual design, it's the perfect game for puzzle enthusiasts of all skill levels.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Color Rings". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** A sleek, "Neon Glow" aesthetic set against a dark, deep purple or charcoal background (Hex: #1a1a24). The game should use a top-down **Orthographic Camera** to ensure the puzzle grid remains readable without perspective distortion. * **Geometries:** * **The Rings:** Use `THREE.TorusGeometry`. There must be three distinct ring sizes: **Small, Medium, and Large**. All three sizes must be able to fit concentrically inside a single grid slot. * **The Grid:** A 3x3 grid of dark, rounded square bases (plane or flattened box geometry) to serve as "slots" for the rings. * **Materials:** Use `MeshStandardMaterial` with high roughness (plastic look) but high `emissive` intensity to make the colors pop. * **Color Palette:** 4 distinct, high-contrast colors (e.g., Neon Red, Cyan, Bright Yellow, Lime Green). * **Optimization:** Since this is for mobile, keep the `radialSegments` and `tubularSegments` of the Torus geometries low (e.g., 16-24 segments) to maintain high FPS. Use `InstancedMesh` if possible for particles, but standard meshes are fine for the main rings given the low object count. ### 2. Audio Requirements * **BGM:** A calm, "Zen-Puzzle" electronic track. Minimalist synth pads with a slow tempo to encourage focus. * **Sound Effects (SFX):** * **Pickup:** A soft "pop" or "click" when a player touches a ring shape. * **Placement:** A solid "thud" or "snap" sound when a ring settles into a grid slot. * **Match/Clear:** A harmonious, high-pitched "chime" or "glass breaking" sound. If a combo occurs (multiple lines cleared), the pitch should ascend. * **Game Over:** A low, descending tone or a soft buzzer. ### 3. Gameplay Loop * **Setup:** The player starts with an empty 3x3 grid. Below the grid, there are 3 "Spawn Slots" that generate random ring combinations. * **Piece Logic:** A single "Piece" can consist of 1, 2, or 3 concentric rings of different or identical colors (e.g., A piece might be a Large Red Ring + A Small Blue Ring). * **Placement Mechanics:** * The player drags a piece from the bottom spawn slot to a grid cell. * **Constraint:** A piece can only be placed if the specific ring sizes it contains are *empty* in the target grid slot. (e.g., You cannot place a Large Ring onto a slot that already has a Large Ring, but you can place it if the slot only has a Small Ring). * **Matching Logic (Win State for a move):** Rings disappear and award points if: 1. **Same Color Line:** Three rings of the same color form a horizontal, vertical, or diagonal line. 2. **Same Color Slot:** All three rings (Small, Medium, Large) in a *single* grid slot are the same color. * **Game Over:** The game ends when there is no valid move for any of the pieces currently in the spawn slots. ### 4. Mobile Controls & Interaction * **Touch Input:** Implement a `Raycaster` logic for touch events (`touchstart`, `touchmove`, `touchend`). * **Drag Offset (Crucial):** When the player drags a piece, the mesh should be rendered slightly **above** the touch coordinate (y-axis offset). This prevents the user's finger from obscuring the piece they are trying to place. * **Snap Preview:** When dragging a piece over a valid grid slot, show a "ghost" or semi-transparent preview of where the rings will land. * **Visual Feedback:** * **Particles:** When rings are cleared, spawn simple particle explosions (cubes or triangles) matching the ring's color. * **Shake:** Subtle camera shake on large combos. * **UI Layout:** * **Portrait Mode:** Score at the top, 3x3 Grid in the center, Spawn Slots at the bottom (easy thumb reach). * **Reset Button:** A clear, accessible restart button at the top right (min size 44px). Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About Color Rings

Color Rings is a captivating online puzzle game that combines the satisfaction of match-3 mechanics with innovative ring-placement gameplay. With an impressive 4.5/5 rating from players worldwide, this free HTML5 game offers a perfect blend of relaxation and mental challenge that keeps players coming back for more.

The game features a unique twist on traditional puzzle mechanics where instead of swapping tiles, you strategically drag and place colorful rings to create satisfying matches and clear the board.

Core Features

Completely Free to Play

Enjoy unlimited access to Color Rings without any cost. No downloads, subscriptions, or hidden fees - just pure puzzle fun directly in your web browser.

Easy-to-Learn Gameplay

The game is designed with simplicity in mind, making it accessible to players of all ages and skill levels. The intuitive drag-and-drop mechanics ensure that anyone can start playing immediately.

HTML5 Technology

Built with modern HTML5 technology, Color Rings runs smoothly on any device with a web browser. Whether you're on a desktop computer, tablet, or smartphone, the game adapts perfectly to your screen.

Relaxing Visual Design

Featuring vibrant colors and smooth animations, the game provides a visually pleasing experience that helps reduce stress while keeping your mind engaged.

Match-3 Strategy Elements

While easy to pick up, the game incorporates strategic depth through its match-3 mechanics, requiring players to think ahead and plan their moves carefully.

Gameplay Mechanics

The core gameplay revolves around a simple yet engaging concept: drag colorful rings from your inventory and strategically place them on the game board. Your objective is to create matches of three or more rings of the same color, which will then disappear and award you points.

The challenge lies in managing your limited space and planning your moves to create the most effective combinations. As you progress, the puzzles become more complex, requiring greater strategic thinking and spatial awareness.

Operation Guide

Basic Controls: - Mouse/Touch : Click and drag rings from the bottom panel to the game board - Placement : Drop rings onto empty spaces or strategic positions - Matching : Align three or more rings of the same color to clear them

Gameplay Tips: - Plan your moves in advance to maximize scoring opportunities - Look for combo possibilities that can clear multiple groups at once - Manage your space efficiently to avoid running out of placement options - Focus on creating larger matches for higher scores

Why Play Color Rings

Perfect for All Skill Levels : Whether you're a puzzle game veteran or a complete beginner, Color Rings offers an ideal difficulty curve that grows with your skills.

Stress-Free Gaming : The game's relaxed pace and beautiful visuals make it perfect for unwinding after a busy day or taking a quick mental break.

No Time Pressure : Unlike many puzzle games, Color Rings allows you to take your time and think through each move, making it ideal for players who prefer strategic gameplay over fast-paced action.

Brain Training : Regular play helps improve spatial reasoning, pattern recognition, and strategic planning skills in an enjoyable way.

Instant Access : No downloads or installations required - simply open your browser and start playing immediately on any device.

Frequently Asked Questions (FAQ)