**Update README with detailed project overview and documentation**
Added an extensive README for the Neon Blocks project, including: - New project title and overview. - Feature list with descriptions. - Installation, prerequisites, and usage instructions. - Customization options, project structure, licensing, and acknowledgements. This replaces the previous minimal README with comprehensive documentation to help users understand, set up, and extend the game.
This commit is contained in:
parent
1c5eda4dd5
commit
9715b64412
101
README.md
101
README.md
|
|
@ -1,3 +1,100 @@
|
||||||
# NeonBlocks
|
# NEON BLOCKS: Cyberpunk Tetris
|
||||||
|
|
||||||
Cyberpunk Themed Tetris with a Fertig twist
|
## 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!
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue