101 lines
5.3 KiB
Markdown
101 lines
5.3 KiB
Markdown
# 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!
|