loftest/barcode-beast
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Snake Dodgy Racer</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>12</head>13<body class="bg-gray-900 text-white">14 <custom-navbar></custom-navbar>15 16 <main class="container mx-auto px-4 py-8">17 <div id="game-container" class="relative w-full max-w-3xl mx-auto bg-gray-800 rounded-lg overflow-hidden shadow-2xl">18 <canvas id="gameCanvas" class="w-full h-full"></canvas>19 <div id="game-over" class="absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-center hidden">20 <h2 class="text-4xl font-bold mb-4 text-red-500">GAME OVER</h2>21 <p class="text-2xl mb-6">Score: <span id="final-score">0</span></p>22 <button id="restart-btn" class="px-6 py-3 bg-green-500 hover:bg-green-600 rounded-lg font-bold text-lg transition-colors">23 Play Again24 </button>25 </div>26 <div id="start-screen" class="absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-center">27 <h1 class="text-5xl font-bold mb-6 text-green-400">Snake Dodgy Racer</h1>28 <p class="text-xl mb-8 text-center max-w-md">29 Hit snakes for points 🐍<br>30 Avoid deer or you lose 🦌31 </p>32 <button id="start-btn" class="px-8 py-4 bg-red-500 hover:bg-red-600 rounded-lg font-bold text-xl transition-colors">33 START GAME34 </button>35 </div>36 </div>37 38 <div class="mt-8 flex justify-between items-center max-w-3xl mx-auto">39 <div class="flex items-center space-x-4">40 <div class="flex items-center">41 <div class="w-8 h-8 bg-green-500 rounded mr-2"></div>42 <span>Snakes = +1 point</span>43 </div>44 <div class="flex items-center">45 <div class="w-8 h-8 bg-red-500 rounded mr-2"></div>46 <span>Deer = Game Over</span>47 </div>48 </div>49 <div class="text-2xl font-bold">50 Score: <span id="score">0</span>51 </div>52 </div>53 </main>54 55 <custom-footer></custom-footer>56 57 <script src="components/navbar.js"></script>58 <script src="components/footer.js"></script>59 <script src="script.js"></script>60 <script>61 feather.replace();62 // VANTA.GLOBE({63 // el: "body",64 // mouseControls: true,65 // touchControls: true,66 // gyroControls: false,67 // minHeight: 200.00,68 // minWidth: 200.00,69 // scale: 1.00,70 // scaleMobile: 1.00,71 // color: 0x3f3f3f,72 // backgroundColor: 0x11111173 // })74 </script>75<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>76<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>77</body>78</html>