Spaces:
Running
Running
| <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> |