Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Pacman Retro 🎮</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-black min-h-screen flex flex-col items-center justify-center p-4"> | |
| <div class="max-w-4xl w-full"> | |
| <header class="text-center mb-8"> | |
| <h1 class="text-4xl md:text-6xl font-bold text-yellow-400 mb-2">PACMAN RETRO</h1> | |
| <p class="text-yellow-300 text-lg">Classic arcade game reimagined</p> | |
| </header> | |
| <div class="flex flex-col md:flex-row gap-8 items-center"> | |
| <div class="flex-1"> | |
| <div class="bg-gray-900 rounded-xl p-6 shadow-2xl border-2 border-yellow-500"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="text-yellow-400 font-bold text-xl">SCORE: <span id="score">0</span></div> | |
| <div class="text-yellow-400 font-bold text-xl">LIVES: <span id="lives">3</span></div> | |
| </div> | |
| <canvas id="gameCanvas" width="560" height="620" class="bg-black rounded-lg border-2 border-blue-500"></canvas> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="bg-gray-900 rounded-xl p-6 shadow-2xl border-2 border-yellow-500"> | |
| <h2 class="text-yellow-400 text-2xl font-bold mb-4">HOW TO PLAY</h2> | |
| <ul class="text-yellow-200 space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i data-feather="arrow-up" class="mr-2 text-yellow-400"></i> Arrow Up - Move Up | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="arrow-down" class="mr-2 text-yellow-400"></i> Arrow Down - Move Down | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="arrow-left" class="mr-2 text-yellow-400"></i> Arrow Left - Move Left | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="arrow-right" class="mr-2 text-yellow-400"></i> Arrow Right - Move Right | |
| </li> | |
| </ul> | |
| <div class="mb-6"> | |
| <h3 class="text-yellow-400 text-xl font-bold mb-2">OBJECTIVE</h3> | |
| <p class="text-yellow-200">Eat all the dots while avoiding ghosts. Collect power pellets to temporarily turn the tables on ghosts!</p> | |
| </div> | |
| <button id="startButton" class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 px-4 rounded-lg transition duration-300 transform hover:scale-105"> | |
| START GAME | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center text-yellow-300"> | |
| <p>© 2023 Pacman Retro - A classic arcade experience</p> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |