Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Slithering Snake Saga - Game</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4"> | |
| <div class="game-container"> | |
| <canvas id="gameCanvas" width="400" height="400"></canvas> | |
| <div class="controls"> | |
| <button id="upBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-6 rounded-full"> | |
| ↑ | |
| </button> | |
| <div class="flex flex-col gap-2"> | |
| <button id="leftBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-6 rounded-full"> | |
| ← | |
| </button> | |
| <button id="rightBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-6 rounded-full"> | |
| → | |
| </button> | |
| </div> | |
| <button id="downBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-6 rounded-full"> | |
| ↓ | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex gap-4 items-center"> | |
| <div class="bg-gray-800 p-3 rounded-lg"> | |
| <span class="text-green-400 font-bold">Score: </span> | |
| <span id="score" class="text-white">0</span> | |
| </div> | |
| <button id="startBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-6 rounded-lg"> | |
| Start Game | |
| </button> | |
| <button id="resetBtn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-6 rounded-lg"> | |
| Reset | |
| </button> | |
| </div> | |
| <script src="game.js"></script> | |
| </body> | |
| </html> |