The Black - Minimalist Tile Puzzle Game

Seele01-Flash
By
The Black is an addictive minimalist puzzle game that challenges your mind with simple yet complex tile-flipping mechanics. Click white tiles to turn them and adjacent tiles black in this elegant brain teaser.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "**The Black**". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** Ultra-minimalist, high-contrast monochromatic aesthetics. Use a clean off-white background (`#F5F5F5`) to make the game elements pop. * **Game Board:** A centered grid of 3D tiles. The tiles should be slightly rounded cubes (ChamferBox geometry) to catch light highlights. * **Tile States:** * **White State:** The tile is white (`#FFFFFF`). * **Black State:** The tile is pure black (`#111111`). * **Animations:** When a tile is tapped, it must not simply change color; strictly implement a **flip animation** (rotation 180 degrees along the X or Y axis) using a tweening library (like TWEEN.js or GSAP) to transition between white and black. * **Lighting:** Use a soft Ambient Light combined with a Directional Light casting soft shadows to give depth to the 3D tiles, emphasizing that this is a tactile 3D interface, not just 2D. * **Camera:** Fixed top-down Perspective Camera, slightly angled to show the thickness of the tiles. * **Performance:** Use InstancedMesh if possible for the grid to reduce draw calls, though simple Mesh is acceptable given the low object count (max 6x6 grid). ### 2. Audio Requirements * **BGM:** A very subtle, low-frequency ambient drone or "Zen" style track that aids concentration. It should be non-intrusive. * **Sound Effects (SFX):** * **Flip Sound:** A crisp, tactile "clack" or "domino stone" sound when a tile flips. * **Win Sound:** A short, harmonious piano chord or ascending scale when the board becomes fully black. * **UI Click:** A soft "tap" sound for menu buttons. ### 3. Gameplay Loop * **Core Mechanic (Lights Out Logic):** The game starts with a grid (default 4x4). Some tiles are white, some are black. * **Interaction:** When the player taps a tile: 1. The tapped tile flips (toggles color). 2. The **adjacent** tiles (Top, Bottom, Left, Right) also flip (toggle color). * **Goal:** The objective is to turn **ALL** tiles on the grid to **BLACK**. * **Level Generation (Crucial):** To ensure every puzzle is solvable, do **not** randomize the grid purely. Instead, start with a completed "All Black" grid, and programmatically simulate $N$ random clicks on the board to create the puzzle state. * **Progression:** * Level 1-5: 4x4 Grid. * Level 6-10: 5x5 Grid. * Level 10+: 6x6 Grid. ### 4. Mobile Controls & Interaction * **Touch Control:** Use a Three.js `Raycaster` mapped to touch events (`touchstart` / `touchend`) to detect tile interaction. * **Hit Testing:** Ensure the raycast hit area is generous. Even if there is a small gap between tiles, the code should calculate the nearest tile center to prevent "missed clicks." * **Orientation:** Lock UI layout to "Responsive," but optimize primarily for **Portrait Mode**. The grid should dynamically scale to fit the width of the screen with a safe margin. * **Feedback:** * **Visual:** When a tile is touched, it should briefly depress (move slightly down on Z/Y axis) before flipping. * **Haptic:** Trigger `navigator.vibrate(10)` (light vibration) on every valid move if the device supports it. * **UI Elements:** * Display a clean "Level X" indicator at the top. * A "Reset" button at the bottom to restart the current level. * All buttons must be at least 44x44 pixels in hit area for mobile accessibility. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About The Game

The Black is the ultimate minimalist puzzle game that combines elegant design with challenging gameplay. This free online brain teaser features a sleek black-and-white aesthetic that focuses purely on puzzle-solving mechanics. With its simple concept but increasingly complex solutions, The Black offers hours of engaging entertainment for puzzle enthusiasts of all skill levels.

The game challenges players to transform entire grids from white to black using strategic tile clicks. Each move affects not only the targeted tile but also its adjacent neighbors, creating a ripple effect that requires careful planning and logical thinking.

Core Features

Minimalist Design Excellence

The Black strips away unnecessary elements to focus on pure puzzle mechanics. The clean black-and-white interface eliminates distractions, allowing players to concentrate entirely on solving each challenging level.

Progressive Difficulty System

Start with simple 3x3 grids and advance through increasingly complex puzzles. Choose from multiple grid sizes: - 4x4 grids : Perfect for beginners learning the mechanics - 5x5 grids : Intermediate challenge requiring strategic thinking - 6x6 grids : Advanced puzzles testing expert problem-solving skills

Cross-Platform Compatibility

  • Completely Free : No hidden costs or premium features
  • HTML5 Technology : Runs smoothly in any modern browser
  • Mobile Optimized : Perfect touch controls for smartphones and tablets
  • Instant Play : No downloads or installations required
  • Desktop Ready : Full mouse and keyboard support

Addictive Gameplay Loop

Each level presents a unique challenge that builds upon previous lessons. The satisfaction of solving each puzzle drives players to tackle increasingly difficult configurations, creating an engaging progression system.

Game Mechanics

The core gameplay revolves around a simple but powerful mechanic: clicking any white tile turns it black while simultaneously flipping all adjacent tiles (up, down, left, right) to their opposite colors. This creates a cascading effect where each move influences multiple tiles, requiring players to think several steps ahead.

Strategic Elements

  • Ripple Effects : Every click affects neighboring tiles
  • Planning Required : Solutions often require specific move sequences
  • Multiple Approaches : Many puzzles have alternative solution paths
  • Undo Function : Experiment freely with different strategies

Operation Guide

Desktop Controls

  • Mouse Click : Select and activate tiles
  • Point and Click : Simple one-click tile interaction
  • Visual Feedback : Immediate response to all actions

Mobile Controls

  • Tap to Select : Touch any tile to activate it
  • Responsive Design : Optimized for various screen sizes
  • Gesture Support : Smooth touch interactions

Gameplay Strategy

  1. Analyze the Pattern : Study the initial tile configuration
  2. Plan Your Moves : Consider how each click affects surrounding tiles
  3. Work Systematically : Develop a logical approach to each puzzle
  4. Experiment Freely : Use trial and error to discover solutions
  5. Think Ahead : Consider the consequences of each move

Why Play The Black

Perfect for Mental Exercise

The Black provides excellent cognitive training, improving pattern recognition, logical thinking, and strategic planning skills. Each puzzle session exercises your brain while providing satisfying entertainment.

Stress-Free Gaming

With no time limits or pressure mechanics, players can solve puzzles at their own pace. The minimalist design creates a calm, meditative gaming experience perfect for relaxation.

Universal Appeal

  • Easy to Learn : Simple rules that anyone can understand
  • Hard to Master : Deep strategic elements for experienced players
  • Age-Appropriate : Suitable for players of all ages
  • Quick Sessions : Perfect for short breaks or extended play

Accessibility Features

  • No Registration Required : Start playing immediately
  • Offline Capability : Works without constant internet connection
  • Lightweight : Fast loading times on any device
  • Battery Efficient : Optimized for mobile battery life

Frequently Asked Questions (FAQ)