Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Blob Hunter: Galactic Pursuit 🚀</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Press+Start+2P&display=swap'); | |
| body { | |
| background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); | |
| font-family: 'Orbitron', sans-serif; | |
| min-height: 100vh; | |
| margin: 0; | |
| overflow-x: hidden; | |
| color: #00fffc; | |
| } | |
| .game-container { | |
| box-shadow: 0 0 30px rgba(0, 255, 252, 0.3); | |
| border: 2px solid #00fffc; | |
| border-radius: 8px; | |
| background: rgba(15, 12, 41, 0.8); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .game-container::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: | |
| radial-gradient(circle at 20% 30%, rgba(0, 255, 252, 0.1) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 70%, rgba(0, 255, 252, 0.1) 0%, transparent 50%); | |
| pointer-events: none; | |
| } | |
| canvas { | |
| display: block; | |
| margin: 0 auto; | |
| border: 1px solid rgba(0, 255, 252, 0.3); | |
| } | |
| .score-display { | |
| font-family: 'Press Start 2P', cursive; | |
| text-shadow: 0 0 10px #00fffc; | |
| letter-spacing: 2px; | |
| } | |
| .game-over { | |
| background: rgba(15, 12, 41, 0.95); | |
| border: 2px solid #00fffc; | |
| box-shadow: 0 0 30px rgba(0, 255, 252, 0.5); | |
| } | |
| .btn-sci-fi { | |
| background: linear-gradient(45deg, #00fffc, #0088ff); | |
| border: none; | |
| color: #0f0c29; | |
| font-weight: bold; | |
| letter-spacing: 1px; | |
| transition: all 0.3s; | |
| box-shadow: 0 0 15px rgba(0, 255, 252, 0.5); | |
| } | |
| .btn-sci-fi:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 0 20px rgba(0, 255, 252, 0.8); | |
| } | |
| .stars { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| .star { | |
| position: absolute; | |
| background: white; | |
| border-radius: 50%; | |
| animation: twinkle var(--duration) infinite ease-in-out; | |
| } | |
| @keyframes twinkle { | |
| 0%, 100% { opacity: 0.2; } | |
| 50% { opacity: 1; } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { text-shadow: 0 0 5px #00fffc; } | |
| 50% { text-shadow: 0 0 20px #00fffc, 0 0 30px #00fffc; } | |
| 100% { text-shadow: 0 0 5px #00fffc; } | |
| } | |
| </style> | |
| </head> | |
| <body class="flex flex-col items-center justify-center p-4"> | |
| <!-- Background stars --> | |
| <div class="stars" id="stars"></div> | |
| <div class="text-center mb-6"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-2 pulse"> | |
| <i class="fas fa-gamepad mr-2"></i> BLOB HUNTER | |
| </h1> | |
| <p class="text-xl text-cyan-300">Galactic Pursuit</p> | |
| </div> | |
| <div class="game-container p-6 mb-6 w-full max-w-2xl"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="score-display text-xl"> | |
| <i class="fas fa-bolt mr-2"></i> SCORE: <span id="scoreDisplay">0</span> | |
| </div> | |
| <div class="score-display text-xl"> | |
| <i class="fas fa-clock mr-2"></i> TIME: <span id="timeDisplay">30</span>s | |
| </div> | |
| </div> | |
| <canvas id="gameCanvas" width="600" height="400"></canvas> | |
| <div class="mt-4 text-sm text-cyan-300 flex justify-between"> | |
| <div><i class="fas fa-circle text-blue-500 mr-1"></i> Blob = +10 pts</div> | |
| <div><i class="fas fa-circle text-black mr-1"></i> Bomb = -10 pts</div> | |
| <div><i class="fas fa-square text-red-500 mr-1"></i> Hunter (you)</div> | |
| </div> | |
| </div> | |
| <div id="gameOverDisplay" class="game-over hidden p-8 rounded-lg text-center max-w-md w-full"> | |
| <h2 class="text-3xl font-bold mb-4 pulse"> | |
| <i class="fas fa-skull mr-2"></i> MISSION FAILED! | |
| </h2> | |
| <h3 id="finalScore" class="text-2xl mb-6">Your final score: 0</h3> | |
| <button id="playAgainBtn" class="btn-sci-fi px-6 py-3 rounded-full text-lg"> | |
| <i class="fas fa-redo mr-2"></i> ENGAGE AGAIN | |
| </button> | |
| </div> | |
| <div class="mt-6 text-sm text-cyan-300 opacity-70"> | |
| <p>Move your hunter with the mouse and click to collect blobs. Avoid bombs!</p> | |
| </div> | |
| <script> | |
| // ----------------------- | |
| // Game Configuration | |
| // ----------------------- | |
| const GAME_DURATION = 30000; // ms (30 seconds) | |
| const BLOB_SIZE = 20; | |
| const BOMB_SIZE = 15; | |
| const HUNTER_SIZE = 20; | |
| const BLOB_SPEED = 2; | |
| const BOMB_SPEED = 1.5; | |
| const POINTS_PER_BLOB = 10; | |
| const PENALTY_PER_BOMB = 10; | |
| // ----------------------- | |
| // Game State Variables | |
| // ----------------------- | |
| let canvas = document.getElementById('gameCanvas'); | |
| let ctx = canvas.getContext('2d'); | |
| let score = 0; | |
| let gameOver = false; | |
| let timer = null; | |
| let timeInterval = null; | |
| let timeLeft = 30; | |
| let blobs = []; | |
| let bombs = []; | |
| let hunter = { | |
| x: canvas.width / 2, | |
| y: canvas.height / 2 | |
| }; | |
| // ----------------------- | |
| // Drawing Functions | |
| // ----------------------- | |
| function drawHunter() { | |
| // Draw hunter with gradient | |
| const gradient = ctx.createLinearGradient(hunter.x, hunter.y, hunter.x + HUNTER_SIZE, hunter.y + HUNTER_SIZE); | |
| gradient.addColorStop(0, '#ff0000'); | |
| gradient.addColorStop(1, '#ff6666'); | |
| ctx.fillStyle = gradient; | |
| ctx.fillRect(hunter.x, hunter.y, HUNTER_SIZE, HUNTER_SIZE); | |
| // Add glow effect | |
| ctx.shadowColor = '#ff0000'; | |
| ctx.shadowBlur = 10; | |
| ctx.fillRect(hunter.x, hunter.y, HUNTER_SIZE, HUNTER_SIZE); | |
| ctx.shadowBlur = 0; | |
| } | |
| function drawBlobs() { | |
| blobs.forEach(blob => { | |
| // Create radial gradient for blobs | |
| const gradient = ctx.createRadialGradient( | |
| blob.x, blob.y, 0, | |
| blob.x, blob.y, BLOB_SIZE/2 | |
| ); | |
| gradient.addColorStop(0, '#00ffff'); | |
| gradient.addColorStop(1, '#0000ff'); | |
| ctx.fillStyle = gradient; | |
| ctx.beginPath(); | |
| ctx.arc(blob.x, blob.y, BLOB_SIZE/2, 0, Math.PI * 2); | |
| ctx.fill(); | |
| // Add glow effect | |
| ctx.shadowColor = '#00ffff'; | |
| ctx.shadowBlur = 8; | |
| ctx.fill(); | |
| ctx.shadowBlur = 0; | |
| }); | |
| } | |
| function drawBombs() { | |
| bombs.forEach(bomb => { | |
| // Create radial gradient for bombs | |
| const gradient = ctx.createRadialGradient( | |
| bomb.x, bomb.y, 0, | |
| bomb.x, bomb.y, BOMB_SIZE/2 | |
| ); | |
| gradient.addColorStop(0, '#ff0000'); | |
| gradient.addColorStop(1, '#000000'); | |
| ctx.fillStyle = gradient; | |
| ctx.beginPath(); | |
| ctx.arc(bomb.x, bomb.y, BOMB_SIZE/2, 0, Math.PI * 2); | |
| ctx.fill(); | |
| // Add danger spikes | |
| ctx.strokeStyle = '#ff0000'; | |
| ctx.lineWidth = 2; | |
| for (let i = 0; i < 8; i++) { | |
| const angle = (i / 8) * Math.PI * 2; | |
| const x1 = bomb.x + Math.cos(angle) * BOMB_SIZE/2; | |
| const y1 = bomb.y + Math.sin(angle) * BOMB_SIZE/2; | |
| const x2 = bomb.x + Math.cos(angle) * (BOMB_SIZE/2 + 5); | |
| const y2 = bomb.y + Math.sin(angle) * (BOMB_SIZE/2 + 5); | |
| ctx.beginPath(); | |
| ctx.moveTo(x1, y1); | |
| ctx.lineTo(x2, y2); | |
| ctx.stroke(); | |
| } | |
| }); | |
| } | |
| function drawScore() { | |
| document.getElementById('scoreDisplay').textContent = score; | |
| } | |
| function updateTimer() { | |
| timeLeft = Math.ceil((GAME_DURATION - (Date.now() - startTime)) / 1000); | |
| document.getElementById('timeDisplay').textContent = timeLeft > 0 ? timeLeft : 0; | |
| } | |
| // ----------------------- | |
| // Game Logic Functions | |
| // ----------------------- | |
| function createBlob() { | |
| let x = Math.random() * (canvas.width - BLOB_SIZE); | |
| let y = Math.random() * (canvas.height - BLOB_SIZE); | |
| let speedX = (Math.random() - 0.5) * BLOB_SPEED; | |
| let speedY = (Math.random() - 0.5) * BLOB_SPEED; | |
| blobs.push({ x, y, speedX, speedY }); | |
| } | |
| function createBomb() { | |
| let x = Math.random() * (canvas.width - BOMB_SIZE); | |
| let y = Math.random() * (canvas.height - BOMB_SIZE); | |
| let speedX = (Math.random() - 0.5) * BOMB_SPEED; | |
| let speedY = (Math.random() - 0.5) * BOMB_SPEED; | |
| bombs.push({ x, y, speedX, speedY }); | |
| } | |
| function updateGameState() { | |
| // Move blobs | |
| blobs.forEach(blob => { | |
| blob.x += blob.speedX; | |
| blob.y += blob.speedY; | |
| // Bounce off walls | |
| if (blob.x < 0 || blob.x > canvas.width) blob.speedX *= -1; | |
| if (blob.y < 0 || blob.y > canvas.height) blob.speedY *= -1; | |
| }); | |
| // Move bombs | |
| bombs.forEach(bomb => { | |
| bomb.x += bomb.speedX; | |
| bomb.y += bomb.speedY; | |
| // Bounce off walls | |
| if (bomb.x < 0 || bomb.x > canvas.width) bomb.speedX *= -1; | |
| if (bomb.y < 0 || bomb.y > canvas.height) bomb.speedY *= -1; | |
| }); | |
| // Randomly add new blobs & bombs | |
| if (Math.random() < 0.05) createBlob(); | |
| if (Math.random() < 0.02) createBomb(); | |
| } | |
| function checkClick(x, y) { | |
| // Check if clicked on a blob | |
| for (let i = blobs.length - 1; i >= 0; i--) { | |
| let blob = blobs[i]; | |
| let distance = Math.sqrt((x - blob.x) ** 2 + (y - blob.y) ** 2); | |
| if (distance < BLOB_SIZE / 2) { | |
| score += POINTS_PER_BLOB; | |
| blobs.splice(i, 1); // remove blob | |
| playSound('blob'); | |
| return; | |
| } | |
| } | |
| // Check if clicked on a bomb | |
| for (let i = bombs.length - 1; i >= 0; i--) { | |
| let bomb = bombs[i]; | |
| let distance = Math.sqrt((x - bomb.x) ** 2 + (y - bomb.y) ** 2); | |
| if (distance < BOMB_SIZE / 2) { | |
| score -= PENALTY_PER_BOMB; | |
| bombs.splice(i, 1); // remove bomb | |
| playSound('bomb'); | |
| return; | |
| } | |
| } | |
| } | |
| function playSound(type) { | |
| // In a real game, you would play actual sound effects here | |
| console.log(`Playing ${type} sound`); | |
| } | |
| // ----------------------- | |
| // Main Game Loop | |
| // ----------------------- | |
| function draw() { | |
| if (gameOver) return; | |
| // Clear screen | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| // Draw starfield background | |
| drawStarfield(); | |
| // Draw everything | |
| drawBlobs(); | |
| drawBombs(); | |
| drawHunter(); | |
| drawScore(); | |
| // Update game state | |
| updateGameState(); | |
| // Request next frame | |
| requestAnimationFrame(draw); | |
| } | |
| function drawStarfield() { | |
| // Draw a subtle starfield in the background | |
| ctx.fillStyle = 'rgba(255, 255, 255, 0.1)'; | |
| for (let i = 0; i < 50; i++) { | |
| const x = Math.sin(Date.now() / 1000 + i) * canvas.width / 2 + canvas.width / 2; | |
| const y = Math.cos(Date.now() / 1200 + i * 2) * canvas.height / 2 + canvas.height / 2; | |
| const size = Math.random() * 2; | |
| ctx.beginPath(); | |
| ctx.arc(x, y, size, 0, Math.PI * 2); | |
| ctx.fill(); | |
| } | |
| } | |
| // ----------------------- | |
| // Event Listeners | |
| // ----------------------- | |
| canvas.addEventListener('mousemove', (e) => { | |
| const rect = canvas.getBoundingClientRect(); | |
| hunter.x = e.clientX - rect.left - HUNTER_SIZE / 2; | |
| hunter.y = e.clientY - rect.top - HUNTER_SIZE / 2; | |
| }); | |
| canvas.addEventListener('click', (e) => { | |
| const rect = canvas.getBoundingClientRect(); | |
| let x = e.clientX - rect.left; | |
| let y = e.clientY - rect.top; | |
| checkClick(x, y); | |
| }); | |
| document.getElementById('playAgainBtn').addEventListener('click', () => { | |
| // Reset game state | |
| score = 0; | |
| gameOver = false; | |
| timeLeft = 30; | |
| blobs = []; | |
| bombs = []; | |
| document.getElementById('gameOverDisplay').classList.add('hidden'); | |
| startGame(); | |
| }); | |
| // ----------------------- | |
| // Game Start/End Handling | |
| // ----------------------- | |
| let startTime; | |
| function startGame() { | |
| startTime = Date.now(); | |
| timeInterval = setInterval(updateTimer, 200); | |
| timer = setTimeout(() => { | |
| gameOver = true; | |
| clearInterval(timeInterval); | |
| document.getElementById('finalScore').textContent = `Your final score: ${score}`; | |
| document.getElementById('gameOverDisplay').classList.remove('hidden'); | |
| }, GAME_DURATION); | |
| // Create initial blobs and bombs | |
| for (let i = 0; i < 5; i++) createBlob(); | |
| for (let i = 0; i < 2; i++) createBomb(); | |
| draw(); // start drawing loop | |
| } | |
| // ----------------------- | |
| // Starfield Background | |
| // ----------------------- | |
| function createStars() { | |
| const starsContainer = document.getElementById('stars'); | |
| const starCount = 200; | |
| for (let i = 0; i < starCount; i++) { | |
| const star = document.createElement('div'); | |
| star.className = 'star'; | |
| // Random position | |
| const x = Math.random() * 100; | |
| const y = Math.random() * 100; | |
| // Random size | |
| const size = Math.random() * 2; | |
| // Random animation duration | |
| const duration = 3 + Math.random() * 7; | |
| star.style.left = `${x}%`; | |
| star.style.top = `${y}%`; | |
| star.style.width = `${size}px`; | |
| star.style.height = `${size}px`; | |
| star.style.setProperty('--duration', `${duration}s`); | |
| starsContainer.appendChild(star); | |
| } | |
| } | |
| // Initialize the game | |
| createStars(); | |
| startGame(); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=porkz/blob-hunter" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |