Fish Clicker

Here's a comprehensive fish clicker game with all the requested features: Fish Clicker

Current Location: Pond

Fishing Rods

Basic Rod (Owned)

Catch: 1 fish per click

Fiberglass Rod

Catch: 2 fish per click

Carbon Fiber Rod

Catch: 5 fish per click

Workers

Apprentice Fisher

Catches 1 fish every 5 seconds

Owned: 0

Professional Fisher

Catches 5 fish every 5 seconds

Owned: 0

Baits

Worms

+10% catch rate

Artificial Lures

+25% catch rate

Locations

Lake

Better fish variety

River

Higher catch rate

Ocean

Rare fish available

Fish Auction

Current bid: $0

Time left: 30s

body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f8ff; } .game-container { max-width: 1000px; margin: 0 auto; padding: 20px; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #4682b4; } .stats { display: flex; gap: 20px; } .main-area { display: flex; gap: 20px; } .fishing-area { flex: 1; background-color: #e6f2ff; padding: 20px; border-radius: 10px; text-align: center; } .water { height: 200px; background-color: #4682b4; margin: 20px 0; border-radius: 10px; position: relative; overflow: hidden; } #fish-button { padding: 10px 20px; font-size: 18px; background-color: #4682b4; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } #fish-button:hover { background-color: #36648b; } .upgrades { flex: 1; background-color: #e6f2ff; padding: 20px; border-radius: 10px; } .tab-container { display: flex; margin-bottom: 20px; } .tab-button { flex: 1; padding: 10px; background-color: #4682b4; color: white; border: none; cursor: pointer; } .tab-button.active { background-color: #36648b; } .tab-content { display: none; } .tab-content.active { display: block; } .upgrade-item { background-color: white; padding: 15px; margin-bottom: 10px; border-radius: 5px; } .buy-button { padding: 5px 10px; background-color: #4caf50; color: white; border: none; border-radius: 3px; cursor: pointer; } .buy-button:disabled { background-color: #cccccc; cursor: not-allowed; } #auction-container { text-align: center; } #bid-button, #sell-fish { padding: 10px 20px; margin: 10px 5px; font-size: 16px; background-color: #ff9800; color: white; border: none; border-radius: 5px; cursor: pointer; } // Game state const game = { money: 0, fish: 0, currentRod: 'basic', rods: { basic: { multiplier: 1, owned: true }, rod1: { multiplier: 2, owned: false }, rod2: { multiplier: 5, owned: false } }, workers: { worker1: { count: 0, rate: 1, interval: 5 }, worker2: { count: 0, rate: 5, interval: 5 } }, baits: { bait1: { owned: false, multiplier: 1.1 }, bait2: { owned: false, multiplier: 1.25 } }, locations: { pond: { unlocked: true, name: 'Pond' }, lake: { unlocked: false, name: 'Lake' }, river: { unlocked: false, name: 'River' }, ocean: { unlocked: false, name: 'Ocean' } }, currentLocation: 'pond', auction: { currentBid: 0, timer: 30, interval: null }, catchRate: 1 }; // DOM elements const moneyDisplay = document.getElementById('money'); const fishDisplay = document.getElementById('fish'); const fishButton = document.getElementById('fish-button'); const locationDisplay = document.getElementById('location'); const water = document.getElementById('water'); // Tab system const tabButtons = document.querySelectorAll('.tab-button'); tabButtons.forEach(button => { button.addEventListener('click', () => { const tabId = button.getAttribute('data-tab'); document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active')); document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); button.classList.add('active'); document.getElementById(tabId).classList.add('active'); }); }); // Fishing button fishButton.addEventListener('click', () => { const rodMultiplier = game.rods[game.currentRod]?.multiplier || 1; let fishCaught = rodMultiplier; // Apply bait multipliers if (game.baits.bait1.owned) fishCaught *= game.baits.bait1.multiplier; if (game.baits.bait2.owned) fishCaught *= game.baits.bait2.multiplier; game.fish += Math.floor(fishCaught); updateDisplay(); createFishSplash(); }); // Buy buttons document.querySelectorAll('.buy-button').forEach(button => { button.addEventListener('click', function() { const cost = parseInt(this.getAttribute('data-cost')); const upgrade = this.getAttribute('data-upgrade'); if (game.money >= cost) { game.money -= cost; if (upgrade.startsWith('rod')) { game.rods[upgrade].owned = true; game.currentRod = upgrade; this.textContent = 'Owned'; this.disabled = true; } else if (upgrade.startsWith('worker')) { game.workers[upgrade].count++; document.getElementById(`${upgrade}-count`).textContent = game.workers[upgrade].count; startWorker(upgrade); } else if (upgrade.startsWith('bait')) { game.baits[upgrade].owned = true; this.textContent = 'Owned'; this.disabled = true; } else if (upgrade.startsWith('location')) { const locationKey = upgrade.replace('location', '').toLowerCase(); game.locations[locationKey].unlocked = true; this.textContent = 'Unlocked'; this.disabled = true; } updateDisplay(); } }); }); // Worker system function startWorker(workerId) { const worker = game.workers[workerId]; if (worker.intervalId) return; worker.intervalId = setInterval(() => { game.fish += worker.rate; updateDisplay(); }, worker.interval * 1000); } // Location system function changeLocation(locationKey) { if (game.locations[locationKey].unlocked) { game.currentLocation = locationKey; locationDisplay.textContent = game.locations[locationKey].name; } } // Auction system document.getElementById('bid-button').addEventListener('click', () => { const bidAmount = Math.floor(game.auction.currentBid * 1.1) || 10; if (game.money >= bidAmount) { game.money -= bidAmount; game.auction.currentBid = bidAmount; document.getElementById('current-bid').textContent = bidAmount; updateDisplay(); // Reset timer when someone bids game.auction.timer = 30; } }); document.getElementById('sell-fish').addEventListener('click', () => { if (game.fish > 0) { const sellPrice = Math.floor(game.fish * (0.5 + Math.random() * 0.5)); game.money += sellPrice; game.fish = 0; updateDisplay(); } }); function startAuction() { if (game.auction.interval) return; game.auction.interval = setInterval(() => { game.auction.timer--; document.getElementById('auction-timer').textContent = game.auction.timer; if (game.auction.timer <= 0) { // Auction ends clearInterval(game.auction.interval); game.auction.interval = null; game.money += game.auction.currentBid; game.auction.currentBid = 0; game.auction.timer = 30; document.getElementById('current-bid').textContent = '0'; document.getElementById('auction-timer').textContent = '30'; updateDisplay(); // Start new auction after delay setTimeout(startAuction, 5000); } }, 1000); } // Visual effects function createFishSplash() { const splash = document.createElement('div'); splash.style.position = 'absolute'; splash.style.width = '50px'; splash.style.height = '50px'; splash.style.backgroundImage = 'radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%)'; splash.style.borderRadius = '50%'; splash.style.left = `${Math.random() * 80 + 10}%`; splash.style.top = `${Math.random() * 80 + 10}%`; splash.style.animation = 'splash 0.5s forwards'; water.appendChild(splash); setTimeout(() => splash.remove(), 500); } // Update display function updateDisplay() { moneyDisplay.textContent = game.money; fishDisplay.textContent = game.fish; // Update button states document.querySelectorAll('.buy-button').forEach(button => { const cost = parseInt(button.getAttribute('data-cost')); button.disabled = game.money < cost || button.textContent.includes('Owned') || button.textContent.includes('Unlocked'); }); } // Initialize game function init() { updateDisplay(); startAuction(); // Start any existing workers Object.keys(game.workers).forEach(workerId => { if (game.workers[workerId].count > 0) { startWorker(workerId); } }); } init();