Spaces:

porkz
/

blob-hunter

Running

File size: 14,780 Bytes

ab6a04a

<!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>