Mosaic - Color Matching Puzzle Game

Seele01-Flash
By
Mosaic is a captivating color-matching puzzle game where you arrange colored squares to create beautiful stained glass-like patterns. With simple controls and engaging gameplay, it's perfect for puzzle enthusiasts of all ages.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Mosaic". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: "Modern Stained Glass" aesthetic. A clean, minimalist 3D approach with a top-down orthographic camera view (or slight perspective). * **The Tile Asset**: Create a custom geometry or texture for the square tiles. Each tile is divided diagonally into four triangular sections (Top, Right, Bottom, Left). * Each section must have a specific color (e.g., Neon Cyan, Magenta, Lime Green, Bright Orange). * There should be a small, white circular "rivet" or dot in the exact center of the tile. * Material: Use `MeshPhysicalMaterial` with slight roughness and transmission to simulate a semi-transparent, glassy look. * **The Grid**: A dark, matte background (dark grey or near-black) to make the colors pop. The grid slots should be faintly outlined or indented to show where pieces fit. * **Performance**: Use low-poly geometries (simple BoxGeometries or PlaneGeometries). Ensure textures are small (if used) or use vertex colors/canvas generation to keep the asset size minimal for mobile loading. ### 2. Audio Requirements * **BGM**: A generative, ambient, calming electronic track. Think "Zen Puzzle" or "Elevator Lo-Fi". It should be non-intrusive loop. * **Sound Effects (SFX)**: * **Pickup**: A soft "suction" or high-pitched "pop". * **Snap/Place**: A satisfying, crisp "click" or "clack" sound (like a domino hitting a table) when a tile snaps into the grid. * **Invalid Move**: A dull, low-pitched thud or spring sound if the player tries to place a tile where edges don't match. * **Level Clear**: A shimmering "glass chime" arpeggio. ### 3. Gameplay Loop * **Setup**: Generate a grid (e.g., 4x4 or 5x5). * *Procedural Generation Logic*: The game should internally generate a "solved" board first to ensure a solution exists, then scramble the pieces or move them to an "inventory" area at the bottom of the screen. * **Mechanic**: The core mechanic is **Edge Matching**. * The player drags a tile from the inventory to a grid slot. * **Validation**: A tile can only be placed if its adjacent edges match the colors of the neighboring tiles already on the board. (e.g., The *Right* triangle of Tile A is Green, so the *Left* triangle of Tile B placed next to it must also be Green). * **Win Condition**: The level is complete when the entire grid is filled, and all adjacent edges match colors perfectly. * **Progression**: Start with a 3x3 grid (easy) and increase grid size (4x4, 5x5) as levels progress. ### 4. Mobile Controls & Interaction * **Touch Controls**: Implement a robust Raycaster system for `touchstart`, `touchmove`, and `touchend` events. * **Drag & Drop**: The tile should follow the user's finger/cursor slightly above the board (y-axis lift) to indicate it is being held. * **Visual Feedback**: * When dragging a tile over a grid slot, the slot should highlight (glow or change color) to indicate it's a valid drop zone. * If the move is valid (colors match), the tile snaps instantly to the center of the slot. * If invalid, the tile smoothly animates back to its original position in the inventory (elastic bounce effect). * **Haptics**: Trigger `navigator.vibrate(10)` on a successful snap. * **Orientation**: Design for **Portrait Mode** primarily (grid on top, inventory on bottom), but ensure the camera resizes correctly if the user rotates to Landscape. * **UI**: Minimalist HUD. A "Reset" button and "Level" counter in the top corners (min size 44x44px for touch targets). Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Mosaic is a free online puzzle game that challenges your spatial reasoning and color coordination skills. Rated 4.3/5 by players, this engaging HTML5 game transforms simple colored squares into beautiful mosaic patterns reminiscent of stained glass art. The game offers a perfect blend of relaxation and mental stimulation, making it ideal for quick gaming sessions or extended puzzle-solving adventures.

In Mosaic, your objective is to arrange multi-colored squares on a grid by matching their colored sides with adjacent squares. Each successful match brings you closer to completing stunning visual patterns that resemble traditional mosaic artwork.

Core Features

Intuitive Color Matching Mechanics

The game revolves around a simple yet addictive concept: match the colored edges of squares to create harmonious patterns. Each square has different colored sides, and your task is to rotate and position them so that adjacent sides share the same color.

Beautiful Visual Patterns

As you successfully match colors, beautiful stained glass-like mosaics emerge on your screen. These artistic patterns provide immediate visual satisfaction and a sense of accomplishment with each completed puzzle.

Cross-Platform Compatibility

Mosaic is built with HTML5 technology, ensuring seamless performance across all devices. Whether you're playing on a desktop computer, tablet, or smartphone, the game adapts perfectly to your screen size and input method.

Instant Play Technology

No downloads or installations required. Simply open your browser and start playing immediately. This instant-access feature makes Mosaic perfect for quick gaming breaks or when you need a mental refresh.

All-Ages Entertainment

With its peaceful gameplay and beautiful visuals, Mosaic is suitable for players of all ages. The game provides a calming experience while still offering enough challenge to keep your mind engaged.

Gameplay

Objective

Your goal in each level is to arrange colored squares on the grid so that matching colors align on adjacent sides. When properly aligned, these squares create beautiful mosaic patterns that fill the scoring grid according to specific requirements.

Strategic Thinking

While the concept is simple, Mosaic requires careful planning and spatial awareness. You'll need to consider how each square's rotation affects the overall pattern and plan several moves ahead to achieve the desired result.

Progressive Difficulty

The game features multiple levels with increasing complexity, ensuring that both beginners and experienced puzzle solvers find appropriate challenges. Each level presents unique grid configurations and color arrangements.

Operation Guide

Desktop Controls

  • Mouse Click : Select a square to interact with it
  • Click and Drag : Move squares to different positions on the grid
  • Mouse Movement : Point to different squares to preview placement options

Mobile Controls

  • Tap : Select squares for manipulation
  • Touch and Drag : Move squares around the grid with your finger
  • Pinch/Zoom : Adjust view for better precision (if needed)

Gameplay Tips

  • Study the grid layout before making moves
  • Plan your color matches systematically
  • Work from corners or edges for easier pattern recognition
  • Take your time - there's no time pressure

Why Play This Game

Mental Exercise

Mosaic provides excellent brain training through spatial reasoning, pattern recognition, and logical thinking. It's a perfect way to keep your mind sharp while having fun.

Stress Relief

The game's peaceful nature and beautiful visual outcomes make it an excellent stress-relief activity. The satisfaction of creating perfect color matches provides a meditative gaming experience.

Accessibility

With its simple controls and clear visual feedback, Mosaic is accessible to players of all skill levels and ages. The game's intuitive interface ensures anyone can start playing immediately.

Artistic Appreciation

Each completed puzzle creates a unique piece of digital art, combining gaming achievement with aesthetic appreciation. The stained glass-style patterns are genuinely beautiful to observe.

Perfect for Short Sessions

Whether you have five minutes or an hour, Mosaic adapts to your available time. Each puzzle can be completed relatively quickly, making it perfect for breaks or commutes.

Frequently Asked Questions (FAQ)