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):

   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:

   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!