# Falling-Block Puzzle Game

A lightweight, browser-based falling-block puzzle game built with vanilla HTML, CSS, and JavaScript.

---

## 1. Overview & Core Concept

Stones fall in pairs from the top of the board. Players move and rotate the falling pair to place them strategically. When 3 or more identically colored stones connect horizontally or vertically, they disappear. Unsupported stones drop down due to gravity, potentially creating combo chains.

---

## 2. Gameplay Mechanics & Rules

### 2.1 Game Board
- **Grid Dimensions**: 6 columns wide × 12 visible rows high (6 × 12).
- **Spawn / Buffer Area**: 2 hidden rows above the visible board (rows -1 and -2) used for spawning incoming pairs.

### 2.2 Falling Pieces (Pairs)
- Each piece consists of **2 connected stones** (1 pivot stone and 1 satellite stone).
- The stones in a pair are randomly selected from the available color pool.
- Pieces spawn horizontally centered at the top of the board.
- When the pair makes contact with the floor or existing stones, the two stones disconnect and each stone falls independently to the lowest available space directly below it.

### 2.3 Stone Colors
- **Total Colors**: 4 distinct, high-contrast colors:
  - Red
  - Blue
  - Green
  - Yellow

### 2.4 Matching & Elimination
- **Match Condition**: Any group of **3 or more connected stones of the same color** (orthogonally adjacent: horizontal or vertical, not diagonal) is cleared.
- **Simultaneous Matches**: If multiple distinct groups of 3+ stones form at the same time, all matching groups disappear simultaneously.

### 2.5 Gravity & Chains (Combos)
- After matched stones disappear, any stones resting above empty spaces drop downward until they land on solid ground or another stone.
- If newly settled stones form another group of 3 or more matching stones, a **chain reaction (combo)** triggers and those stones clear as well.
- Chains repeat until no further matches of 3 or more exist.

### 2.6 Game Over Condition
- If a piece finishes falling/locking while any part of it is still sticking out above the top of the visible screen (above row 0), it is **Game Over**.
- If a newly spawned piece cannot enter the board because the spawn columns are blocked, it is also Game Over.

### 2.7 Scoring (Default Design)
- **Base Clear**: 10 points per eliminated stone.
- **Chain Bonus**: Multiplier increases with chain count (1x for chain 1, 2x for chain 2, 4x for chain 3, 8x for chain 4, etc.).
- A "High Score" and "Current Score" counter will be displayed.

---

## 3. Controls

| Key | Action | Description |
|:---:|:---|:---|
| **4** | Move Left | Shift the falling pair one cell to the left |
| **6** | Move Right | Shift the falling pair one cell to the right |
| **5** | Rotate Clockwise | Rotate the satellite stone 90° clockwise around the pivot stone |
| **2** | Fast Drop | Accelerate the downward movement of the falling pair |

*(Note: Supports both regular number row keys and numeric keypad keys.)*

---

## 4. Technical Architecture

The project strictly follows a simple 3-file structure with no sound effects and no external dependencies:

```
game01/
├── index.html   # Markup: Game board canvas/DOM container, score panel, control hints
├── style.css    # Styling: Layout, colors, board grid, responsive center alignment
└── script.js    # Logic: Game loop, grid matrix, pair movement, matching, chain gravity
```

### Key Technical Details
- **Rendering**: Plain HTML/CSS grid or `<canvas>` (plain DOM elements styled via CSS recommended for simplicity).
- **Audio**: None (strictly no sound effects or music).
- **Game Loop**: `requestAnimationFrame` or `setInterval` managing tick intervals (normal fall rate: ~800ms per step, fast drop: ~50ms per step).