Same Game - Color Block Matching Puzzle

Seele01-Flash
By
Same Game is a classic color block matching puzzle that challenges your strategic thinking. Click groups of 2 or more same-colored blocks to clear them and watch as gravity creates new matching opportunities.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Same Game (3D Block Puzzle)". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** A clean, modern aesthetic similar to physical plastic toy blocks. Use an **Orthographic Camera** to ensure the grid remains readable and tap-accurate on mobile screens without perspective distortion. * **Block Models:** Create blocks using `THREE.BoxGeometry` with slight bevels (`bevelEnabled: true` in `ExtrudeGeometry` or simulated via shaders/textures) to catch light. Use `THREE.InstancedMesh` for rendering the grid to ensure 60FPS performance on mobile devices. * **Color Palette:** Use a high-contrast, saturated palette to distinguish block types clearly: Bright Red (`#e74c3c`), Deep Blue (`#3498db`), Vivid Green (`#2ecc71`), Sunshine Yellow (`#f1c40f`), and optional Purple (`#9b59b6`) for higher difficulty. * **Background:** A deep, matte charcoal or dark slate grey (`#2c3e50`) background to make the colors pop. Add a subtle, static vignette overlay to focus attention on the center. * **Particles:** When blocks are cleared, spawn simple cubic particles that explode outward and fade away, matching the color of the cleared blocks. ### 2. Audio Requirements * **BGM:** A relaxing, minimalist lo-fi or ambient electronic track. It should be repetitive but non-intrusive, aiding concentration. * **Sound Effects (SFX):** * **Tap/Select:** A soft "bloop" or bubble-pop sound. * **Clear Group:** A satisfying "crunch" or digital chime. The pitch should rise based on the number of blocks cleared (larger group = higher pitch/more complex chord). * **Invalid Move:** A dull "thud" or low-pitch error tone. * **Game Over:** A descending melodic scale indicating no moves left. ### 3. Gameplay Loop * **Grid Logic:** Generate a grid (default 10 columns x 15 rows, but responsive to screen aspect ratio). Populate it randomly with the 4-5 block colors. * **Matching Mechanic:** Implement a "flood fill" or recursive search algorithm. When the user taps a block: 1. Check if it has neighbors of the same color. 2. If the connected group size is >= 2, destroy the blocks. 3. If the group size is < 2, do nothing (or shake the block slightly). * **Gravity & Shifting:** 1. **Vertical Fall:** Remaining blocks must fall down to fill empty spaces immediately after a clear. 2. **Horizontal Shift:** If an entire column becomes empty, the columns to the right must shift left to close the gap. * **Scoring:** Score = $(N-2)^2$, where $N$ is the number of blocks cleared. Display the score dynamically. * **Win/Loss:** The game ends when no groups of 2+ same-colored blocks remain. * **Clear Bonus:** Give a massive score bonus if the board is completely empty. ### 4. Mobile Controls & Interaction * **Touch Controls:** Use `THREE.Raycaster` mapped to `touchstart` (for instant response) or `touchend`. Do not rely solely on `click` events. * **Responsiveness:** The grid must automatically center and scale to fit within the safer area of the screen. * *Portrait Mode:* Maximize width. * *Landscape Mode:* Maximize height, placing UI (Score/Reset) on the side. * **Haptic Feedback:** Trigger `navigator.vibrate(50)` when a group is successfully cleared to provide tactile confirmation. * **UI Layout:** * Place the "Reset" and "Score" UI at the bottom of the screen (in portrait) or right side (in landscape) within easy reach of the thumb. * Buttons must have a minimum hit area of 44x44 pixels. * **Animations:** Use a tweening library (like GSAP or TWEEN.js) for smooth block falling and column shifting animations. Blocks should not just "teleport" to new positions; they should slide. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About Same Game

Same Game is a timeless puzzle classic that combines simple rules with deep strategic gameplay. This addictive color-matching game challenges players to clear colored blocks by clicking groups of two or more adjacent blocks of the same color. As blocks disappear, gravity takes effect, causing remaining blocks to fall and shift, creating new matching opportunities and strategic decisions.

The game features a clean, minimalist design with vibrant colored blocks arranged in a grid. Each move affects the entire board layout, making every decision crucial to achieving high scores and clearing as many blocks as possible.

Core Features

Simple Yet Strategic Gameplay

Same Game proves that the best puzzle games have simple rules but complex strategies. Click any group of 2 or more adjacent same-colored blocks to remove them from the board. The challenge lies in planning your moves to create larger groups and maximize your score.

Physics-Based Block Movement

When you clear blocks, gravity immediately takes effect. Blocks above fall down to fill empty spaces, and if you clear an entire column, blocks slide horizontally to fill the gap. This dynamic movement system creates constantly changing puzzle scenarios.

Score-Based Challenge System

The game tracks your score based on the number of blocks cleared in each move. Larger groups yield exponentially higher scores, encouraging players to think strategically about move order and timing.

Minimalist Design

Featuring a clean, distraction-free interface, Same Game focuses entirely on the puzzle-solving experience. The bright, contrasting colors make it easy to identify matching groups, while the simple layout ensures smooth gameplay across all devices.

Game Mechanics

Block Clearing Rules

  • Click any group of 2 or more adjacent blocks of the same color
  • Blocks must be touching horizontally or vertically (diagonal doesn't count)
  • Larger groups provide exponentially higher scores
  • No time limit - think as long as you need

Gravity System

After clearing blocks: 1. Remaining blocks fall down to fill empty spaces below 2. If entire columns are cleared, blocks shift left to close gaps 3. New matching opportunities emerge after each move 4. The board continuously reorganizes itself

Operation Guide

Basic Controls

  • Mouse Click : Select and clear groups of same-colored blocks
  • Visual Feedback : Hover over blocks to see which group will be selected
  • Undo : Most versions allow undoing recent moves
  • Restart : Begin a new game at any time

Winning Strategies

  • Start from the bottom : Clearing lower blocks creates more dramatic shifts
  • Plan ahead : Consider how each move will affect block positions
  • Create larger groups : Combine smaller groups by strategic clearing
  • Avoid single blocks : Try to clear groups that won't leave isolated blocks
  • Column clearing : Sometimes clearing entire columns creates better opportunities

Why Play Same Game

Same Game offers the perfect balance of accessibility and depth that makes it appealing to puzzle fans of all skill levels. Its simple click-to-clear mechanic means anyone can start playing immediately, while the strategic depth provides endless replayability.

The game's mathematical scoring system creates natural replay value - players constantly strive to beat their high scores by discovering more efficient clearing patterns. Unlike timed puzzle games, Same Game allows for thoughtful consideration of each move, making it perfect for both quick casual sessions and longer strategic gameplay.

As a browser-based game, it's instantly accessible without downloads or installations, making it ideal for quick mental breaks or extended puzzle-solving sessions.

Frequently Asked Questions (FAQ)