Gridlock - Logic Puzzle Game

Seele01-Flash
By
Gridlock is a challenging logic puzzle game where you must strategically move sliding blocks to free the trapped blue piece. Test your problem-solving skills in this addictive brain teaser.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Gridlock: Stone Puzzle". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: A tactile, semi-realistic "Ancient Dungeon" aesthetic based on the provided stone texture. The game board is a 6x6 recessed stone slab. * **Blocks**: * **Standard Blocks**: Rectangular stone blocks (1x2 and 1x3 units) with a "chiseled rock" texture. Differentiate horizontal and vertical blocks slightly (e.g., different stone grain direction or slight color variation like slate grey vs. mossy grey). * **Hero Block (The "Blue Piece")**: A special 1x2 block that glows with a mystic blue emission (`EmissiveMaterial`). It should look like a magical rune stone to clearly distinguish it as the objective. * **Lighting**: Use a dramatic setup with a `PointLight` (torch flickers) and `AmbientLight` to create depth/shadows in the stone crevices. * **Camera**: Fixed Top-down Orthographic camera to ensure gameplay clarity on small mobile screens, but with a slight angle to show the 3D depth of the blocks. * **Optimization**: Use `InstancedMesh` for the floor tiles and standard blocks to reduce draw calls. Limit polygon count per block. ### 2. Audio Requirements * **BGM**: A low, drone-like ambient track that evokes an underground chamber (calm, thinking music). * **Sound Effects (Procedural/Synth via Web Audio API preference)**: * **Slide**: A low-pitch "grinding stone" friction sound that loops while a block is moving. * **Collision**: A heavy "thud" or "clack" when a block hits a wall or another block. * **Win**: A magical, reverberating chime or chord when the Blue Block passes through the exit gate. ### 3. Gameplay Loop * **Setup**: Initialize a 6x6 grid. Load a specific puzzle configuration (an array representing the grid state) containing: * The Blue Block (Horizontal movement only). * Vertical Obstacles (Move Up/Down only). * Horizontal Obstacles (Move Left/Right only). * An "Exit" gap located on the right side of the 3rd row (matching the Blue Block's row). * **Mechanics**: * Blocks are rigid; they cannot pass through each other. * Real-time collision detection: Dragging a block should physically stop when it hits an adjacent block or the grid boundary. * **Win Condition**: The Blue Block is dragged completely out of the grid through the Exit gap. * **Progression**: Upon winning, display a "Level Clear" UI overlay and reset the board or load the next configuration. ### 4. Mobile Controls & Interaction * **Touch Input System**: * Implement a custom Raycaster for `touchstart`, `touchmove`, and `touchend`. * **Do not** use OrbitControls. The camera must be static. * **Constraint**: Ensure horizontal blocks ignore vertical drag inputs and vice versa (lock axis during movement). * **Movement Feel**: * **1:1 Finger Tracking**: The block should follow the finger exactly (within grid constraints) rather than snapping instantly, to provide a tactile "sliding" feel. * **Snap-to-Grid**: When the user releases the touch, the block should smoothly animate (lerp) to the nearest valid integer grid position. * **Haptics**: Trigger `navigator.vibrate(10)` when a block hits a wall or settles into a grid slot for physical feedback. * **UI/UX**: * **Orientation**: Portrait mode locked. * **Reset Button**: Place a large, touch-friendly "Reset" icon (min 44x44px) at the top or bottom safe area. * Disable default browser touch behaviors (scrolling/zooming) via CSS (`touch-action: none`). Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Gridlock is a classic sliding block puzzle game that challenges your logical thinking and spatial reasoning skills. With a simple yet engaging concept, this brain teaser has captivated puzzle enthusiasts for years. The game features a grid filled with various colored blocks, and your mission is to strategically move them to create a clear path for the blue block to escape.

This timeless puzzle format offers endless entertainment while exercising your mind. Each level presents a unique arrangement of blocks, requiring careful planning and strategic thinking to solve.

Core Features

Classic Sliding Block Mechanics

Gridlock utilizes the beloved sliding block puzzle format, where pieces can only move in specific directions. This constraint creates the perfect balance of challenge and solvability that makes each puzzle satisfying to complete.

Progressive Difficulty

Start with simpler arrangements and gradually face more complex puzzles as you advance. Each level tests your ability to think several moves ahead and find the optimal solution path.

Brain Training Benefits

  • Improves spatial reasoning : Visualize how pieces interact within the confined space
  • Enhances problem-solving skills : Develop strategic thinking and planning abilities
  • Boosts concentration : Focus on finding the most efficient solution path
  • Exercises memory : Remember previous moves and their consequences

Instant Accessibility

Play immediately in your web browser without any downloads or installations. The game works perfectly on both desktop computers and mobile devices, making it accessible wherever you are.

Gameplay Mechanics

The core gameplay revolves around manipulating rectangular blocks within a confined grid. Each block can only slide in straight lines - either horizontally or vertically - depending on its orientation. The challenge lies in determining the correct sequence of moves to free the target blue piece.

Strategic Elements

  • Move Planning : Think multiple steps ahead to avoid creating unsolvable situations
  • Space Management : Use empty spaces efficiently to maneuver larger pieces
  • Pattern Recognition : Identify common block arrangements and their solutions

Operation Guide

Basic Controls

  • Click and Drag : Select any moveable block and drag it to slide in available directions
  • Directional Movement : Blocks can only move forward or backward along their length
  • Target Objective : Move the blue block to the designated exit point

Solving Strategy Tips

  1. Analyze the Layout : Study the initial arrangement before making your first move
  2. Identify Key Pieces : Determine which blocks are blocking the blue piece's path
  3. Work Backwards : Sometimes it helps to visualize the end goal and plan in reverse
  4. Use Corner Spaces : Utilize corners and edges effectively to create maneuvering room
  5. Practice Patience : Don't rush - take time to consider each move carefully

Why Play This Game

Gridlock offers the perfect combination of mental stimulation and entertainment. Unlike fast-paced action games, this puzzle encourages thoughtful, deliberate gameplay that can be both relaxing and intellectually rewarding. It's an ideal choice for:

  • Puzzle Enthusiasts : Classic sliding block mechanics with modern accessibility
  • Students and Professionals : Excellent for improving logical thinking skills
  • Casual Gamers : Easy to learn but challenging to master
  • Mobile Users : Perfect for short gaming sessions during breaks

The game's timeless appeal lies in its simplicity and depth. Each puzzle has a definitive solution, providing that satisfying "aha!" moment when you finally crack the code. Whether you're looking to kill time, exercise your brain, or simply enjoy a classic puzzle format, Gridlock delivers an engaging experience that never gets old.

Frequently Asked Questions (FAQ)