Fill the Gap - Tetris-Style Puzzle Game

Seele01-Flash
By
Fill the Gap is an engaging Tetris-inspired puzzle game where you strategically place randomly generated blocks to fill a 10x10 grid. Test your logic and spatial reasoning skills in this addictive browser-based puzzle experience.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Fill the Gap". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: Clean, modern "Flat 3D" aesthetic. Use an Orthographic Camera to ensure the 10x10 grid remains perfectly square and readable on small screens. * **Color Palette**: * Background: Deep slate blue or dark charcoal (e.g., `#2C3E50`) to reduce eye strain. * Grid Board: A slightly darker shade than the background with recessed styling (inner shadow effect) for the 10x10 slots. * Blocks: Bright, high-saturation colors (neon yellow, vibrant cyan, hot pink, lime green) to contrast sharply with the dark background. Give blocks a slight bevel or rounded corners (`THREE.BoxGeometry` with minimal subdivision or a custom rounded shader). * **Particles**: Implement a simple particle system (InstancedMesh for performance) that triggers an explosion of small cubes or sparkles whenever a row or column is cleared. * **Lighting**: Soft ambient light combined with a directional light from the top-left to create subtle drop shadows, giving depth to the placed blocks. ### 2. Audio Requirements * **BGM**: A relaxing, low-tempo "Lo-fi" or "Ambient Electronic" track. It should be non-intrusive and loop seamlessly to aid concentration. * **Sound Effects (SFX)**: * *Pickup*: A soft "pop" or "suction" sound when a player touches a block to drag it. * *Placement*: A satisfying "thud" or "click" when a block snaps into the grid. * *Line Clear*: A harmonious, high-pitched "chime" or "glass sparkle" sound. * *Game Over*: A descending tone or a low-energy "power down" sound. ### 3. Gameplay Loop * **Core Mechanic (1010! Style)**: This is **not** falling Tetris. * The board is a static 10x10 grid. * The player is presented with **three random shapes** (Tetrominoes or Pentominoes) spawned in a "dock" area below the main grid. * **Action**: The player drags a shape from the dock onto the grid. The shape can only be placed if there is enough empty space. * **Scoring**: When a horizontal row or vertical column is completely filled with blocks, that line disappears (clears), and the player earns points. * **Progression**: After placing all three available shapes, three new random shapes spawn in the dock. * **Game Over Condition**: The game ends when there is no space on the grid to fit any of the remaining shapes in the dock. ### 4. Mobile Controls & Interaction * **Touch Handling**: Use `touchstart`, `touchmove`, and `touchend` events mapped to a Raycaster. * **Drag Offset (Crucial)**: When the user touches and drags a block, render the active block **slightly above** the touch coordinates (y-axis offset). This ensures the player's finger does not obscure the block, allowing them to see exactly where they are placing it on the grid. * **Snap Preview**: As the player drags a block over the grid, show a semi-transparent "ghost" highlight indicating where the block will snap if released. * **Orientation**: Force or optimize for **Portrait Mode** layout. * Top: Score & Best Score UI. * Middle: 10x10 Grid (occupies max width). * Bottom: The "Dock" holding the 3 draggable pieces. * **Feedback**: Trigger `window.navigator.vibrate(20)` (Haptic Feedback) when a block is successfully placed or a line is cleared. Prevent default browser scrolling (`e.preventDefault()`) during gameplay interactions. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Fill the Gap is a captivating puzzle game that puts a fresh spin on the classic Tetris formula. Instead of falling blocks, you're presented with three different shaped pieces that you must strategically place on a 10x10 grid to fill entire rows and columns. This brain-teasing challenge combines spatial reasoning with strategic planning, making every move count.

The game's unique twist lies in its non-falling block mechanics - you have complete control over where and when to place each piece, allowing for deeper strategic thinking and planning ahead.

Core Features

Strategic Block Placement

Unlike traditional Tetris, Fill the Gap gives you three random shapes at a time, challenging you to find the optimal placement for maximum coverage. Each decision impacts your future options, creating a layered puzzle experience.

10x10 Grid Challenge

The compact 10x10 playing field creates intense spatial puzzles where every square matters. You'll need to carefully consider each placement to avoid getting stuck with unusable pieces.

Logic-Based Scoring

Earn points by successfully filling complete rows and columns. The more efficient your placements, the higher your score climbs. Strategic thinking is rewarded over quick reflexes.

Endless Replayability

With randomly generated shapes appearing in different combinations, no two games are exactly alike. Each session presents new challenges and opportunities for improvement.

Cross-Platform Compatibility

Play seamlessly on desktop computers, tablets, and mobile phones through any modern web browser. No downloads or installations required.

Game Mechanics

The objective is simple yet challenging: fill as much of the 10x10 grid as possible using the three randomly provided shapes. When you successfully complete a full row or column, it clears from the board, creating space for new pieces and earning you points.

The strategic depth emerges from the fact that shapes don't always fit perfectly together. You'll need to:

  • Analyze upcoming pieces
  • Plan optimal placements
  • Balance immediate gains with long-term strategy
  • Adapt when pieces don't fit as expected

Operation Guide

Fill the Gap features intuitive drag-and-drop controls:

  • Mouse Control : Click and drag any of the three available shapes to move them around the game area
  • Placement : Drop shapes onto the 10x10 grid where they fit
  • Rotation : Shapes cannot be rotated, adding an extra layer of challenge
  • Selection : You can choose which of the three available pieces to place first

The game automatically detects when you've filled complete rows or columns, clearing them and awarding points. Continue placing pieces until no more shapes can fit on the remaining grid space.

Why Play Fill the Gap

This game is perfect for puzzle enthusiasts who enjoy:

  • Mental Challenge : Exercise your spatial reasoning and logical thinking skills
  • Stress-Free Gaming : No time pressure or rushing - take your time to plan each move
  • Quick Sessions : Perfect for short breaks or longer puzzle-solving sessions
  • Skill Development : Improve pattern recognition and strategic planning abilities
  • Accessibility : Easy to learn but challenging to master, suitable for all skill levels

Fill the Gap offers the satisfaction of Tetris combined with the strategic depth of placement puzzles, creating a unique and addictive gaming experience that will keep you coming back for higher scores.

Frequently Asked Questions (FAQ)