Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Blocky Stacky Blitz - Tetris Game</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="components/game-controls.js"></script> | |
| <script src="components/score-display.js"></script> | |
| <script src="components/game-over.js"></script> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4"> | |
| <header class="mb-8 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">Blocky Stacky Blitz</h1> | |
| <p class="text-gray-400 mt-2">The ultimate tetris challenge</p> | |
| </header> | |
| <main class="flex flex-col md:flex-row items-center gap-8"> | |
| <div class="relative"> | |
| <canvas id="tetris" class="border-4 border-purple-600 rounded-lg shadow-2xl shadow-purple-900/50"></canvas> | |
| <custom-game-over></custom-game-over> | |
| </div> | |
| <div class="flex flex-col gap-6"> | |
| <custom-score-display></custom-score-display> | |
| <custom-game-controls></custom-game-controls> | |
| <div class="bg-gray-800 p-4 rounded-lg"> | |
| <h3 class="text-xl font-semibold mb-2 text-purple-400">How to Play</h3> | |
| <ul class="text-gray-300 space-y-1"> | |
| <li><span class="text-pink-400">← →</span> Move left/right</li> | |
| <li><span class="text-pink-400">↓</span> Soft drop</li> | |
| <li><span class="text-pink-400">↑</span> Rotate</li> | |
| <li><span class="text-pink-400">Space</span> Hard drop</li> | |
| <li><span class="text-pink-400">P</span> Pause</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="mt-12 text-center text-gray-500 text-sm"> | |
| <p>Built with ♥ using HTML5 Canvas</p> | |
| </footer> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |