Link - Connect Color Dots Puzzle Game

Seele01-Flash
By
Link is an addictive color connect puzzle game where you link dots of the same color to solve challenging logic puzzles. Avoid crossing pipes and use strategic thinking to complete each level.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Link - Color Flow Puzzle". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: 2.5D Minimalist Neon. Use an Orthographic Camera to maintain a flat, puzzle-board perspective perfect for mobile screens. The background should be a deep, void black (`#000000`) or very dark charcoal. * **Grid System**: A centered grid (start with 5x5, scalable) visualized by faint, thin geometric lines. * **Game Pieces (Dots)**: Use flattened 3D Cylinders or Sphere meshes for the "Dots" (End Nodes). They must use vibrant, high-saturation colors (Red, Green, Blue, Yellow, Cyan) with an `Emissive` material property to make them glow against the dark background. * **Pipes (Connections)**: Dynamically generated tubes (using `TubeGeometry` or extruded lines) that connect the dots. These must appear "liquid" and thick. When a connection is active/drawing, add a `Bloom/Glow` post-processing effect to the line. * **Background Detail**: To avoid emptiness, create a subtle, animated background with slowly floating, out-of-focus bokeh circles (low opacity) that drift across the screen. * **Optimization**: Use instanced mesh rendering for the grid cells and background particles to ensure 60fps on mobile browsers. ### 2. Audio Requirements * **BGM**: A "Zen Puzzle" track—atmospheric, slow-tempo, low-fi electronic or ambient synth-wave to encourage concentration. * **Sound Effects (SFX)**: * **Touch Start**: A soft "bubble pop" or "water drop" sound when selecting a starting dot. * **Drawing**: A rising synthesized scale or a continuous "hum" that changes pitch as the pipe gets longer. * **Connect**: A satisfying "snap" or harmonious chime when two dots of the same color are successfully linked. * **Break**: A glass-cracking or "short-circuit" sound if a pipe is broken by a crossing path. * **Level Clear**: A bright, ascending arpeggio chord. ### 3. Gameplay Loop * **Setup**: Initialize a grid (e.g., 5x5) populated with pairs of colored dots. * **Interaction**: The player drags from a colored dot to draw a "Pipe". * **Logic & Rules**: * **Pathfinding**: The pipe follows the grid cells. Diagonal movement is **not** allowed. * **Collision (Crossing)**: If a new pipe crosses an existing pipe of a *different* color, the old pipe breaks (is deleted/reset). If it crosses a pipe of the *same* color (self-intersection), the pipe truncates to the new point. * **Win Condition**: The level is complete when **all** colored pairs are connected AND (optionally) every single cell in the grid is filled/occupied by a pipe or dot. * **Level Progression**: Upon victory, trigger a particle confetti effect, pause for 1 second, and generate a new, slightly harder grid (or move to the next preset level). ### 4. Mobile Controls & Interaction * **Input Handling**: Use Three.js `Raycaster` mapping `touchstart`, `touchmove`, and `touchend` events to the grid plane. * **Screen Orientation**: Portrait mode focus. The grid should scale to fit the width of the phone screen with padding. * **Interaction Design**: * **Drag-to-Draw**: The primary mechanic is a single-finger drag. * **Offset**: If possible, render the line slightly *above* the user's touch point so their finger doesn't obscure the path being drawn. * **Haptic Feedback**: Trigger `navigator.vibrate(10)` (light vibration) every time the pipe enters a new grid cell, and `navigator.vibrate(50)` (heavy vibration) when a connection is successfully completed. * **UI Layout**: Keep UI minimal. A "Reset" button and "Level #" indicator at the top (safe area), large enough for touch targets (min 44px). Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Link is a captivating color connect puzzle game that challenges your logical thinking and spatial awareness. This free browser-based puzzle game combines simple mechanics with increasingly complex challenges, making it perfect for puzzle enthusiasts of all skill levels. The game features colorful dot-connecting gameplay where strategy and careful planning are essential for success.

Core Features

Link offers an engaging puzzle experience with several standout features:

  • Free to Play : Completely free browser game with no downloads required
  • Intuitive Gameplay : Simple click-and-connect mechanics that anyone can learn
  • Progressive Difficulty : Levels gradually increase in complexity to keep you challenged
  • Multiple Control Options : Support for both mouse and keyboard controls
  • Hint System : Built-in hint feature (press 'I') when you get stuck
  • Cross-Platform : Works on any device with a modern web browser

Strategic Puzzle Mechanics

The core challenge lies in connecting dots of matching colors while avoiding pipe intersections. Each puzzle requires careful planning as crossing pipes will break your connections. This creates a unique spatial reasoning challenge that becomes increasingly complex as you progress through the levels.

Clean Visual Design

The game features a clean, minimalist design with vibrant colors that make it easy to distinguish between different dot types. The grid-based layout provides clear visual feedback, helping you plan your connections effectively.

Game Mechanics

In Link, your objective is to connect all dots of the same color using continuous lines or "pipes". The challenge increases as you must:

  • Connect matching colored dots without any gaps
  • Ensure no pipes cross or intersect with each other
  • Fill the entire grid to complete each puzzle
  • Think several moves ahead to avoid dead ends

The game combines elements of logic puzzles, spatial reasoning, and strategic planning. Each level presents a unique challenge that requires both patience and problem-solving skills.

Controls Guide

Link supports multiple control schemes for maximum accessibility:

Mouse Controls: - Left-click on a colored dot to start creating a connection - Move your mouse to extend the link to other dots - Click on matching colored dots to complete the connection

Keyboard Controls: - Arrow keys: Navigate around the grid - Enter: Select a dot or confirm a connection - Backspace: Go back or undo last move - I key: Get a helpful hint when stuck

The dual control system ensures the game is accessible whether you prefer mouse precision or keyboard navigation.

Why Play Link

Link stands out in the puzzle game genre for several compelling reasons:

Mental Exercise : Each puzzle provides excellent brain training, improving logical thinking and spatial awareness skills. The game challenges you to think multiple steps ahead and consider various solution paths.

Stress-Free Gaming : With no time limits or pressure mechanics, Link offers a relaxing puzzle experience perfect for unwinding or taking a mental break.

Progressive Learning : The difficulty curve is perfectly balanced, introducing new concepts gradually while building on previously learned skills.

Instant Accessibility : No downloads, registrations, or installations required. Simply open your browser and start playing immediately.

Universal Appeal : The simple concept makes it accessible to all ages, while the increasing complexity keeps experienced puzzle solvers engaged.

Whether you're looking for a quick mental challenge during a break or a longer puzzle-solving session, Link provides the perfect balance of accessibility and depth that makes it truly addictive.

Frequently Asked Questions (FAQ)