Flow Mania

Seele01-Flash
By
Flow Mania is an addictive dot-connecting puzzle game that challenges players to link colored dots through increasingly complex pathways. With 150 levels of brain-teasing gameplay, it's the perfect mental workout for puzzle enthusiasts.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Flow Mania (Connect the Dots)". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** A sleek, dark-themed aesthetic with high-contrast, neon-colored elements. The background should be a dark charcoal or matte black (`#1a1a1a`) to make the colors pop. * **Grid System:** Render a visible grid (e.g., 5x5 or 6x6) using thin, glowing golden or dark grey lines on a 2D plane. Use `InstancedMesh` for grid tiles if using geometry, or a simple shader grid for performance. * **The Dots:** The "Dots" should be rendered as 3D glossy spheres (resembling candy or glass marbles) using `MeshPhysicalMaterial` with high roughness and clearcoat to achieve a shiny look. Colors must be distinct pairs (Red, Green, Blue, Yellow, Magenta). * **The Lines (Flow):** Do **not** use `LineBasicMaterial` as it cannot control width on all mobile GPUs. Instead, use `TubeGeometry` or dynamic mesh generation to create thick, pipe-like connections that smoothly follow the user's input path. The pipes should match the color of the starting dot. * **Camera:** A fixed Orthographic camera looking straight down (Top-Down view) to ensure the grid is perfectly square and touch detection is accurate. ### 2. Audio Requirements * **BGM:** A quiet, meditative, and repetitive "Zen" loop. Think minimal ambient electronic music (soft synth pads) to encourage focus. * **Sound Effects (SFX):** * **Touch/Start:** A soft "water drop" or "bubble pop" sound when touching a dot. * **Connecting:** A harmonious chime or a satisfying "click" when a line successfully connects to its matching end dot. * **Error:** A subtle low-pitch "buzz" or visual shake if the user tries to cross an existing line. * **Win:** A rising major chord arpeggio when the level is completed. ### 3. Gameplay Loop * **Core Mechanic:** The player must connect pairs of matching colored dots by dragging a path between them. * **Constraint 1 (No Crossing):** Paths cannot cross each other. If a new path hits an existing path of a different color, the movement is blocked or the existing path is cut (depending on implementation preference, usually blocking is easier for UX). * **Constraint 2 (Self-Correction):** If the player drags backward along their currently drawing line, the line should retract/erase. * **Win Condition:** The level is won only when: 1. All color pairs are connected. 2. (Optional challenge) The entire grid is filled with pipes (100% coverage). * **Level Data:** Implement a simple array-based level structure (e.g., a 2D array where integers represent dot colors, 0 represents empty space) so multiple levels can be defined easily. ### 4. Mobile Controls & Interaction * **Input Handling:** Implement a Raycaster based system for Touch (mobile) and Mouse (desktop). * `touchstart` / `mousedown`: Select a dot to begin drawing. * `touchmove` / `mousemove`: fluidly extend the pipe to adjacent grid cells. * `touchend` / `mouseup`: Finalize the move. * **Screen Adaptation:** The game must fit within the width of a portrait mobile screen. The grid should be centered with padding. * **Touch Feedback:** * **Haptics:** Use `navigator.vibrate(10)` for a micro-vibration whenever the pipe enters a new grid cell to give tactile confirmation. * **Visuals:** Highlight the currently active dot/line with a slight emissive glow or size pulse. * **CSS Constraints:** Add `touch-action: none;` to the canvas to prevent the browser page from scrolling or refreshing while the user is trying to drag lines on the grid. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About Flow Mania

Flow Mania is an engaging puzzle game that puts your logical thinking and spatial reasoning skills to the ultimate test. The concept is beautifully simple yet incredibly challenging: connect matching colored dots by drawing lines between them. However, there's a catch - each level has only one correct solution, and you cannot overlap any of the colored paths.

This deceptively simple premise creates hours of addictive gameplay as you work through 150 carefully designed levels, each presenting unique challenges that will test your problem-solving abilities.

Core Features

Challenging Puzzle Mechanics

Every level in Flow Mania requires strategic thinking and careful planning. You must visualize the complete path before making your first move, as one wrong connection can block the entire solution. The no-overlap rule adds an extra layer of complexity that keeps even experienced puzzle solvers engaged.

Progressive Difficulty System

The game features 150 meticulously crafted levels that gradually increase in complexity. Starting with simple 5x5 grids, you'll progress to larger and more intricate puzzles that require advanced spatial reasoning and forward-thinking strategies.

Move Tracking System

Flow Mania tracks every move you make, allowing you to monitor your efficiency and challenge yourself to find optimal solutions. This feature adds a competitive element as you strive to complete levels with the minimum number of moves.

Cross-Platform Compatibility

Designed as a web-based game, Flow Mania works seamlessly across all devices. Whether you're on a desktop computer, tablet, or smartphone, you can enjoy the same smooth gameplay experience through your browser.

Gameplay Mechanics

The objective is straightforward: connect pairs of matching colored dots by drawing continuous lines between them. However, the execution requires careful consideration:

  • Plan Your Route : Before drawing any lines, study the entire grid and visualize potential paths
  • No Overlapping : Colored lines cannot cross or overlap each other
  • Fill the Grid : Most levels require you to use every available space on the grid
  • One Solution : Each puzzle has exactly one correct solution

Operation Guide

Desktop Controls : - Hold and drag the left mouse button to create connecting lines - Click and drag from one colored dot to its matching partner - Release the mouse button to complete the connection

Mobile Controls : - Touch and drag your finger to draw connections - Start from any colored dot and drag to its matching pair - Lift your finger to finalize the path

Tips for Success : - Start with dots that have limited connection options - Work from the edges of the grid inward - If you get stuck, restart the level and try a different approach - Take breaks if you're feeling frustrated - fresh eyes often see new solutions

Why Play Flow Mania

Flow Mania offers the perfect blend of relaxation and mental stimulation. Unlike fast-paced action games, this puzzle game allows you to think at your own pace while providing substantial cognitive benefits:

  • Improves Problem-Solving Skills : Each level presents a unique logical challenge
  • Enhances Spatial Reasoning : Visualizing paths strengthens spatial intelligence
  • Reduces Stress : The methodical gameplay provides a meditative experience
  • Builds Persistence : Challenging levels teach patience and determination
  • Accessible to All Ages : Simple rules make it suitable for players of any age

The game's clean, colorful interface and intuitive controls make it easy to pick up and play, while the depth of its puzzle design ensures long-lasting entertainment value. With 150 levels to master, Flow Mania provides weeks of engaging gameplay that will keep your mind sharp and entertained.

Frequently Asked Questions (FAQ)