Spaces:

porkz
/

blob-hunter

Running

App Files Files Community

porkz commited on 25 days ago

Commit

ab6a04a

verified ·

1 Parent(s): 15afa23

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +462 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Blob Hunter
-emoji: 🏆
-colorFrom: green
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: blob-hunter
+emoji: 🐳
+colorFrom: yellow
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,462 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>