# NEON BLOCKS: Cyberpunk Tetris

## Overview

**NEON BLOCKS** is a browser‑based, cyber‑punk styled Tetris clone that combines classic gameplay with a heavy dose of visual flair.  The game runs entirely in a single `index.html` file and showcases a collection of modern web‑animation techniques:

- **Neon‑glow graphics** using CSS custom properties and canvas shadow effects.
- **Dynamic background** that changes colour on each level‑up and features a pulsing neon overlay with a glitch‑style wipe transition.
- **Digital rain (Matrix‑style) effect** that drifts across the screen and reacts to wind changes.
- **Particle explosions** when a line is cleared, complete with glowing squares, circles and short “tech” line fragments.
- **Glitch flash** that briefly brightens the screen whenever the wind direction changes.
- **Music playlist** with automatic track‑advancing and level‑up sound cues.
- **Responsive UI** showing score, level, and cleared lines, plus start / game‑over overlays.
- **Full keyboard controls** (arrow keys, Q/W for rotation, space for hard‑drop).

All of these are implemented with vanilla JavaScript, HTML5 Canvas, and pure CSS – no external libraries are required.

---

## Features in Detail

| Feature | Description |
|---------|-------------|
| **Neon Palette** | Ten custom CSS variables (`--neon-0` … `--neon-9`) provide a muted neon colour set that is used for background wipes, particle colours, and the digital‑rain overlay. |
| **Level‑Up Overlay** | When the player clears enough rows, a large “Level Up!” text animates (scale, shake, fade) and the background colour changes to a random neon hue. |
| **Wipe Transition** | A temporary `<div class="wipe">` slides across the screen using a CSS keyframe animation, blending the new background colour with the existing scene. |
| **Digital Rain** | A second canvas (`.digital-rain`) draws falling Japanese‑katakana characters. Wind direction changes every 8‑12 seconds, causing a subtle horizontal drift and a brief glitch flash. |
| **Particle System** | Each cleared line spawns a burst of particles (5 per block) that fade out, fall under gravity, and emit a soft glow. Random white sparks add extra sparkle. |
| **Music Playlist** | An array of eight tracks (`music/track01.mp3` … `track08.mp3`). The playlist starts when the game begins, advances automatically on each level‑up, and stops on game‑over. |
| **Sound Effects** | Separate audio elements for piece placement, line‑clear explosion, and level‑up. |
| **Responsive UI** | Score, level, and lines are displayed in neon‑styled stat boxes that slide in from the right side of the game container. |
| **Keyboard Controls** | 
  - ← / → : Move piece left/right
  - ↓ : Soft drop (increase speed)
  - Q / W or ↑ : Rotate left/right
  - Space : Hard drop (instantly drop to the bottom)
| **Game Flow** | Start screen → gameplay → game‑over screen → reset. All state is reset when the player clicks “Initialize System” or “Reboot System”. |

---

## Getting Started

### Prerequisites

- A modern web browser with support for HTML5 Canvas, CSS custom properties, and the Web Audio API (Chrome, Firefox, Edge, Safari). No server‑side components are required.

### Installation

1. **Clone the repository** (or download the zip):
   ```bash
   git clone https://github.com/your‑username/neon‑blocks.git
   cd neon‑blocks
   ```
2. **Place your audio assets**:
   - Add your music files to the `music/` folder (or edit `MUSIC_PLAYLIST` in the script to point to external URLs).
   - Ensure the sound‑effect files (`fx/place.mp3`, `fx/explode.mp3`, `fx/levelUp.mp3`) exist, or replace the paths with your own.
3. **Open the game**:
   ```bash
   open index.html   # macOS
   xdg-open index.html   # Linux
   start index.html   # Windows
   ```
   Or simply double‑click `index.html` in your file explorer.

### Customisation

- **Change the neon palette** – edit the `--neon-0` … `--neon-9` variables in the `<style>` block.
- **Adjust music** – modify the `MUSIC_PLAYLIST` array in the script.
- **Tweak difficulty** – change `dropInterval` calculation in `levelUp()` or the base value `1000`.
- **Add more rain characters** – edit the `RAIN_CHARS` string.
- **Control particle density** – adjust the loop count in `createExplosion`.

---

## Project Structure

```
├── index.html          # Main game file (HTML, CSS, JS)
├── music/              # Folder for background tracks (optional)
├── fx/                 # Folder for sound‑effect files
└── README.md           # This documentation
```

All logic lives inside the `<script>` tag of `index.html`.  The file is deliberately self‑contained so the project can be hosted on static sites (GitHub Pages, Netlify, Vercel, etc.) without any build step.

---

## License

This project is released under the **MIT License** – you are free to use, modify, and distribute it, provided the original copyright notice is retained.

---

## Acknowledgements

- The classic Tetris implementation is based on the popular **“tetris‑js”** tutorial by **Javidx9**.
- Neon glow and glitch effects were inspired by various cyber‑punk UI demos.
- Digital rain characters are taken from the original *Matrix* effect examples.

Enjoy the neon‑lit blocks and happy hacking!