Spaces:

offerpk3
/

fish.io

Running

App Files Files Community

offerpk3 commited on Jun 4, 2025

Commit

680f57f

verified ·

1 Parent(s): 7e78268

Update index.html

Browse files

Files changed (1) hide show

index.html +723 -19

index.html CHANGED Viewed

@@ -1,19 +1,723 @@
-<!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>Fish.io - Territory Game</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 20px;
+            background: linear-gradient(180deg, #001133 0%, #003366 50%, #004080 100%);
+            font-family: 'Arial', sans-serif;
+            color: white;
+            overflow: hidden;
+        }
+        .game-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            flex-direction: column;
+        }
+        .ui-panel {
+            display: flex;
+            justify-content: space-between;
+            width: 800px;
+            margin-bottom: 10px;
+            font-size: 18px;
+            font-weight: bold;
+        }
+        .score-info {
+            background: rgba(0, 50, 100, 0.8);
+            padding: 10px 20px;
+            border-radius: 10px;
+            border: 2px solid #00ccff;
+        }
+        #gameCanvas {
+            border: 3px solid #00ccff;
+            border-radius: 10px;
+            box-shadow: 0 0 30px rgba(0, 204, 255, 0.5);
+            background: linear-gradient(45deg, #001a33, #002d5a);
+        }
+        .menu-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 20, 40, 0.95);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 100;
+        }
+        .menu-title {
+            font-size: 48px;
+            font-weight: bold;
+            color: #00ccff;
+            text-shadow: 0 0 20px #00ccff;
+            margin-bottom: 20px;
+        }
+        .menu-subtitle {
+            font-size: 20px;
+            margin-bottom: 30px;
+            text-align: center;
+            line-height: 1.5;
+        }
+        .menu-button {
+            background: linear-gradient(45deg, #0066cc, #00ccff);
+            border: none;
+            padding: 15px 40px;
+            font-size: 20px;
+            font-weight: bold;
+            color: white;
+            border-radius: 25px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin: 10px;
+        }
+        .menu-button:hover {
+            transform: scale(1.1);
+            box-shadow: 0 0 20px #00ccff;
+        }
+        .controls {
+            font-size: 16px;
+            margin-top: 20px;
+            text-align: center;
+            opacity: 0.8;
+        }
+        .how-to-play {
+            background: rgba(0, 50, 100, 0.9);
+            border: 2px solid #00ccff;
+            border-radius: 15px;
+            padding: 20px;
+            margin: 20px;
+            max-width: 600px;
+            text-align: left;
+            line-height: 1.6;
+        }
+        .how-to-play h3 {
+            color: #00ccff;
+            text-align: center;
+            margin-bottom: 15px;
+        }
+        .how-to-play ul {
+            margin: 10px 0;
+            padding-left: 20px;
+        }
+        .how-to-play li {
+            margin: 5px 0;
+        }
+        .hidden {
+            display: none;
+        }
+        .game-over-stats {
+            font-size: 18px;
+            margin: 20px 0;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <div class="game-container">
+        <div class="ui-panel">
+            <div class="score-info">
+                <div>Territory: <span id="territoryScore">0</span>%</div>
+            </div>
+            <div class="score-info">
+                <div>Time: <span id="timeScore">0</span>s</div>
+            </div>
+            <div class="score-info">
+                <div>Enemies: <span id="enemyCount">0</span></div>
+            </div>
+            <div class="score-info">
+                <div>Kills: <span id="killCount">0</span></div>
+            </div>
+        </div>
+        <canvas id="gameCanvas" width="800" height="600"></canvas>
+        <div id="startMenu" class="menu-overlay">
+            <div class="menu-title">🐠 FISH.IO 🐠</div>
+            <div class="menu-subtitle">
+                Control your fish to claim territory and defend yourself!
+            </div>
+            <div class="how-to-play">
+                <h3>🎯 HOW TO PLAY</h3>
+                <strong>🏊 Movement:</strong>
+                <ul>
+                    <li>Use ARROW KEYS or WASD to move your fish</li>
+                    <li>Stay in blue territory (safe zone) or venture out to expand</li>
+                </ul>
+                <strong>🏆 Territory Claiming:</strong>
+                <ul>
+                    <li>Leave your territory to create a yellow trail</li>
+                    <li>Return to your territory to claim the enclosed area</li>
+                    <li>Larger territory = higher score</li>
+                </ul>
+                <strong>⚔️ Combat System:</strong>
+                <ul>
+                    <li>Your fish auto-fires at nearby enemies</li>
+                    <li>Eliminate enemies to reduce threats</li>
+                    <li>Each kill doubles the enemy count - be strategic!</li>
+                </ul>
+                <strong>⚠️ Dangers:</strong>
+                <ul>
+                    <li>Enemy fish can kill you on contact</li>
+                    <li>Your trail is vulnerable when outside territory</li>
+                    <li>More enemies spawn as you progress</li>
+                </ul>
+            </div>
+            <button class="menu-button" onclick="startGame()">START GAME</button>
+        </div>
+        <div id="gameOverMenu" class="menu-overlay hidden">
+            <div class="menu-title">GAME OVER</div>
+            <div class="game-over-stats" id="finalStats"></div>
+            <button class="menu-button" onclick="restartGame()">🔄 RESTART GAME</button>
+            <button class="menu-button" onclick="showStartMenu()">🏠 MAIN MENU</button>
+        </div>
+    </div>
+    <script>
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        // Audio context for background music
+        let audioContext;
+        let backgroundMusic;
+        let gameRunning = false;
+        // Game state
+        let player = {
+            x: 100,
+            y: 300,
+            size: 15,
+            speed: 3,
+            color: '#00ccff',
+            trail: [],
+            inTerritory: true,
+            fireRate: 500, // milliseconds between shots
+            lastShot: 0,
+            range: 100
+        };
+        let enemies = [];
+        let bullets = [];
+        let territory = new Set();
+        let claimedArea = new Set();
+        let gameTime = 0;
+        let level = 1;
+        let lastTime = 0;
+        let killCount = 0;
+        // Initialize territory around player start
+        for(let x = 80; x <= 120; x += 2) {
+            for(let y = 280; y <= 320; y += 2) {
+                territory.add(`${x},${y}`);
+                claimedArea.add(`${x},${y}`);
+            }
+        }
+        // Input handling
+        const keys = {};
+        document.addEventListener('keydown', (e) => {
+            keys[e.key.toLowerCase()] = true;
+        });
+        document.addEventListener('keyup', (e) => {
+            keys[e.key.toLowerCase()] = false;
+        });
+        // Initialize audio
+        function initAudio() {
+            if (!audioContext) {
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                createBackgroundMusic();
+            }
+        }
+        function createBackgroundMusic() {
+            // Create a simple ambient underwater music
+            const oscillator1 = audioContext.createOscillator();
+            const oscillator2 = audioContext.createOscillator();
+            const gainNode = audioContext.createGain();
+            const filter = audioContext.createBiquadFilter();
+            oscillator1.type = 'sine';
+            oscillator2.type = 'sine';
+            oscillator1.frequency.setValueAtTime(220, audioContext.currentTime);
+            oscillator2.frequency.setValueAtTime(165, audioContext.currentTime);
+            filter.type = 'lowpass';
+            filter.frequency.setValueAtTime(800, audioContext.currentTime);
+            gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
+            oscillator1.connect(filter);
+            oscillator2.connect(filter);
+            filter.connect(gainNode);
+            gainNode.connect(audioContext.destination);
+            // Add some variation
+            setInterval(() => {
+                if (gameRunning && audioContext) {
+                    const freq1 = 220 + Math.sin(Date.now() * 0.001) * 30;
+                    const freq2 = 165 + Math.cos(Date.now() * 0.0007) * 20;
+                    oscillator1.frequency.setValueAtTime(freq1, audioContext.currentTime);
+                    oscillator2.frequency.setValueAtTime(freq2, audioContext.currentTime);
+                }
+            }, 100);
+            oscillator1.start();
+            oscillator2.start();
+            backgroundMusic = { oscillator1, oscillator2, gainNode };
+        }
+        function startGame() {
+            document.getElementById('startMenu').classList.add('hidden');
+            gameRunning = true;
+            initAudio();
+            resetGame();
+            gameLoop();
+        }
+        function resetGame() {
+            player = {
+                x: 100,
+                y: 300,
+                size: 15,
+                speed: 3,
+                color: '#00ccff',
+                trail: [],
+                inTerritory: true,
+                fireRate: 500,
+                lastShot: 0,
+                range: 100
+            };
+            enemies = [];
+            bullets = [];
+            territory = new Set();
+            claimedArea = new Set();
+            gameTime = 0;
+            level = 1;
+            killCount = 0;
+            // Initialize territory
+            for(let x = 80; x <= 120; x += 2) {
+                for(let y = 280; y <= 320; y += 2) {
+                    territory.add(`${x},${y}`);
+                    claimedArea.add(`${x},${y}`);
+                }
+            }
+            spawnEnemies();
+        }
+        function spawnEnemies() {
+            // Don't clear existing enemies, just add new ones
+            const newEnemyCount = Math.max(1, 2 + Math.floor(level * 0.5));
+            for(let i = 0; i < newEnemyCount; i++) {
+                let x, y;
+                do {
+                    x = Math.random() * (canvas.width - 60) + 30;
+                    y = Math.random() * (canvas.height - 60) + 30;
+                } while(Math.abs(x - player.x) < 150 || Math.abs(y - player.y) < 150);
+                enemies.push({
+                    x: x,
+                    y: y,
+                    size: 12 + Math.random() * 8,
+                    speed: 1.5 + Math.random() * 1.5 + level * 0.2,
+                    color: `hsl(${Math.random() * 360}, 70%, 60%)`,
+                    direction: Math.random() * Math.PI * 2,
+                    changeDirection: 0,
+                    health: 1
+                });
+            }
+        }
+        function gameOver() {
+            gameRunning = false;
+            if (backgroundMusic && audioContext) {
+                backgroundMusic.gainNode.gain.setValueAtTime(0, audioContext.currentTime);
+            }
+            const territoryPercent = Math.floor((claimedArea.size / (canvas.width * canvas.height / 4)) * 100);
+            document.getElementById('finalStats').innerHTML = `
+                Territory Claimed: ${territoryPercent}%<br>
+                Time Survived: ${gameTime}s<br>
+                Enemies Defeated: ${killCount}<br>
+                Level Reached: ${level}
+            `;
+            document.getElementById('gameOverMenu').classList.remove('hidden');
+        }
+        function restartGame() {
+            document.getElementById('gameOverMenu').classList.add('hidden');
+            gameRunning = true;
+            if (backgroundMusic && audioContext) {
+                backgroundMusic.gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
+            }
+            resetGame();
+            gameLoop();
+        }
+        function showStartMenu() {
+            document.getElementById('gameOverMenu').classList.add('hidden');
+            document.getElementById('startMenu').classList.remove('hidden');
+            if (backgroundMusic && audioContext) {
+                backgroundMusic.gainNode.gain.setValueAtTime(0, audioContext.currentTime);
+            }
+        }
+        function updatePlayer() {
+            // Movement
+            if (keys['arrowup'] || keys['w']) player.y -= player.speed;
+            if (keys['arrowdown'] || keys['s']) player.y += player.speed;
+            if (keys['arrowleft'] || keys['a']) player.x -= player.speed;
+            if (keys['arrowright'] || keys['d']) player.x += player.speed;
+            // Keep player in bounds
+            player.x = Math.max(player.size, Math.min(canvas.width - player.size, player.x));
+            player.y = Math.max(player.size, Math.min(canvas.height - player.size, player.y));
+            // Check if in territory
+            const gridX = Math.floor(player.x / 2) * 2;
+            const gridY = Math.floor(player.y / 2) * 2;
+            player.inTerritory = territory.has(`${gridX},${gridY}`);
+            // Handle trail
+            if (!player.inTerritory) {
+                player.trail.push({x: player.x, y: player.y});
+                if (player.trail.length > 100) {
+                    player.trail.shift();
+                }
+            } else if (player.trail.length > 0) {
+                // Claim new territory
+                claimTerritory();
+                player.trail = [];
+            }
+            // Auto-fire at enemies
+            autoFire();
+        }
+        function autoFire() {
+            const currentTime = Date.now();
+            if (currentTime - player.lastShot < player.fireRate) return;
+            // Find nearest enemy within range
+            let nearestEnemy = null;
+            let nearestDistance = player.range;
+            for(let enemy of enemies) {
+                const dx = enemy.x - player.x;
+                const dy = enemy.y - player.y;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                if (distance < nearestDistance) {
+                    nearestEnemy = enemy;
+                    nearestDistance = distance;
+                }
+            }
+            if (nearestEnemy) {
+                // Calculate direction to enemy
+                const dx = nearestEnemy.x - player.x;
+                const dy = nearestEnemy.y - player.y;
+                const angle = Math.atan2(dy, dx);
+                // Create bullet
+                bullets.push({
+                    x: player.x,
+                    y: player.y,
+                    dx: Math.cos(angle) * 8,
+                    dy: Math.sin(angle) * 8,
+                    size: 3,
+                    life: 60
+                });
+                player.lastShot = currentTime;
+            }
+        }
+        function updateBullets() {
+            for(let i = bullets.length - 1; i >= 0; i--) {
+                const bullet = bullets[i];
+                bullet.x += bullet.dx;
+                bullet.y += bullet.dy;
+                bullet.life--;
+                // Remove bullets that are out of bounds or expired
+                if (bullet.x < 0 || bullet.x > canvas.width ||
+                    bullet.y < 0 || bullet.y > canvas.height ||
+                    bullet.life <= 0) {
+                    bullets.splice(i, 1);
+                    continue;
+                }
+                // Check bullet collision with enemies
+                for(let j = enemies.length - 1; j >= 0; j--) {
+                    const enemy = enemies[j];
+                    const dx = bullet.x - enemy.x;
+                    const dy = bullet.y - enemy.y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    if (distance < bullet.size + enemy.size) {
+                        // Hit enemy
+                        enemy.health--;
+                        bullets.splice(i, 1);
+                        if (enemy.health <= 0) {
+                            // Enemy defeated - spawn double the enemies!
+                            killCount++;
+                            const defeatedEnemy = enemies.splice(j, 1)[0];
+                            // Spawn 2 new enemies to replace the defeated one
+                            for(let k = 0; k < 2; k++) {
+                                let x, y;
+                                do {
+                                    x = Math.random() * (canvas.width - 60) + 30;
+                                    y = Math.random() * (canvas.height - 60) + 30;
+                                } while(Math.abs(x - player.x) < 100);
+                                enemies.push({
+                                    x: x,
+                                    y: y,
+                                    size: 10 + Math.random() * 6,
+                                    speed: 1.2 + Math.random() * 1.8 + level * 0.15,
+                                    color: `hsl(${Math.random() * 360}, 70%, 60%)`,
+                                    direction: Math.random() * Math.PI * 2,
+                                    changeDirection: 0,
+                                    health: 1
+                                });
+                            }
+                        }
+                        break;
+                    }
+                }
+            }
+        }
+        function claimTerritory() {
+            // Simple flood fill from trail
+            const newClaimed = new Set();
+            // Add trail points to territory
+            for(let point of player.trail) {
+                const gridX = Math.floor(point.x / 2) * 2;
+                const gridY = Math.floor(point.y / 2) * 2;
+                territory.add(`${gridX},${gridY}`);
+                newClaimed.add(`${gridX},${gridY}`);
+            }
+            // Fill enclosed areas (simplified)
+            for(let point of player.trail) {
+                const startX = Math.floor(point.x / 2) * 2;
+                const startY = Math.floor(point.y / 2) * 2;
+                // Fill in a small area around the trail
+                for(let dx = -20; dx <= 20; dx += 2) {
+                    for(let dy = -20; dy <= 20; dy += 2) {
+                        const x = startX + dx;
+                        const y = startY + dy;
+                        if (x >= 0 && x < canvas.width && y >= 0 && y < canvas.height) {
+                            territory.add(`${x},${y}`);
+                            claimedArea.add(`${x},${y}`);
+                        }
+                    }
+                }
+            }
+        }
+        function updateEnemies() {
+            for(let enemy of enemies) {
+                // Simple AI movement
+                enemy.changeDirection--;
+                if (enemy.changeDirection <= 0) {
+                    enemy.direction = Math.random() * Math.PI * 2;
+                    enemy.changeDirection = 60 + Math.random() * 120;
+                }
+                enemy.x += Math.cos(enemy.direction) * enemy.speed;
+                enemy.y += Math.sin(enemy.direction) * enemy.speed;
+                // Bounce off walls
+                if (enemy.x <= 0 || enemy.x >= canvas.width) {
+                    enemy.direction = Math.PI - enemy.direction;
+                    enemy.x = Math.max(0, Math.min(canvas.width, enemy.x));
+                }
+                if (enemy.y <= 0 || enemy.y >= canvas.height) {
+                    enemy.direction = -enemy.direction;
+                    enemy.y = Math.max(0, Math.min(canvas.height, enemy.y));
+                }
+                // Check collision with player
+                const dx = enemy.x - player.x;
+                const dy = enemy.y - player.y;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                if (distance < enemy.size + player.size) {
+                    gameOver();
+                    return;
+                }
+                // Check collision with trail
+                for(let point of player.trail) {
+                    const trailDx = enemy.x - point.x;
+                    const trailDy = enemy.y - point.y;
+                    const trailDistance = Math.sqrt(trailDx * trailDx + trailDy * trailDy);
+                    if (trailDistance < enemy.size + 5) {
+                        gameOver();
+                        return;
+                    }
+                }
+            }
+        }
+        function render() {
+            // Clear canvas with ocean gradient
+            const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
+            gradient.addColorStop(0, '#001a33');
+            gradient.addColorStop(1, '#002d5a');
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            // Draw bubbles
+            for(let i = 0; i < 20; i++) {
+                const x = (Date.now() * 0.01 + i * 50) % canvas.width;
+                const y = (Date.now() * 0.02 + i * 30) % canvas.height;
+                ctx.fillStyle = 'rgba(100, 200, 255, 0.1)';
+                ctx.beginPath();
+                ctx.arc(x, y, 3 + Math.sin(Date.now() * 0.01 + i) * 2, 0, Math.PI * 2);
+                ctx.fill();
+            }
+            // Draw claimed territory
+            ctx.fillStyle = 'rgba(0, 204, 255, 0.3)';
+            for(let pos of claimedArea) {
+                const [x, y] = pos.split(',').map(Number);
+                ctx.fillRect(x, y, 2, 2);
+            }
+            // Draw trail
+            if (player.trail.length > 0) {
+                ctx.strokeStyle = '#ffff00';
+                ctx.lineWidth = 3;
+                ctx.beginPath();
+                ctx.moveTo(player.trail[0].x, player.trail[0].y);
+                for(let i = 1; i < player.trail.length; i++) {
+                    ctx.lineTo(player.trail[i].x, player.trail[i].y);
+                }
+                ctx.stroke();
+            }
+            // Draw bullets
+            ctx.fillStyle = '#ffff00';
+            for(let bullet of bullets) {
+                ctx.beginPath();
+                ctx.arc(bullet.x, bullet.y, bullet.size, 0, Math.PI * 2);
+                ctx.fill();
+                // Add glow effect
+                ctx.shadowColor = '#ffff00';
+                ctx.shadowBlur = 10;
+                ctx.beginPath();
+                ctx.arc(bullet.x, bullet.y, bullet.size, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.shadowBlur = 0;
+            }
+            for(let enemy of enemies) {
+                ctx.fillStyle = enemy.color;
+                ctx.beginPath();
+                ctx.arc(enemy.x, enemy.y, enemy.size, 0, Math.PI * 2);
+                ctx.fill();
+                // Fish details
+                ctx.fillStyle = 'white';
+                ctx.beginPath();
+                ctx.arc(enemy.x - enemy.size * 0.3, enemy.y - enemy.size * 0.3, enemy.size * 0.2, 0, Math.PI * 2);
+                ctx.fill();
+            }
+            // Draw player
+            ctx.fillStyle = player.inTerritory ? player.color : '#ffff00';
+            ctx.beginPath();
+            ctx.arc(player.x, player.y, player.size, 0, Math.PI * 2);
+            ctx.fill();
+            // Player fish details
+            ctx.fillStyle = 'white';
+            ctx.beginPath();
+            ctx.arc(player.x - player.size * 0.3, player.y - player.size * 0.3, player.size * 0.3, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.fillStyle = 'black';
+            ctx.beginPath();
+            ctx.arc(player.x - player.size * 0.3, player.y - player.size * 0.3, player.size * 0.15, 0, Math.PI * 2);
+            ctx.fill();
+            // Draw firing range indicator
+            ctx.strokeStyle = 'rgba(255, 255, 0, 0.2)';
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            ctx.arc(player.x, player.y, player.range, 0, Math.PI * 2);
+            ctx.stroke();
+        }
+        function updateUI() {
+            const territoryPercent = Math.floor((claimedArea.size / (canvas.width * canvas.height / 4)) * 100);
+            document.getElementById('territoryScore').textContent = territoryPercent;
+            document.getElementById('timeScore').textContent = Math.floor(gameTime);
+            document.getElementById('enemyCount').textContent = enemies.length;
+            document.getElementById('killCount').textContent = killCount;
+            // Level up
+            if (territoryPercent >= level * 15) {
+                level++;
+                spawnEnemies();
+            }
+        }
+        function gameLoop(currentTime) {
+            if (!gameRunning) return;
+            const deltaTime = currentTime - lastTime;
+            lastTime = currentTime;
+            gameTime += deltaTime / 1000;
+            updatePlayer();
+            updateBullets();
+            updateEnemies();
+            render();
+            updateUI();
+            requestAnimationFrame(gameLoop);
+        }
+    </script>
+</body>
+</html>