Fish Clicker

Fish Clicker

Fish Count: 0

Pond: Pond

Time: 0s

body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); text-align: center; } /* Tabs Styles */ .tabs { display: flex; justify-content: center; margin-bottom: 20px; border-bottom: 1px solid #ddd; } .tab { padding: 10px 15px; border: none; background-color: #f0f0f0; cursor: pointer; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom: 1px solid #ddd; margin-bottom: -1px; /* Overlap border */ } .tab.active { background-color: #fff; border-bottom: none; /* Remove bottom border for active tab */ } .tab:hover { background-color: #e0e0e0; } .tab-content { padding: 20px; } .game-area { display: flex; justify-content: space-around; align-items: center; margin-bottom: 20px; } .fish-area { cursor: pointer; } #fishImage { width: 100px; } .stats { text-align: left; } .upgrades-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .upgrades-grid > div { padding: 15px; border: 1px solid #ddd; border-radius: 5px; } button { padding: 8px 12px; cursor: pointer; background-color: #4CAF50; color: white; border: none; border-radius: 4px; } button:hover { background-color: #45a049; } button:disabled { background-color: #cccccc; color: #666666; cursor: not-allowed; } document.addEventListener('DOMContentLoaded', () => { const fishArea = document.getElementById('fishArea'); const fishCountDisplay = document.getElementById('fishCount'); const workerCountDisplay = document.getElementById('workerCount'); const rodLevelDisplay = document.getElementById('rodLevel'); const pondLevelDisplay = document.getElementById('pondLevel'); const baitTypeDisplay = document.getElementById('baitType'); const auctionFishDisplay = document.getElementById('auctionFish'); const auctionTimerDisplay = document.getElementById('auctionTimer'); const timeElapsedDisplay = document.getElementById('timeElapsed'); const buyWorkerButton = document.getElementById('buyWorker'); const upgradeRodButton = document.getElementById('upgradeRod'); const buyBaitButton = document.getElementById('buyBait'); const nextPondButton = document.getElementById('nextPond'); const bidAuctionButton = document.getElementById('bidAuction'); let fishCount = 0; let workers = 0; let rodLevel = 1; let pondLevel = 'Pond'; let baitType = 'None'; let time = 0; let workerCost = 10; let rodCost = 50; let baitCost = 20; let pondCost = 100; fishArea.addEventListener('click', () => { fishCount++; updateFishCount(); }); buyWorkerButton.addEventListener('click', () => { if (fishCount >= workerCost) { fishCount -= workerCost; workers++; workerCost = Math.ceil(workerCost * 1.5); // Increase worker cost updateFishCount(); updateWorkerCount(); buyWorkerButton.textContent = `Buy Worker (${workerCost} Fish)`; } else { alert('Not enough fish!'); } }); upgradeRodButton.addEventListener('click', () => { if (fishCount >= rodCost) { fishCount -= rodCost; rodLevel++; rodCost = Math.ceil(rodCost * 2); // Increase rod cost updateFishCount(); updateRodLevel(); upgradeRodButton.textContent = `Upgrade Rod (${rodCost} Fish)`; } else { alert('Not enough fish!'); } }); buyBaitButton.addEventListener('click', () => { if (fishCount >= baitCost) { fishCount -= baitCost; baitType = 'Basic Bait'; // Simple bait for now baitCost = Math.ceil(baitCost * 1.8); // Increase bait cost updateFishCount(); updateBaitType(); buyBaitButton.textContent = `Buy Bait (${baitCost} Fish)`; } else { alert('Not enough fish!'); } }); nextPondButton.addEventListener('click', () => { if (fishCount >= pondCost) { fishCount -= pondCost; if (pondLevel === 'Pond') { pondLevel = 'Lake'; nextPondButton.textContent = 'Go to River (200 Fish)'; pondCost = 200; } else if (pondLevel === 'Lake') { pondLevel = 'River'; nextPondButton.textContent = 'Go to Ocean (400 Fish)'; pondCost = 400; } else if (pondLevel === 'River') { pondLevel = 'Ocean'; nextPondButton.style.display = 'none'; // No more ponds for now } updatePondLevel(); updateFishCount(); } else { alert('Not enough fish to go to the next pond!'); } }); function updateFishCount() { fishCountDisplay.textContent = fishCount; } function updateWorkerCount() { workerCountDisplay.textContent = workers; } function updateRodLevel() { rodLevelDisplay.textContent = rodLevel; } function updatePondLevel() { pondLevelDisplay.textContent = pondLevel; } function updateBaitType() { baitTypeDisplay.textContent = baitType; } function updateTimeElapsed() { timeElapsedDisplay.textContent = `${time}s`; } setInterval(() => { fishCount += workers; updateFishCount(); time++; updateTimeElapsed(); }, 1000); // Workers add fish every second // Auction logic (not fully implemented) // setInterval(() => { // // Implement auction fish generation and timer here // }, 30000); // Example: New auction every 30 seconds }); function openTab(tabName) { const tabContents = document.getElementsByClassName("tab-content"); for (let i = 0; i < tabContents.length; i++) { tabContents[i].style.display = "none"; } const tabs = document.getElementsByClassName("tab"); for (let i = 0; i < tabs.length; i++) { tabs[i].classList.remove("active"); } document.getElementById(tabName).style.display = "block"; event.currentTarget.classList.add("active"); }