broadfield-dev/stack-overflow-game

1---2title: Retro Tetris3emoji: 🎮4colorFrom: blue5colorTo: purple6sdk: docker7app_file: index.html8pinned: false9---10 11# 🎮 Retro Tetris12 13A stunning retro-styled Tetris game with authentic CRT TV aesthetics, dynamic backdrops, and procedurally generated music. Built with Phaser 3 and modern web technologies.14 15![Retro Tetris](public/assets/tv.png)16 17## ✨ Features18 19### 🖥️ Authentic CRT TV Experience20- **Realistic CRT Shader Effects**21  - Barrel distortion/curvature for authentic tube TV look22  - 480i-style scanlines23  - Subtle static noise with 4x4 pixel grains24  - Dynamic flicker effect with multiple frequencies25  - Phosphor glow on bright areas26  - Edge vignetting27- **Vintage TV Frame** - Game displayed inside a beautiful retro TV bezel28- **Pixel-Perfect Rendering** - Crisp 8x8 pixel blocks with nearest-neighbor filtering29 30### 🎨 Dynamic Visual System31- **10 Unique Level Backdrops** - Each level features a distinct hand-crafted backdrop32- **Adaptive Color Palette** - Block colors automatically extract and enhance from each level's backdrop for perfect visual harmony33- **Sprite-Based Blocks** - Detailed block rendering with depth and shading34- **Smooth Animations** - Crush animations, level transitions, and particle effects35 36### 🎵 Dynamic Music System37- **10 Unique Tracks** - Each level has its own AI-generated music track created with Suno AI38- **Thematic Soundscapes** - Music complements each level's visual theme39- **Retro Sound Effects** - Authentic 8-bit style procedurally generated sound effects40 41### 🎯 Two Game Modes421. **Classic Mode** - Traditional Tetris with 7 standard pieces (I, O, T, S, Z, J, L)432. **Advanced Mode** - Extended gameplay with additional unique pieces for extra challenge44 45### 🏆 Advanced Gameplay Features46- **Progressive Difficulty** - 10 levels with increasing speed47- **Combo System** - Chain multiple line clears for bonus points48- **Perfect Clear Bonus** - Extra points for clearing the entire board49- **T-Spin Detection** - Bonus points for advanced T-piece maneuvers50- **Hard Drop** - Instant piece placement with space bar51- **Ghost Piece** - Preview where your piece will land52- **Next Piece Preview** - Plan your strategy ahead53- **Pause Functionality** - Press P to pause/resume54 55### 📊 Scoring System56- Single line: 100 points × level57- Double lines: 300 points × level58- Triple lines: 500 points × level59- Tetris (4 lines): 800 points × level60- T-Spin: 400 points × level61- Combo multiplier: +50 points per combo × level62- Perfect Clear: 2000 points × level63 64### 🎮 Controls65- **Arrow Keys** - Move and rotate pieces66  - ← → : Move left/right67  - ↓ : Soft drop (faster descent)68  - ↑ : Rotate piece69- **Space Bar** - Hard drop (instant placement)70- **P** - Pause/Resume game71- **Mouse/Touch** - Navigate menus72 73## 🚀 Getting Started74 75### Prerequisites76- Node.js (v14 or higher)77- npm or yarn78 79### Installation80 811. Clone the repository:82```bash83git clone <repository-url>84cd tetris85```86 872. Install dependencies:88```bash89npm install90```91 923. Start the development server:93```bash94npm run dev95```96 974. Open your browser and navigate to `http://localhost:5173`98 99### Building for Production100 101```bash102npm run build103```104 105The built files will be in the `dist` directory.106 107## 🛠️ Technical Details108 109### Technologies Used110- **Phaser 3** - Game framework111- **Vite** - Build tool and dev server112- **WebGL** - Hardware-accelerated rendering and custom shaders113- **Canvas API** - Backdrop generation and color extraction114 115### Architecture116- **Scene-Based Structure** - Modular game scenes (Preload, Mode Select, Game)117- **Custom Shaders** - GLSL fragment shaders for CRT effects118- **Color Extraction System** - Automatic palette generation from backdrop images119- **Sprite Rendering Pipeline** - Dynamic block colorization and rendering120- **Procedural Sound Effects** - Real-time sound effect generation121 122### Performance123- 60 FPS target frame rate124- Optimized WebGL rendering125- Efficient sprite batching126- Minimal memory footprint127 128## 🎨 Customization129 130### Adding New Levels1311. Create a new backdrop image (256x224 pixels)1322. Place it in `public/assets/backdrops/level-X/backdrop.png`1333. Add corresponding music track in `public/assets/music/level-X/track.mp3`1344. Update `MAX_LEVEL` in `src/constants.js`135 136See `BACKDROP-GUIDE.md` for detailed instructions on creating backdrops.137 138### Adjusting CRT Effects139Edit `src/shaderOverlay.js` to customize:140- Curvature intensity141- Scanline density142- Static grain size and intensity143- Flicker frequency and amplitude144- Vignette strength145 146## 📁 Project Structure147 148```149tetris/150├── public/151│   └── assets/152│       ├── backdrops/      # Level backdrop images153│       ├── fonts/          # Bitmap fonts154│       ├── music/          # Level music tracks155│       ├── blocks-sprite.png156│       ├── game-over.png157│       ├── title.png158│       └── tv.png159├── src/160│   ├── scenes/161│   │   ├── PreloadScene.js162│   │   ├── ModeSelectScene.js163│   │   └── GameScene.js164│   ├── utils/165│   │   ├── ColorExtractor.js166│   │   ├── SpriteBlockRenderer.js167│   │   └── SoundGenerator.js168│   ├── constants.js169│   ├── main.js170│   └── shaderOverlay.js171├── index.html172└── package.json173```174 175## 🎯 Game Mechanics176 177### Piece Movement178- Pieces fall automatically based on level speed179- Wall kicks allow rotation near edges180- Floor kicks prevent unfair lockouts181- Smooth movement with keyboard repeat182 183### Level Progression184- Levels 1-10 with exponentially increasing speed185- New backdrop and music for each level186- Visual transition effects between levels187- Speed ranges from 1000ms (Level 1) to 100ms (Level 10)188 189### Line Clearing190- Standard Tetris line clear mechanics191- Animated crush effect for cleared lines192- Combo system rewards consecutive clears193- Perfect clear detection and bonus194 195## 🐛 Troubleshooting196 197See `TROUBLESHOOTING.md` for common issues and solutions.198 199## 📝 License200 201This project is licensed under the [Creative Commons Attribution 4.0 International License (CC BY 4.0)](https://creativecommons.org/licenses/by/4.0/).202 203You are free to:204- **Share** — copy and redistribute the material in any medium or format205- **Adapt** — remix, transform, and build upon the material for any purpose, even commercially206 207Under the following terms:208- **Attribution** — You must give appropriate credit, provide a link to the license, and indicate if changes were made.209 210## 👨‍💻 Credits211 212**Created by Marco van Hylckama Vlieg**213- Website: [ai-created.com](https://ai-created.com)214- Twitter/X: [@AIandDesign](https://x.com/AIandDesign)215 216### Tools & Technologies217- **Code**: Written with [Augment Code](https://www.augmentcode.com/) (Claude 4.5 Sonnet / Opus)218- **Music**: AI-generated with [Suno AI](https://suno.ai/)219- **Graphics**: Created on [Freepik](https://www.freepik.com/) and post-processed in Adobe Photoshop220- **Game Framework**: [Phaser 3](https://phaser.io/)221 222## 🙏 Acknowledgments223 224- Phaser 3 framework and community225- Suno AI for music generation capabilities226- Freepik for graphic design tools227- Augment Code for AI-assisted development228- Retro gaming aesthetics and CRT shader techniques229- Classic Tetris gameplay mechanics