3 Tiles - Matching Puzzle

Seele01-Flash
By
3 Tiles is a delightful tile-matching puzzle game that challenges your observation skills and strategic thinking. Clear intricate tile stacks by finding and removing sets of three identical picture tiles.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "**3 Tiles: Cute Animal Match**". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: A cozy, vibrant, and cartoonish aesthetic similar to "Animal Crossing" or "Tsum Tsum". The color palette should be pastel and high-brightness (sky blue background, soft green ground, cream-colored tiles). * **The Tiles**: Create 3D tiles using `THREE.BoxGeometry` with beveled edges (or a rounded rectangle shape). They must look like physical Mahjong tiles with a slight thickness. * **Textures**: Use placeholder colors or generated canvas textures representing cute icons: Rabbit (Pink), Chick (Yellow), Tiger (Orange), Frog (Green), Hippo (Purple). * **Stacking**: The game board must support 3D layering. Tiles are placed on top of each other, casting soft shadows (using `THREE.DirectionalLight`) on the tiles below to indicate depth. * **Mobile Optimization**: Use `THREE.InstancedMesh` for the tiles to minimize draw calls, as there may be 50+ tiles on screen. Ensure textures are power-of-two (e.g., 256x256) for GPU efficiency. * **Collection Bar (The Dock)**: A semi-transparent UI container fixed at the bottom of the screen (simulating the screenshot's wooden tray) capable of holding exactly 7 tiles. ### 2. Audio Requirements * **Background Music (BGM)**: A relaxing, looped track featuring acoustic guitar or soft piano. It should evoke a "sunny afternoon" feeling. * **Sound Effects (SFX)**: * **Tap**: A satisfying "wooden click" or "soft pop" sound when a tile is touched. * **Travel**: A "whoosh" sound as the tile flies from the board to the collection bar. * **Match**: A cheerful "chime" or major-chord arpeggio when 3 tiles merge and disappear. * **Game Over**: A soft, disappointed "wobble" sound. * **Win**: A celebratory fanfare with confetti popping sounds. ### 3. Gameplay Loop * **Setup**: Generate a level with a randomized but solvable configuration of tile layers. Ensure the total number of tiles is a multiple of 3. * **Interaction Logic**: * The player taps a tile that is "clickable" (a tile is clickable if it is not fully covered by another tile). * The clicked tile animates (using a tweening library like GSAP) from its position on the board into the first available slot in the **Collection Bar**. * **Matching Logic**: * The code must constantly check the Collection Bar. * If **3 identical tiles** exist in the bar, they are removed immediately, and the remaining tiles in the bar slide left to fill the gap. * **Win/Loss Conditions**: * **Win**: The board is completely cleared. * **Loss**: The Collection Bar fills up with 7 tiles, and no match is formed. ### 4. Mobile Controls & Interaction * **Camera & Orientation**: * Set up a **Portrait Mode** (vertical) camera (`THREE.OrthographicCamera` is preferred for isometric puzzles) to allow for one-handed play. * The camera should be fixed but zoomed appropriately to fit the board width. * **Touch Controls**: * Implement a `Raycaster` bound to `touchstart` (not just `click`) events for responsive mobile input. * The clickable area of each tile must be accurate. * **Visual Feedback**: * **Selection**: When a tile is tapped, it should scale down slightly (e.g., to 0.9x) before flying to the bar. * **Impossible Move**: If a user taps a covered tile, the tile should "wiggle" to indicate it is locked. * **Juice**: When a match occurs, emit simple particle effects (stars or sparks) at the match location. * **UI Layout**: * Place the **Collection Bar** in the bottom 20% of the screen (easy thumb reach). * Place utility buttons (Shuffle, Hint) just above the Collection Bar, with minimum touch targets of 44x44 pixels. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

3 Tiles is a captivating tile-matching puzzle game that combines strategy with visual recognition skills. The game features charming picture tiles arranged in complex stacks, challenging players to identify and clear matching sets of three identical tiles. With its colorful cartoon-style graphics and intuitive gameplay mechanics, 3 Tiles offers an engaging puzzle experience suitable for players of all ages.

The game's core mechanic revolves around careful observation and strategic planning. As tiles are stacked in intricate patterns, only the topmost tiles are accessible, requiring players to think several moves ahead to successfully clear each level.

Core Features

Strategic Tile Management

Unlike traditional match-3 games, 3 Tiles requires careful consideration of tile placement and accessibility. Each move affects which tiles become available next, creating a deeper strategic layer that keeps players engaged.

Charming Visual Design

The game features adorable cartoon-style artwork with colorful, easily distinguishable tile designs. From cute animals to friendly faces, each tile type is beautifully crafted and instantly recognizable.

Progressive Challenge System

Levels gradually increase in complexity, introducing more intricate tile arrangements and requiring greater strategic thinking. The difficulty curve ensures both newcomers and puzzle veterans find appropriate challenges.

Brain Training Benefits

3 Tiles serves as excellent brain training, improving: - Pattern Recognition : Quickly identifying matching tile sets - Spatial Reasoning : Understanding 3D tile stack arrangements - Strategic Planning : Thinking ahead to avoid getting stuck - Focus and Concentration : Maintaining attention to detail

Gameplay Mechanics

The objective is simple yet engaging: clear all tiles from the board by finding and removing sets of three identical tiles. However, the stacked arrangement creates strategic depth:

  1. Accessibility Rules : Only tiles on top of stacks can be selected
  2. Three-Match System : You must collect exactly three identical tiles to clear them
  3. Stack Dynamics : Removing tiles reveals those underneath, changing available options
  4. Level Completion : Clear all tiles to advance to the next challenge

Operation Guide

Basic Controls

  • Mouse Click : Select tiles by clicking with the left mouse button
  • Touch Support : On mobile devices, tap tiles directly with your finger
  • Selection Process : Click three identical tiles to automatically clear them
  • Undo Function : Most versions include an undo option for strategic corrections

Winning Strategies

  • Plan Ahead : Consider which tiles will become available after each move
  • Avoid Dead Ends : Don't leave single tiles of a type inaccessible
  • Work from Top Down : Generally focus on clearing upper layers first
  • Pattern Recognition : Develop skills to quickly spot matching opportunities

Why Play This Game

3 Tiles stands out in the crowded puzzle game market through its unique combination of accessibility and depth. The game is completely free to play in your web browser, requiring no downloads or installations. Its charming art style and satisfying gameplay mechanics create an addictive experience that's perfect for quick gaming sessions or extended puzzle-solving marathons.

The game excels as both entertainment and brain training. Regular play can improve cognitive functions while providing relaxing, meditative gameplay. Whether you're looking to kill time during a break or engage in serious puzzle-solving, 3 Tiles adapts to your preferred play style.

Perfect for All Skill Levels

Beginners can enjoy the intuitive mechanics and clear visual feedback, while experienced puzzle enthusiasts will appreciate the strategic depth and increasingly complex challenges. The game's difficulty progression ensures everyone finds their appropriate challenge level.

Frequently Asked Questions (FAQ)