Spaces:

offerpk3
/

deepseaclicker

Running

File size: 27,509 Bytes

11d2a28

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Underwater Idle Clicker</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #001f3f 0%, #003d7a 50%, #0066cc 100%);
            min-height: 100vh;
            color: white;
            overflow-x: hidden;
        }
        
        .ocean-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 80%, rgba(0, 100, 200, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(0, 150, 255, 0.2) 0%, transparent 50%);
            z-index: -1;
        }
        
        .bubbles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }
        
        .bubble {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: float 6s infinite linear;
        }
        
        .background-fish {
            position: fixed;
            pointer-events: none;
            z-index: -1;
            font-size: 1.5rem;
            opacity: 0.6;
        }
        
        .swimming-fish {
            animation: swimAcross 8s linear infinite;
        }
        
        .caught-fish {
            animation: fishCaught 3s ease-in-out infinite;
        }
        
        .fisherman {
            position: fixed;
            pointer-events: none;
            z-index: -1;
            font-size: 2rem;
            opacity: 0.4;
        }
        
        .fishing-line {
            position: absolute;
            width: 2px;
            background: rgba(139, 69, 19, 0.6);
            transform-origin: top;
            animation: fishingMotion 4s ease-in-out infinite;
        }
        
        .robot-fisher {
            position: fixed;
            pointer-events: none;
            z-index: -1;
            font-size: 1.8rem;
            opacity: 0.5;
            animation: robotWork 3s ease-in-out infinite;
        }
        
        @keyframes swimAcross {
            0% {
                transform: translateX(-100px) scaleX(1);
            }
            50% {
                transform: translateX(50vw) scaleX(1);
            }
            100% {
                transform: translateX(calc(100vw + 100px)) scaleX(-1);
            }
        }
        
        @keyframes fishCaught {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            25% {
                transform: translateY(-20px) rotate(10deg);
            }
            75% {
                transform: translateY(-10px) rotate(-5deg);
            }
        }
        
        @keyframes fishingMotion {
            0%, 100% {
                transform: rotate(-10deg);
                height: 100px;
            }
            50% {
                transform: rotate(10deg);
                height: 120px;
            }
        }
        
        @keyframes robotWork {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            25% {
                transform: translateY(-5px) rotate(2deg);
            }
            75% {
                transform: translateY(-3px) rotate(-2deg);
            }
        }
        
        @keyframes float {
            0% {
                transform: translateY(100vh) scale(0);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-10vh) scale(1);
                opacity: 0;
            }
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 20px;
            min-height: 100vh;
        }
        
        .main-area {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 30px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 20px;
        }
        
        .title {
            font-size: 3rem;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            margin-bottom: 10px;
            background: linear-gradient(45deg, #00ffff, #0080ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .stats {
            display: flex;
            gap: 30px;
            font-size: 1.2rem;
            margin-bottom: 20px;
        }
        
        .stat {
            background: rgba(255, 255, 255, 0.1);
            padding: 10px 20px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .fish-area {
            position: relative;
        }
        
        .fish-button {
            width: 200px;
            height: 200px;
            border: none;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff6b35, #f7931e);
            cursor: pointer;
            transition: all 0.1s ease;
            font-size: 3rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
        }
        
        .fish-button:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
        }
        
        .fish-button:active {
            transform: scale(0.95);
        }
        
        .fish-button::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            animation: shine 2s infinite;
        }
        
        @keyframes shine {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .click-effect {
            position: absolute;
            color: #00ffff;
            font-weight: bold;
            font-size: 1.5rem;
            pointer-events: none;
            animation: float-up 1s ease-out forwards;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        }
        
        @keyframes float-up {
            0% {
                opacity: 1;
                transform: translateY(0);
            }
            100% {
                opacity: 0;
                transform: translateY(-60px);
            }
        }
        
        .upgrades {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            height: fit-content;
        }
        
        .upgrades h2 {
            margin-bottom: 20px;
            text-align: center;
            color: #00ffff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        
        .upgrade {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .upgrade:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateX(5px);
        }
        
        .upgrade.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .upgrade.disabled:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: none;
        }
        
        .upgrade-name {
            font-weight: bold;
            color: #00ffff;
            margin-bottom: 5px;
        }
        
        .upgrade-description {
            font-size: 0.9rem;
            opacity: 0.8;
            margin-bottom: 5px;
        }
        
        .upgrade-cost {
            font-weight: bold;
            color: #ffd700;
        }
        
        .upgrade-owned {
            color: #90EE90;
            font-size: 0.9rem;
            margin-top: 5px;
        }
        
        .popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(135deg, rgba(0, 255, 255, 0.9), rgba(0, 150, 255, 0.9));
            color: white;
            padding: 20px 30px;
            border-radius: 15px;
            box-shadow: 0 20px 60px rgba(0, 255, 255, 0.3);
            border: 2px solid rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(10px);
            z-index: 1000;
            text-align: center;
            animation: popupAppear 0.5s ease-out;
            max-width: 400px;
        }
        
        @keyframes popupAppear {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.5);
            }
            100% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
        }
        
        .popup h3 {
            margin-bottom: 10px;
            font-size: 1.5rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        
        .popup p {
            margin-bottom: 15px;
            opacity: 0.9;
        }
        
        .popup button {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        
        .popup button:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.05);
        }
        
        .upgrade.locked {
            opacity: 0.3;
            cursor: not-allowed;
            filter: grayscale(100%);
        }
        
        .upgrade.locked:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: none;
        }
        
        .upgrade.new-unlock {
            animation: unlockGlow 2s ease-in-out;
        }
        
        @keyframes unlockGlow {
            0%, 100% { box-shadow: 0 0 5px rgba(0, 255, 255, 0.5); }
            50% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.8); }
        }
        
        @media (max-width: 768px) {
            .container {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .stats {
                flex-direction: column;
                gap: 10px;
                align-items: center;
            }
            
            .title {
                font-size: 2rem;
            }
            
            .fish-button {
                width: 150px;
                height: 150px;
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="ocean-bg"></div>
    <div class="bubbles" id="bubbles"></div>
    <div id="backgroundAnimations"></div>
    
    <div class="container">
        <div class="main-area">
            <div class="header">
                <h1 class="title">🌊 Deep Sea Clicker 🌊</h1>
                <div class="stats">
                    <div class="stat">
                        🐟 Fish: <span id="fishCount">0</span>
                    </div>
                    <div class="stat">
                        💰 Coins: <span id="coinCount">0</span>
                    </div>
                    <div class="stat">
                        ⚡ Per Click: <span id="clickPower">1</span>
                    </div>
                    <div class="stat">
                        🔄 Per Second: <span id="autoFish">0</span>
                    </div>
                </div>
            </div>
            
            <div class="fish-area">
                <button class="fish-button" id="fishButton">🐟</button>
            </div>
        </div>
        
        <div class="upgrades">
            <h2>🛒 Upgrades</h2>
            <div id="upgradeList"></div>
        </div>
    </div>

    <script>
        // Game state
        let gameState = {
            fish: 0,
            coins: 0,
            clickPower: 1,
            autoFishRate: 0,
            upgrades: {
                betterNet: { owned: 0, baseCost: 10, unlocked: false },
                fishingRod: { owned: 0, baseCost: 50, unlocked: false },
                fishingBoat: { owned: 0, baseCost: 200, unlocked: false },
                sonarSystem: { owned: 0, baseCost: 500, unlocked: false },
                deepSeaDrill: { owned: 0, baseCost: 1000, unlocked: false },
                underwaterBase: { owned: 0, baseCost: 2500, unlocked: false },
                fishFarm: { owned: 0, baseCost: 5000, unlocked: false },
                megaTrawler: { owned: 0, baseCost: 10000, unlocked: false }
            }
        };

        // Upgrade definitions
        const upgradeData = {
            betterNet: {
                name: "🥅 Better Net",
                description: "Catch more fish per click (+1)",
                type: "click",
                power: 1
            },
            fishingRod: {
                name: "🎣 Fishing Rod",
                description: "Automated fishing (+1/sec)",
                type: "auto",
                power: 1
            },
            fishingBoat: {
                name: "⛵ Fishing Boat",
                description: "Bigger catches (+3 per click)",
                type: "click",
                power: 3
            },
            sonarSystem: {
                name: "📡 Sonar System",
                description: "Find fish automatically (+5/sec)",
                type: "auto",
                power: 5
            },
            deepSeaDrill: {
                name: "🔧 Deep Sea Drill",
                description: "Massive click power (+10 per click)",
                type: "click",
                power: 10
            },
            underwaterBase: {
                name: "🏗️ Underwater Base",
                description: "Industrial fishing (+15/sec)",
                type: "auto",
                power: 15
            },
            fishFarm: {
                name: "🏭 Fish Farm",
                description: "Fish breeding facility (+50/sec)",
                type: "auto",
                power: 50
            },
            megaTrawler: {
                name: "🚢 Mega Trawler",
                description: "Ultimate fishing vessel (+100/sec)",
                type: "auto",
                power: 100
            }
        };

        // DOM elements
        const fishButton = document.getElementById('fishButton');
        const fishCountEl = document.getElementById('fishCount');
        const coinCountEl = document.getElementById('coinCount');
        const clickPowerEl = document.getElementById('clickPower');
        const autoFishEl = document.getElementById('autoFish');
        const upgradeListEl = document.getElementById('upgradeList');
        const bubblesEl = document.getElementById('bubbles');
        const backgroundAnimationsEl = document.getElementById('backgroundAnimations');

        // Initialize game
        function init() {
            updateDisplay();
            renderUpgrades();
            startAutoFishing();
            createBubbles();
            createBackgroundAnimations();
        }

        // Fish clicking
        fishButton.addEventListener('click', (e) => {
            const fishGained = gameState.clickPower;
            gameState.fish += fishGained;
            gameState.coins += fishGained;
            
            // Create click effect
            createClickEffect(e.clientX, e.clientY, `+${fishGained} 🐟`);
            
            // Check for new unlocks
            checkUnlocks();
            
            updateDisplay();
        });

        // Create click effect animation
        function createClickEffect(x, y, text) {
            const effect = document.createElement('div');
            effect.className = 'click-effect';
            effect.textContent = text;
            effect.style.left = x + 'px';
            effect.style.top = y + 'px';
            effect.style.position = 'fixed';
            document.body.appendChild(effect);
            
            setTimeout(() => {
                effect.remove();
            }, 1000);
        }

        // Update display
        function updateDisplay() {
            fishCountEl.textContent = formatNumber(gameState.fish);
            coinCountEl.textContent = formatNumber(gameState.coins);
            clickPowerEl.textContent = formatNumber(gameState.clickPower);
            autoFishEl.textContent = formatNumber(gameState.autoFishRate);
        }

        // Format large numbers
        function formatNumber(num) {
            if (num >= 1e9) return (num / 1e9).toFixed(1) + 'B';
            if (num >= 1e6) return (num / 1e6).toFixed(1) + 'M';
            if (num >= 1e3) return (num / 1e3).toFixed(1) + 'K';
            return Math.floor(num).toString();
        }

        // Calculate upgrade cost
        function getUpgradeCost(upgradeKey) {
            const upgrade = gameState.upgrades[upgradeKey];
            return Math.floor(upgrade.baseCost * Math.pow(1.15, upgrade.owned));
        }

        // Render upgrades
        function renderUpgrades() {
            upgradeListEl.innerHTML = '';
            
            Object.keys(upgradeData).forEach(key => {
                const upgrade = upgradeData[key];
                const state = gameState.upgrades[key];
                const cost = getUpgradeCost(key);
                const canAfford = gameState.coins >= cost && state.unlocked;
                const isLocked = !state.unlocked;
                
                const upgradeEl = document.createElement('div');
                let className = 'upgrade';
                if (isLocked) className += ' locked';
                else if (!canAfford) className += ' disabled';
                
                upgradeEl.className = className;
                
                if (isLocked) {
                    upgradeEl.innerHTML = `
                        <div class="upgrade-name">🔒 ${upgrade.name}</div>
                        <div class="upgrade-description">Unlock with ${formatNumber(state.baseCost)} coins</div>
                        <div class="upgrade-cost">Locked</div>
                    `;
                } else {
                    upgradeEl.innerHTML = `
                        <div class="upgrade-name">${upgrade.name}</div>
                        <div class="upgrade-description">${upgrade.description}</div>
                        <div class="upgrade-cost">Cost: ${formatNumber(cost)} coins</div>
                        ${state.owned > 0 ? `<div class="upgrade-owned">Owned: ${state.owned}</div>` : ''}
                    `;
                    
                    if (canAfford) {
                        upgradeEl.addEventListener('click', () => buyUpgrade(key));
                    }
                }
                
                upgradeListEl.appendChild(upgradeEl);
            });
        }

        // Buy upgrade
        function buyUpgrade(upgradeKey) {
            const cost = getUpgradeCost(upgradeKey);
            if (gameState.coins >= cost) {
                gameState.coins -= cost;
                gameState.upgrades[upgradeKey].owned++;
                
                const upgrade = upgradeData[upgradeKey];
                if (upgrade.type === 'click') {
                    gameState.clickPower += upgrade.power;
                } else if (upgrade.type === 'auto') {
                    gameState.autoFishRate += upgrade.power;
                }
                
                updateDisplay();
                renderUpgrades();
            }
        }

        // Auto fishing
        function startAutoFishing() {
            setInterval(() => {
                if (gameState.autoFishRate > 0) {
                    const fishGained = gameState.autoFishRate / 10; // per 100ms
                    gameState.fish += fishGained;
                    gameState.coins += fishGained;
                    
                    // Check for new unlocks during auto fishing too
                    checkUnlocks();
                    
                    updateDisplay();
                }
            }, 100);
        }
        
        // Check for upgrade unlocks
        function checkUnlocks() {
            Object.keys(gameState.upgrades).forEach(key => {
                const upgrade = gameState.upgrades[key];
                if (!upgrade.unlocked && gameState.coins >= upgrade.baseCost) {
                    upgrade.unlocked = true;
                    showUnlockPopup(key);
                    renderUpgrades();
                }
            });
        }
        
        // Show unlock popup
        function showUnlockPopup(upgradeKey) {
            const upgrade = upgradeData[upgradeKey];
            
            const popup = document.createElement('div');
            popup.className = 'popup';
            popup.innerHTML = `
                <h3>🎉 New Upgrade Unlocked!</h3>
                <p><strong>${upgrade.name}</strong></p>
                <p>${upgrade.description}</p>
                <button onclick="this.parentElement.remove()">Awesome!</button>
            `;
            
            document.body.appendChild(popup);
            
            // Auto remove after 5 seconds
            setTimeout(() => {
                if (popup.parentElement) {
                    popup.remove();
                }
            }, 5000);
            
            // Add glow effect to the newly unlocked upgrade
            setTimeout(() => {
                const upgradeElements = document.querySelectorAll('.upgrade');
                upgradeElements.forEach(el => {
                    if (el.innerHTML.includes(upgrade.name) && !el.classList.contains('locked')) {
                        el.classList.add('new-unlock');
                        setTimeout(() => el.classList.remove('new-unlock'), 2000);
                    }
                });
            }, 100);
        }

        // Create floating bubbles
        function createBubbles() {
            setInterval(() => {
                const bubble = document.createElement('div');
                bubble.className = 'bubble';
                
                const size = Math.random() * 20 + 10;
                bubble.style.width = size + 'px';
                bubble.style.height = size + 'px';
                bubble.style.left = Math.random() * 100 + '%';
                bubble.style.animationDuration = (Math.random() * 4 + 4) + 's';
                bubble.style.animationDelay = Math.random() * 2 + 's';
                
                bubblesEl.appendChild(bubble);
                
                setTimeout(() => {
                    bubble.remove();
                }, 8000);
            }, 300);
        }
        
        // Create background fishing animations
        function createBackgroundAnimations() {
            // Create swimming fish
            setInterval(() => {
                createSwimmingFish();
            }, 3000);
            
            // Create fishermen when fishing rod is unlocked
            setInterval(() => {
                if (gameState.upgrades.fishingRod.owned > 0) {
                    createFisherman();
                }
            }, 8000);
            
            // Create robot fishers when advanced upgrades are unlocked
            setInterval(() => {
                if (gameState.upgrades.sonarSystem.owned > 0) {
                    createRobotFisher();
                }
            }, 6000);
            
            // Create fish catching animations
            setInterval(() => {
                if (gameState.autoFishRate > 0) {
                    createCaughtFish();
                }
            }, 2000);
        }
        
        // Create swimming fish
        function createSwimmingFish() {
            const fish = document.createElement('div');
            fish.className = 'background-fish swimming-fish';
            
            const fishTypes = ['🐟', '🐠', '🐡', '🦈', '🐙', '🦑', '🐬'];
            fish.textContent = fishTypes[Math.floor(Math.random() * fishTypes.length)];
            
            fish.style.top = Math.random() * 70 + 10 + '%';
            fish.style.left = '-100px';
            
            backgroundAnimationsEl.appendChild(fish);
            
            setTimeout(() => {
                fish.remove();
            }, 8000);
        }
        
        // Create fisherman
        function createFisherman() {
            const fisherman = document.createElement('div');
            fisherman.className = 'fisherman';
            fisherman.textContent = '🎣';
            
            fisherman.style.top = Math.random() * 30 + 10 + '%';
            fisherman.style.left = Math.random() * 80 + 10 + '%';
            
            // Create fishing line
            const line = document.createElement('div');
            line.className = 'fishing-line';
            line.style.left = '50%';
            line.style.top = '100%';
            fisherman.appendChild(line);
            
            backgroundAnimationsEl.appendChild(fisherman);
            
            setTimeout(() => {
                fisherman.remove();
            }, 12000);
        }
        
        // Create robot fisher
        function createRobotFisher() {
            const robot = document.createElement('div');
            robot.className = 'robot-fisher';
            robot.textContent = '🤖';
            
            robot.style.top = Math.random() * 40 + 40 + '%';
            robot.style.left = Math.random() * 70 + 15 + '%';
            
            backgroundAnimationsEl.appendChild(robot);
            
            setTimeout(() => {
                robot.remove();
            }, 9000);
        }
        
        // Create caught fish animation
        function createCaughtFish() {
            const fish = document.createElement('div');
            fish.className = 'background-fish caught-fish';
            
            const caughtFishTypes = ['🐟', '🐠', '🐡'];
            fish.textContent = caughtFishTypes[Math.floor(Math.random() * caughtFishTypes.length)];
            
            fish.style.top = Math.random() * 60 + 20 + '%';
            fish.style.left = Math.random() * 80 + 10 + '%';
            
            backgroundAnimationsEl.appendChild(fish);
            
            setTimeout(() => {
                fish.remove();
            }, 3000);
        }

        // Initialize game
        init();
    </script>
</body>
</html>