1010 Color Match - Block Puzzle Game

Seele01-Flash
By
1010 Color Match is an addictive block puzzle game that combines strategic thinking with color matching. Connect 3 or more squares of the same color to clear them and score points in this engaging brain teaser.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "**1010 Color Match**". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** Create a clean, "Hyper-Casual" aesthetic with a flat design philosophy. Use an **Orthographic Camera** positioned directly overhead (Top-Down view) to ensure grid precision. * **The Grid:** Render a 10x10 (or 8x8) grid board centered on the screen. The grid background slots should be a subtle, dark grey (`#eeeeee` or similar) to contrast with the colorful blocks. * **Block Assets:** Use `BoxGeometry` but simulate "Rounded Corners" (visually or via a slight bevel if performant) to mimic the screenshot. * **Palette:** Use high-saturation, friendly colors: Golden Yellow (`#FFD700`), Sky Blue (`#5DADE2`), Lime Green (`#32CD32`), Coral Orange (`#FF7F50`), and Light Grey (`#D3D3D3`). * **Particles:** Implement a simple particle system for when blocks are matched and destroyed. Particles should inherit the color of the destroyed block and fade out quickly. * **Performance:** Use `InstancedMesh` for the background grid slots to reduce draw calls. Ensure materials are `MeshBasicMaterial` or `MeshLambertMaterial` for low mobile battery consumption. ### 2. Audio Requirements * **BGM:** A quiet, loopable "Zen/Puzzle" track. Soft electronic piano or marimba style. It should be non-intrusive to aid concentration. * **Sound Effects (SFX):** * **Pickup:** A soft "whoosh" or suction sound when the player touches and lifts a shape. * **Place:** A satisfying, solid "clack" or wooden block sound when a shape is successfully dropped onto the grid. * **Match/Clear:** A bright, positive "chime" or "pop" sound. * **Combo:** If multiple groups clear at once, play an ascending pitch variation of the match sound. * **Error:** A low, dull "thud" or vibration sound if the player tries to place a block in an invalid spot. ### 3. Gameplay Loop * **Shape Spawning:** At the bottom of the screen (below the main grid), spawn 3 random "Polyomino" shapes (Tetris-like shapes: single blocks, L-shapes, lines, 2x2 squares). Each individual block within a shape must have a specific color assigned. * **Placement Logic:** The player drags a shape from the spawn area to the board. The shape can only be placed if *all* its constituent blocks land on empty grid cells. * **Matching Mechanism (The Core Twist):** Unlike standard 1010 (which clears lines), this game clears **Colors**. * After a shape is placed, trigger a "Flood Fill" check. * Check if any placed block is connected horizontally or vertically to 2 or more other blocks of the **same color** (Total cluster size >= 3). * If yes, destroy/remove those blocks from the board immediately. * **Refill:** When all 3 spawn shapes are used, generate 3 new ones. * **Game Over:** Check before every spawn or after every move: If any of the available shapes cannot fit anywhere on the current board layout, the game ends. ### 4. Mobile Controls & Interaction * **Touch Input (Raycaster):** Implement `touchstart`, `touchmove`, and `touchend` event listeners mapped to a Three.js `Raycaster`. * **Drag Offset (Crucial for Mobile):** When the player drags a shape, render the shape slightly **above** the touch point (Y-offset on screen space). This ensures the player's finger does not obscure the blocks they are trying to place. * **Visual Guides:** When a shape is being dragged over a valid position on the grid, highlight the underlying grid cells (e.g., turn them a semi-transparent white) to show a "preview" of where it will land. * **Orientation:** Lock the design to **Portrait Mode**. The UI layout should be: Top = Score/Best Score; Middle = 10x10 Grid; Bottom = Shape Spawn Area. * **Haptic Feedback:** Trigger `window.navigator.vibrate(20)` (short tick) when a shape is successfully snapped into the grid, and a stronger vibration (50ms) when a match occurs. ### 5. Output Language * Please provide the code and comments in **English**. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

1010 Color Match is a captivating puzzle game that challenges your spatial reasoning and strategic thinking skills. This innovative twist on classic block puzzle games combines the familiar mechanics of piece placement with exciting color-matching elements. The game offers endless entertainment as you work to clear colored blocks while managing limited board space.

The objective is simple yet engaging: connect three or more squares of the same color to remove them from the board. However, mastering the game requires careful planning and strategic foresight as you must efficiently manage your board space while maximizing your score through clever combinations.

Core Features

Strategic Color Matching Gameplay

Unlike traditional block games, 1010 Color Match adds a layer of strategy through its color-matching mechanics. You must think ahead about color placement and potential connections while managing different shaped pieces.

Combo System and Bonus Points

The game rewards skilled players with a sophisticated combo system. Chain multiple color matches together to earn substantial bonus points and achieve higher scores. Master the timing and placement to create spectacular chain reactions.

Endless Challenge Mode

With no time limits or level restrictions, you can play at your own pace while trying to beat your personal best score. The challenge lies in how long you can continue before the board fills up completely.

Clean, Colorful Interface

The game features a bright, intuitive design with clearly distinguishable colors including yellow, blue, green, orange, and gray blocks. The clean aesthetic makes it easy to focus on strategy without distractions.

Cross-Platform Compatibility

Enjoy seamless gameplay across all devices. Whether you prefer playing on your desktop computer, smartphone, or tablet, the game adapts perfectly to your screen size and input method.

How to Play

Basic Controls

Playing 1010 Color Match is straightforward: - Click and Drag : Select shapes from the right panel and drag them onto the game board - Strategic Placement : Position pieces to create groups of 3+ matching colored squares - Clear Blocks : Watch as connected colored squares automatically disappear - Score Points : Earn points for each cleared block and bonus points for combos

Winning Strategy Tips

  1. Plan Ahead : Always consider how each piece placement affects future moves
  2. Create Combos : Try to set up multiple color matches in sequence for bonus points
  3. Manage Space : Keep the board as clear as possible to maintain flexibility
  4. Color Priority : Focus on creating larger groups of the same color when possible
  5. Corner Strategy : Use corners and edges efficiently to maximize space utilization

Why Play 1010 Color Match

Perfect Brain Training

This game excellently exercises your cognitive abilities including spatial reasoning, pattern recognition, and strategic planning. Regular play can help improve problem-solving skills and mental agility.

Accessible for All Ages

The simple drag-and-drop controls make it perfect for players of all ages and skill levels. Children can enjoy the colorful blocks while adults appreciate the strategic depth.

Stress-Free Gaming

With no time pressure or complex rules, 1010 Color Match provides a relaxing gaming experience that you can enjoy during short breaks or extended play sessions.

Completely Free

Enjoy unlimited gameplay without any cost. No downloads, installations, or hidden fees - just pure puzzle fun directly in your browser.

Great for Quick Sessions

Perfect for filling spare moments throughout your day. Each game session can be as short or long as you prefer, making it ideal for commutes, waiting periods, or leisure time.

Frequently Asked Questions (FAQ)