Spaces:

ChuckNoriss
/

blobio

Running

App Files Files Community

ChuckNoriss commited on Sep 16, 2025

Commit

c0dba68

verified ·

1 Parent(s): 0f4bc7f

make a game like agar.io but its not multiplayer - Initial Deployment

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +373 -18
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Blobio
-emoji: 🔥
 colorFrom: pink
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: blobio
+emoji: 🐳
 colorFrom: pink
+colorTo: purple
 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,374 @@
-<!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.io - Single Player Agar.io Clone</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        canvas {
+            display: block;
+            background-color: #f0f9ff;
+        }
+        #gameUI {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            pointer-events: none;
+        }
+        #scoreContainer {
+            background-color: rgba(255, 255, 255, 0.8);
+            border-radius: 9999px;
+            padding: 0.5rem 1rem;
+            margin: 1rem;
+            display: inline-flex;
+            align-items: center;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        }
+        #startScreen, #gameOverScreen {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            background-color: rgba(0, 0, 0, 0.5);
+            color: white;
+        }
+        .btn {
+            pointer-events: auto;
+            background-color: #3b82f6;
+            color: white;
+            border: none;
+            padding: 0.75rem 1.5rem;
+            border-radius: 0.375rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        }
+        .btn:hover {
+            background-color: #2563eb;
+            transform: translateY(-2px);
+        }
+        .btn:active {
+            transform: translateY(0);
+        }
+        .hidden {
+            display: none !important;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="gameCanvas"></canvas>
+    <div id="gameUI">
+        <div id="scoreContainer" class="flex items-center">
+            <i data-feather="award" class="mr-2"></i>
+            <span id="score">0</span>
+        </div>
+    </div>
+    <div id="startScreen">
+        <h1 class="text-4xl font-bold mb-6">Blob.io</h1>
+        <p class="text-xl mb-8 text-center max-w-md px-4">Eat smaller blobs to grow bigger. Avoid larger blobs!</p>
+        <button id="startBtn" class="btn">Start Game</button>
+    </div>
+    <div id="gameOverScreen" class="hidden">
+        <h1 class="text-4xl font-bold mb-4">Game Over</h1>
+        <p class="text-xl mb-2">Your score: <span id="finalScore">0</span></p>
+        <p class="text-lg mb-8">High score: <span id="highScore">0</span></p>
+        <button id="restartBtn" class="btn">Play Again</button>
+    </div>
+    <script>
+        feather.replace();
+        // Game variables
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        const scoreElement = document.getElementById('score');
+        const finalScoreElement = document.getElementById('finalScore');
+        const highScoreElement = document.getElementById('highScore');
+        const startScreen = document.getElementById('startScreen');
+        const gameOverScreen = document.getElementById('gameOverScreen');
+        const startBtn = document.getElementById('startBtn');
+        const restartBtn = document.getElementById('restartBtn');
+        // Set canvas size
+        function resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+        resizeCanvas();
+        window.addEventListener('resize', resizeCanvas);
+        // Game state
+        let gameRunning = false;
+        let score = 0;
+        let highScore = localStorage.getItem('highScore') || 0;
+        highScoreElement.textContent = highScore;
+        // Player blob
+        const player = {
+            x: canvas.width / 2,
+            y: canvas.height / 2,
+            radius: 20,
+            color: '#3b82f6',
+            speed: 5
+        };
+        // Food blobs
+        let food = [];
+        const foodColors = ['#ef4444', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6', '#ec4899'];
+        // Enemy blobs
+        let enemies = [];
+        const enemyColors = ['#dc2626', '#ea580c', '#059669', '#1d4ed8', '#7e22ce', '#be185d'];
+        // Mouse position
+        let mouseX = player.x;
+        let mouseY = player.y;
+        // Initialize game
+        function initGame() {
+            score = 0;
+            scoreElement.textContent = score;
+            player.radius = 20;
+            player.x = canvas.width / 2;
+            player.y = canvas.height / 2;
+            food = [];
+            enemies = [];
+            // Create initial food
+            for (let i = 0; i < 50; i++) {
+                createFood();
+            }
+            // Create initial enemies
+            for (let i = 0; i < 5; i++) {
+                createEnemy();
+            }
+        }
+        // Create food blob
+        function createFood() {
+            const radius = Math.random() * 10 + 5;
+            food.push({
+                x: Math.random() * canvas.width,
+                y: Math.random() * canvas.height,
+                radius: radius,
+                color: foodColors[Math.floor(Math.random() * foodColors.length)],
+                speedX: (Math.random() - 0.5) * 2,
+                speedY: (Math.random() - 0.5) * 2
+            });
+        }
+        // Create enemy blob
+        function createEnemy() {
+            const radius = Math.random() * 30 + 20;
+            enemies.push({
+                x: Math.random() * canvas.width,
+                y: Math.random() * canvas.height,
+                radius: radius,
+                color: enemyColors[Math.floor(Math.random() * enemyColors.length)],
+                speedX: (Math.random() - 0.5) * 2,
+                speedY: (Math.random() - 0.5) * 2
+            });
+        }
+        // Check collision between two circles
+        function checkCollision(circle1, circle2) {
+            const dx = circle1.x - circle2.x;
+            const dy = circle1.y - circle2.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            return distance < circle1.radius + circle2.radius;
+        }
+        // Game loop
+        function gameLoop() {
+            if (!gameRunning) return;
+            // Clear canvas
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // Move player toward mouse
+            const dx = mouseX - player.x;
+            const dy = mouseY - player.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            if (distance > 5) {
+                player.x += dx / distance * player.speed;
+                player.y += dy / distance * player.speed;
+            }
+            // Draw player
+            ctx.beginPath();
+            ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
+            ctx.fillStyle = player.color;
+            ctx.fill();
+            ctx.closePath();
+            // Draw food
+            for (let i = 0; i < food.length; i++) {
+                const blob = food[i];
+                // Move food
+                blob.x += blob.speedX;
+                blob.y += blob.speedY;
+                // Bounce off walls
+                if (blob.x - blob.radius < 0 || blob.x + blob.radius > canvas.width) {
+                    blob.speedX = -blob.speedX;
+                }
+                if (blob.y - blob.radius < 0 || blob.y + blob.radius > canvas.height) {
+                    blob.speedY = -blob.speedY;
+                }
+                // Draw food
+                ctx.beginPath();
+                ctx.arc(blob.x, blob.y, blob.radius, 0, Math.PI * 2);
+                ctx.fillStyle = blob.color;
+                ctx.fill();
+                ctx.closePath();
+                // Check collision with player
+                if (checkCollision(player, blob)) {
+                    // Player can only eat smaller or equal size food
+                    if (player.radius >= blob.radius) {
+                        // Increase player size and score
+                        player.radius += blob.radius * 0.2;
+                        score += Math.floor(blob.radius);
+                        scoreElement.textContent = score;
+                        // Remove food and create new one
+                        food.splice(i, 1);
+                        createFood();
+                        i--;
+                    }
+                }
+            }
+            // Draw enemies
+            for (let i = 0; i < enemies.length; i++) {
+                const enemy = enemies[i];
+                // Move enemy
+                enemy.x += enemy.speedX;
+                enemy.y += enemy.speedY;
+                // Bounce off walls
+                if (enemy.x - enemy.radius < 0 || enemy.x + enemy.radius > canvas.width) {
+                    enemy.speedX = -enemy.speedX;
+                }
+                if (enemy.y - enemy.radius < 0 || enemy.y + enemy.radius > canvas.height) {
+                    enemy.speedY = -enemy.speedY;
+                }
+                // Draw enemy
+                ctx.beginPath();
+                ctx.arc(enemy.x, enemy.y, enemy.radius, 0, Math.PI * 2);
+                ctx.fillStyle = enemy.color;
+                ctx.fill();
+                ctx.closePath();
+                // Check collision with player
+                if (checkCollision(player, enemy)) {
+                    // Enemy can eat player if larger
+                    if (enemy.radius > player.radius * 1.1) {
+                        gameOver();
+                        return;
+                    }
+                    // Player can eat enemy if significantly larger
+                    else if (player.radius > enemy.radius * 1.5) {
+                        // Increase player size and score
+                        player.radius += enemy.radius * 0.3;
+                        score += Math.floor(enemy.radius * 2);
+                        scoreElement.textContent = score;
+                        // Remove enemy and create new one
+                        enemies.splice(i, 1);
+                        createEnemy();
+                        i--;
+                    }
+                }
+                // Check collision with food
+                for (let j = 0; j < food.length; j++) {
+                    if (checkCollision(enemy, food[j]) && enemy.radius > food[j].radius) {
+                        // Enemy eats food
+                        enemy.radius += food[j].radius * 0.1;
+                        food.splice(j, 1);
+                        createFood();
+                        j--;
+                    }
+                }
+            }
+            // Occasionally add more food and enemies
+            if (Math.random() < 0.01) {
+                createFood();
+            }
+            if (Math.random() < 0.005) {
+                createEnemy();
+            }
+            requestAnimationFrame(gameLoop);
+        }
+        // Game over
+        function gameOver() {
+            gameRunning = false;
+            finalScoreElement.textContent = score;
+            // Update high score
+            if (score > highScore) {
+                highScore = score;
+                highScoreElement.textContent = highScore;
+                localStorage.setItem('highScore', highScore);
+            }
+            gameOverScreen.classList.remove('hidden');
+        }
+        // Event listeners
+        canvas.addEventListener('mousemove', (e) => {
+            mouseX = e.clientX;
+            mouseY = e.clientY;
+        });
+        // Touch support for mobile
+        canvas.addEventListener('touchmove', (e) => {
+            e.preventDefault();
+            mouseX = e.touches[0].clientX;
+            mouseY = e.touches[0].clientY;
+        }, { passive: false });
+        startBtn.addEventListener('click', () => {
+            startScreen.classList.add('hidden');
+            gameRunning = true;
+            initGame();
+            gameLoop();
+        });
+        restartBtn.addEventListener('click', () => {
+            gameOverScreen.classList.add('hidden');
+            gameRunning = true;
+            initGame();
+            gameLoop();
+        });
+    </script>
+</body>
 </html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ make a game like agar.io but its not multiplayer