Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Craig Clicker 1.0</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap" rel="stylesheet" /> | |
| <style> | |
| .frog-click { | |
| transition: transform 0.1s; | |
| } | |
| .frog-click:active { | |
| transform: scale(0.95); | |
| } | |
| .bounce { | |
| animation: bounce 0.5s infinite alternate; | |
| } | |
| @keyframes bounce { | |
| from { | |
| transform: translateY(0); | |
| } | |
| to { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| .ripple { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .ripple:after { | |
| content: ''; | |
| display: block; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| pointer-events: none; | |
| background-image: radial-gradient(circle, #fff 10%, transparent 10%); | |
| background-repeat: no-repeat; | |
| background-position: 50%; | |
| transform: scale(10, 10); | |
| opacity: 0; | |
| transition: transform 0.5s, opacity 1s; | |
| } | |
| .ripple:active:after { | |
| transform: scale(0, 0); | |
| opacity: 0.3; | |
| transition: 0s; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-green-50 font-['Comic_Neue'] min-h-screen"> | |
| <div class="container mx-auto px-4 py-8 text-center relative"> | |
| <div | |
| class="absolute top-0 right-0 bg-yellow-400 text-green-800 font-bold px-4 py-2 rounded-lg shadow-md animate-pulse" | |
| > | |
| NEW UPDATE NOW! | |
| </div> | |
| <h1 class="text-5xl font-bold text-green-700 mb-2">Craig Clicker 1.0</h1> | |
| <p class="text-xl text-green-600 mb-4">Click Craig to collect flies!</p> | |
| <div class="mb-4"> | |
| <input | |
| type="text" | |
| id="player-name" | |
| placeholder="Name" | |
| class="text-center text-xl px-4 py-2 rounded-lg border border-green-300 focus:outline-none focus:ring-2 focus:ring-green-400" | |
| /> | |
| </div> | |
| <div class="flex flex-col items-center"> | |
| <div id="score-display" class="text-3xl font-bold text-green-800 mb-6"> | |
| Flies: <span id="score">0</span> | |
| </div> | |
| <div id="frog-container" class="relative mb-8"> | |
| <button id="frog" class="frog-click ripple bg-transparent border-none cursor-pointer"> | |
| <img | |
| src="https://core-docs.s3.amazonaws.com/limestone_county_schools_ar/directory/1893430/small_5c471c54-cec5-4d2a-95cc-e862369c472f.png" | |
| alt="Craig" | |
| class="w-48 h-48 md:w-64 md:h-64 rounded-full object-cover shadow-lg bounce" | |
| /> | |
| </button> | |
| <div id="click-effect" class="absolute opacity-0 text-2xl font-bold text-green-600">+1</div> | |
| </div> | |
| <div | |
| class="grid grid-cols-1 md:grid-cols-3 gap-4 w-full max-w-4xl mb-8" | |
| > | |
| <!-- Upgrade Cards --> | |
| <div class="upgrade-card bg-white p-4 rounded-lg shadow-md border border-green-200"> | |
| <h3 class="text-xl font-bold text-green-700 mb-2">Auto-Tongue</h3> | |
| <p class="text-green-600 mb-3">Earns 1 fly every 5 seconds</p> | |
| <p class="text-sm text-green-500 mb-3"> | |
| Cost: <span id="auto-tongue-cost">20</span> flies | |
| </p> | |
| <button | |
| id="buy-auto-tongue" | |
| class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-full transition" | |
| > | |
| Buy (<span id="auto-tongue-owned">0</span>) | |
| </button> | |
| </div> | |
| <div class="upgrade-card bg-white p-4 rounded-lg shadow-md border border-green-200"> | |
| <h3 class="text-xl font-bold text-green-700 mb-2">Frog Army</h3> | |
| <p class="text-green-600 mb-3">Earns 5 flies every 10 seconds</p> | |
| <p class="text-sm text-green-500 mb-3"> | |
| Cost: <span id="frog-army-cost">100</span> flies | |
| </p> | |
| <button | |
| id="buy-frog-army" | |
| class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-full transition" | |
| > | |
| Buy (<span id="frog-army-owned">0</span>) | |
| </button> | |
| </div> | |
| <div class="upgrade-card bg-white p-4 rounded-lg shadow-md border border-green-200"> | |
| <h3 class="text-xl font-bold text-green-700 mb-2">Pond Paradise</h3> | |
| <p class="text-green-600 mb-3">Earns 20 flies every 15 seconds</p> | |
| <p class="text-sm text-green-500 mb-3"> | |
| Cost: <span id="pond-paradise-cost">500</span> flies | |
| </p> | |
| <button | |
| id="buy-pond-paradise" | |
| class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-full transition" | |
| > | |
| Buy (<span id="pond-paradise-owned">0</span>) | |
| </button> | |
| </div> | |
| <div class="upgrade-card bg-white p-4 rounded-lg shadow-md border border-green-200"> | |
| <h3 class="text-xl font-bold text-green-700 mb-2">Fly Farm</h3> | |
| <p class="text-green-600 mb-3">Earns 50 flies every 20 seconds</p> | |
| <p class="text-sm text-green-500 mb-3"> | |
| Cost: <span id="fly-farm-cost">1500</span> flies | |
| </p> | |
| <button | |
| id="buy-fly-farm" | |
| class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-full transition" | |
| > | |
| Buy (<span id="fly-farm-owned">0</span>) | |
| </button> | |
| </div> | |
| <div class="upgrade-card bg-white p-4 rounded-lg shadow-md border border-green-200"> | |
| <h3 class="text-xl font-bold text-green-700 mb-2">Frog Kingdom</h3> | |
| <p class="text-green-600 mb-3">Earns 100 flies every 30 seconds</p> | |
| <p class="text-sm text-green-500 mb-3"> | |
| Cost: <span id="frog-kingdom-cost">5000</span> flies | |
| </p> | |
| <button | |
| id="buy-frog-kingdom" | |
| class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-full transition" | |
| > | |
| Buy (<span id="frog-kingdom-owned">0</span>) | |
| </button> | |
| </div> | |
| <div class="upgrade-card bg-white p-4 rounded-lg shadow-md border border-green-200"> | |
| <h3 class="text-xl font-bold text-green-700 mb-2">Golden Craig</h3> | |
| <p class="text-green-600 mb-3">Earns 200 flies every minute</p> | |
| <p class="text-sm text-green-500 mb-3"> | |
| Cost: <span id="golden-Craig-cost">20000</span> flies | |
| </p> | |
| <button | |
| id="buy-golden-craig" | |
| class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-full transition" | |
| > | |
| Buy (<span id="golden-craig-owned">0</span>) | |
| </button> | |
| </div> | |
| <div class="upgrade-card bg-white p-4 rounded-lg shadow-md border border-green-200"> | |
| <h3 class="text-xl font-bold text-green-700 mb-2">Fly Factory</h3> | |
| <p class="text-green-600 mb-3">Earns 500 flies every minute</p> | |
| <p class="text-sm text-green-500 mb-3"> | |
| Cost: <span id="fly-factory-cost">50000</span> flies | |
| </p> | |
| <button | |
| id="buy-fly-factory" | |
| class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-full transition" | |
| > | |
| Buy (<span id="fly-factory-owned">0</span>) | |
| </button> | |
| </div> | |
| <div class="upgrade-card bg-white p-4 rounded-lg shadow-md border border-green-200"> | |
| <h3 class="text-xl font-bold text-green-700 mb-2">Craig Empire</h3> | |
| <p class="text-green-600 mb-3">Earns 1000 flies every 2 minutes</p> | |
| <p class="text-sm text-green-500 mb-3"> | |
| Cost: <span id="craig-empire-cost">100000</span> flies | |
| </p> | |
| <button | |
| id="buy-craig-empire" | |
| class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-full transition" | |
| > | |
| Buy (<span id="craig-empire-owned">0</span>) | |
| </button> | |
| </div> | |
| </div> | |
| <div | |
| class="achievements bg-white p-6 rounded-lg shadow-lg border border-green-300 max-w-3xl w-full" | |
| > | |
| <h2 class="text-2xl font-bold text-green-700 mb-4">Frog Achievements</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-3"> | |
| <div id="achievement-10" class="achievement p-3 rounded border border-green-200 bg-green-50 opacity-50"> | |
| <div class="flex items-center"> | |
| <i data-feather="award" class="text-yellow-500 mr-2"></i> | |
| <span>10 Flies</span> | |
| </div> | |
| </div> | |
| <div id="achievement-50" class="achievement p-3 rounded border border-green-200 bg-green-50 opacity-50"> | |
| <div class="flex items-center"> | |
| <i data-feather="award" class="text-yellow-500 mr-2"></i> | |
| <span>50 Flies</span> | |
| </div> | |
| </div> | |
| <div id="achievement-100" class="achievement p-3 rounded border border-green-200 bg-green-50 opacity-50"> | |
| <div class="flex items-center"> | |
| <i data-feather="award" class="text-yellow-500 mr-2"></i> | |
| <span>100 Flies</span> | |
| </div> | |
| </div> | |
| <div id="achievement-500" class="achievement p-3 rounded border border-green-200 bg-green-50 opacity-50"> | |
| <div class="flex items-center"> | |
| <i data-feather="award" class="text-yellow-500 mr-2"></i> | |
| <span>500 Flies</span> | |
| </div> | |
| </div> | |
| <div id="achievement-1000" class="achievement p-3 rounded border border-green-200 bg-green-50 opacity-50"> | |
| <div class="flex items-center"> | |
| <i data-feather="award" class="text-yellow-500 mr-2"></i> | |
| <span>1000 Flies</span> | |
| </div> | |
| </div> | |
| <div id="achievement-5000" class="achievement p-3 rounded border border-green-200 bg-green-50 opacity-50"> | |
| <div class="flex items-center"> | |
| <i data-feather="award" class="text-yellow-500 mr-2"></i> | |
| <span>5000 Flies</span> | |
| </div> | |
| </div> | |
| <div | |
| id="achievement-100000" | |
| class="achievement p-3 rounded border border-green-200 bg-green-50 opacity-50" | |
| > | |
| <div class="flex items-center"> | |
| <i data-feather="award" class="text-yellow-500 mr-2"></i> | |
| <span>100,000 Flies</span> | |
| </div> | |
| </div> | |
| <div | |
| id="achievement-1000000" | |
| class="achievement p-3 rounded border border-green-200 bg-green-50 opacity-50" | |
| > | |
| <div class="flex items-center"> | |
| <i data-feather="award" class="text-yellow-500 mr-2"></i> | |
| <span>1 Million Flies</span> | |
| </div> | |
| </div> | |
| <div | |
| id="achievement-10000000" | |
| class="achievement p-3 rounded border border-green-200 bg-green-50 opacity-50" | |
| > | |
| <div class="flex items-center"> | |
| <i data-feather="award" class="text-yellow-500 mr-2"></i> | |
| <span>10 Million Flies</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ====== Start of Boss Fight Section ====== --> | |
| <div | |
| id="boss-fight-container" | |
| class="bg-white p-6 rounded-lg shadow-lg border border-green-300 max-w-3xl w-full mt-8" | |
| > | |
| <h2 class="text-2xl font-bold text-green-700 mb-4">Boss Fight</h2> | |
| <div id="boss-fight-status" class="mb-4"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-semibold text-green-800">Player HP</span> | |
| <span id="player-hp-text" class="font-semibold text-green-800"></span> | |
| </div> | |
| <div class="w-full bg-green-200 rounded-full h-4 mb-3"> | |
| <div | |
| id="player-hp-bar" | |
| class="bg-green-600 h-4 rounded-full transition-all duration-500" | |
| ></div> | |
| </div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-semibold text-red-700">Boss HP</span> | |
| <span id="boss-hp-text" class="font-semibold text-red-700"></span> | |
| </div> | |
| <div class="w-full bg-red-200 rounded-full h-4"> | |
| <div | |
| id="boss-hp-bar" | |
| class="bg-red-600 h-4 rounded-full transition-all duration-500" | |
| ></div> | |
| </div> | |
| </div> | |
| <div | |
| id="boss-fight-log" | |
| class="bg-green-50 border border-green-200 rounded p-2 h-36 overflow-y-auto mb-4 text-left text-green-700 font-mono text-sm" | |
| > | |
| <p>Prepare to fight the boss!</p> | |
| </div> | |
| <div id="player-attacks" class="grid grid-cols-3 gap-3"> | |
| <button | |
| id="attack-slap" | |
| class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded disabled:opacity-50" | |
| > | |
| Slap | |
| </button> | |
| <button | |
| id="attack-tongue" | |
| class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded disabled:opacity-50" | |
| > | |
| Quick Tongue | |
| </button> | |
| <button | |
| id="attack-superjump" | |
| class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded disabled:opacity-50" | |
| > | |
| Super Jump | |
| </button> | |
| </div> | |
| </div> | |
| <!-- ====== End of Boss Fight Section ====== --> | |
| </div> | |
| </div> | |
| <footer class="text-center text-green-600 text-xl mt-8 mb-4"> | |
| Made By Batman | |
| </footer> | |
| <script> | |
| // Game variables | |
| let score = 0; | |
| let autoTongue = 0; | |
| let frogArmy = 0; | |
| let pondParadise = 0; | |
| let flyFarm = 0; | |
| let frogKingdom = 0; | |
| let goldenCraig = 0; | |
| let flyFactory = 0; | |
| let craigEmpire = 0; | |
| // Upgrade costs | |
| let autoTongueCost = 20; | |
| let frogArmyCost = 100; | |
| let pondParadiseCost = 500; | |
| let flyFarmCost = 1500; | |
| let frogKingdomCost = 5000; | |
| let goldenCraigCost = 20000; | |
| let flyFactoryCost = 50000; | |
| let craigEmpireCost = 100000; | |
| // DOM elements | |
| const scoreElement = document.getElementById('score'); | |
| const frogButton = document.getElementById('frog'); | |
| const clickEffect = document.getElementById('click-effect'); | |
| // Upgrade elements | |
| const autoTongueCostElement = document.getElementById('auto-tongue-cost'); | |
| const autoTongueOwnedElement = document.getElementById('auto-tongue-owned'); | |
| const buyAutoTongueButton = document.getElementById('buy-auto-tongue'); | |
| const frogArmyCostElement = document.getElementById('frog-army-cost'); | |
| const frogArmyOwnedElement = document.getElementById('frog-army-owned'); | |
| const buyFrogArmyButton = document.getElementById('buy-frog-army'); | |
| const pondParadiseCostElement = document.getElementById('pond-paradise-cost'); | |
| const pondParadiseOwnedElement = document.getElementById('pond-paradise-owned'); | |
| const buyPondParadiseButton = document.getElementById('buy-pond-paradise'); | |
| const flyFarmCostElement = document.getElementById('fly-farm-cost'); | |
| const flyFarmOwnedElement = document.getElementById('fly-farm-owned'); | |
| const buyFlyFarmButton = document.getElementById('buy-fly-farm'); | |
| const frogKingdomCostElement = document.getElementById('frog-kingdom-cost'); | |
| const frogKingdomOwnedElement = document.getElementById('frog-kingdom-owned'); | |
| const buyFrogKingdomButton = document.getElementById('buy-frog-kingdom'); | |
| const goldenCraigCostElement = document.getElementById('golden-craig-cost'); | |
| const goldenCraigOwnedElement = document.getElementById('golden-craig-owned'); | |
| const buyGoldenCraigButton = document.getElementById('buy-golden-craig'); | |
| const flyFactoryCostElement = document.getElementById('fly-factory-cost'); | |
| const flyFactoryOwnedElement = document.getElementById('fly-factory-owned'); | |
| const buyFlyFactoryButton = document.getElementById('buy-fly-factory'); | |
| const craigEmpireCostElement = document.getElementById('craig-empire-cost'); | |
| const craigEmpireOwnedElement = document.getElementById('craig-empire-owned'); | |
| const buyCraigEmpireButton = document.getElementById('buy-craig-empire'); | |
| // Achievement elements | |
| const achievements = { | |
| 10: document.getElementById('achievement-10'), | |
| 50: document.getElementById('achievement-50'), | |
| 100: document.getElementById('achievement-100'), | |
| 500: document.getElementById('achievement-500'), | |
| 1000: document.getElementById('achievement-1000'), | |
| 5000: document.getElementById('achievement-5000'), | |
| 100000: document.getElementById('achievement-100000'), | |
| 1000000: document.getElementById('achievement-1000000'), | |
| 10000000: document.getElementById('achievement-10000000'), | |
| }; | |
| // Click handler | |
| frogButton.addEventListener('click', () => { | |
| score += isFrenzyActive ? 2 : 1; | |
| updateScore(); | |
| // Show click effect | |
| clickEffect.textContent = '+1'; | |
| clickEffect.style.opacity = '1'; | |
| clickEffect.style.top = `${Math.random() * 100}%`; | |
| clickEffect.style.left = `${Math.random() * 100}%`; | |
| setTimeout(() => { | |
| clickEffect.style.opacity = '0'; | |
| }, 500); | |
| // Random frog sound | |
| if (Math.random() > 0.7) { | |
| playSound('ribbit'); | |
| } | |
| }); | |
| // Upgrade handlers | |
| buyAutoTongueButton.addEventListener('click', () => { | |
| if (score >= autoTongueCost) { | |
| score -= autoTongueCost; | |
| autoTongue++; | |
| autoTongueCost = Math.floor(autoTongueCost * 1.2); | |
| updateScore(); | |
| autoTongueOwnedElement.textContent = autoTongue; | |
| autoTongueCostElement.textContent = autoTongueCost; | |
| playSound('purchase'); | |
| } | |
| }); | |
| buyFrogArmyButton.addEventListener('click', () => { | |
| if (score >= frogArmyCost) { | |
| score -= frogArmyCost; | |
| frogArmy++; | |
| frogArmyCost = Math.floor(frogArmyCost * 1.2); | |
| updateScore(); | |
| frogArmyOwnedElement.textContent = frogArmy; | |
| frogArmyCostElement.textContent = frogArmyCost; | |
| playSound('purchase'); | |
| } | |
| }); | |
| buyPondParadiseButton.addEventListener('click', () => { | |
| if (score >= pondParadiseCost) { | |
| score -= pondParadiseCost; | |
| pondParadise++; | |
| pondParadiseCost = Math.floor(pondParadiseCost * 1.2); | |
| updateScore(); | |
| pondParadiseOwnedElement.textContent = pondParadise; | |
| pondParadiseCostElement.textContent = pondParadiseCost; | |
| flyFarmOwnedElement.textContent = flyFarm; | |
| flyFarmCostElement.textContent = flyFarmCost; | |
| frogKingdomOwnedElement.textContent = frogKingdom; | |
| frogKingdomCostElement.textContent = frogKingdomCost; | |
| goldenCraigOwnedElement.textContent = goldenCraig; | |
| goldenCraigCostElement.textContent = goldenCraigCost; | |
| flyFactoryOwnedElement.textContent = flyFactory; | |
| flyFactoryCostElement.textContent = flyFactoryCost; | |
| craigEmpireOwnedElement.textContent = craigEmpire; | |
| craigEmpireCostElement.textContent = craigEmpireCost; | |
| playSound('purchase'); | |
| } | |
| }); | |
| buyFlyFarmButton.addEventListener('click', () => { | |
| if (score >= flyFarmCost) { | |
| score -= flyFarmCost; | |
| flyFarm++; | |
| flyFarmCost = Math.floor(flyFarmCost * 1.2); | |
| updateScore(); | |
| flyFarmOwnedElement.textContent = flyFarm; | |
| flyFarmCostElement.textContent = flyFarmCost; | |
| playSound('purchase'); | |
| } | |
| }); | |
| buyFrogKingdomButton.addEventListener('click', () => { | |
| if (score >= frogKingdomCost) { | |
| score -= frogKingdomCost; | |
| frogKingdom++; | |
| frogKingdomCost = Math.floor(frogKingdomCost * 1.2); | |
| updateScore(); | |
| frogKingdomOwnedElement.textContent = frogKingdom; | |
| frogKingdomCostElement.textContent = frogKingdomCost; | |
| playSound('purchase'); | |
| } | |
| }); | |
| buyGoldenCraigButton.addEventListener('click', () => { | |
| if (score >= goldenCraigCost) { | |
| score -= goldenCraigCost; | |
| goldenCraig++; | |
| goldenCraigCost = Math.floor(goldenCraigCost * 1.2); | |
| updateScore(); | |
| goldenCraigOwnedElement.textContent = goldenCraig; | |
| goldenCraigCostElement.textContent = goldenCraigCost; | |
| playSound('purchase'); | |
| } | |
| }); | |
| buyFlyFactoryButton.addEventListener('click', () => { | |
| if (score >= flyFactoryCost) { | |
| score -= flyFactoryCost; | |
| flyFactory++; | |
| flyFactoryCost = Math.floor(flyFactoryCost * 1.2); | |
| updateScore(); | |
| flyFactoryOwnedElement.textContent = flyFactory; | |
| flyFactoryCostElement.textContent = flyFactoryCost; | |
| playSound('purchase'); | |
| } | |
| }); | |
| buyCraigEmpireButton.addEventListener('click', () => { | |
| if (score >= craigEmpireCost) { | |
| score -= craigEmpireCost; | |
| craigEmpire++; | |
| craigEmpireCost = Math.floor(craigEmpireCost * 1.2); | |
| updateScore(); | |
| craigEmpireOwnedElement.textContent = craigEmpire; | |
| craigEmpireCostElement.textContent = craigEmpireCost; | |
| playSound('purchase'); | |
| } | |
| }); | |
| // Update score display | |
| function updateScore() { | |
| scoreElement.textContent = score; | |
| checkAchievements(); | |
| // Update button states | |
| buyAutoTongueButton.disabled = score < autoTongueCost; | |
| buyFrogArmyButton.disabled = score < frogArmyCost; | |
| buyPondParadiseButton.disabled = score < pondParadiseCost; | |
| buyFlyFarmButton.disabled = score < flyFarmCost; | |
| buyFrogKingdomButton.disabled = score < frogKingdomCost; | |
| buyGoldenCraigButton.disabled = score < goldenCraigCost; | |
| buyFlyFactoryButton.disabled = score < flyFactoryCost; | |
| buyCraigEmpireButton.disabled = score < craigEmpireCost; | |
| } | |
| // Check achievements | |
| function checkAchievements() { | |
| if (score >= 10) { | |
| achievements[10].style.opacity = '1'; | |
| achievements[10].classList.add('bg-green-100'); | |
| } | |
| if (score >= 50) { | |
| achievements[50].style.opacity = '1'; | |
| achievements[50].classList.add('bg-green-100'); | |
| } | |
| if (score >= 100) { | |
| achievements[100].style.opacity = '1'; | |
| achievements[100].classList.add('bg-green-100'); | |
| } | |
| if (score >= 500) { | |
| achievements[500].style.opacity = '1'; | |
| achievements[500].classList.add('bg-green-100'); | |
| } | |
| if (score >= 1000) { | |
| achievements[1000].style.opacity = '1'; | |
| achievements[1000].classList.add('bg-green-100'); | |
| } | |
| if (score >= 5000) { | |
| achievements[5000].style.opacity = '1'; | |
| achievements[5000].classList.add('bg-green-100'); | |
| } | |
| if (score >= 100000) { | |
| achievements[100000].style.opacity = '1'; | |
| achievements[100000].classList.add('bg-green-100'); | |
| } | |
| if (score >= 1000000) { | |
| achievements[1000000].style.opacity = '1'; | |
| achievements[1000000].classList.add('bg-green-100'); | |
| } | |
| if (score >= 10000000) { | |
| achievements[10000000].style.opacity = '1'; | |
| achievements[10000000].classList.add('bg-green-100'); | |
| } | |
| } | |
| // Craig Frenzy variables | |
| let isFrenzyActive = false; | |
| let frenzyEndTime = 0; | |
| // Game loop for passive income | |
| setInterval(() => { | |
| // Check for Craig Frenzy | |
| if ( | |
| !isFrenzyActive && | |
| Date.now() % 600000 < 1000 && | |
| Math.random() < 0.05 | |
| ) { | |
| // 1/20 chance every 10 minutes | |
| isFrenzyActive = true; | |
| frenzyEndTime = Date.now() + 45000; // 45 second duration | |
| // Show frenzy text | |
| const frenzyText = document.createElement('div'); | |
| frenzyText.textContent = 'CRAIG FRENZY!'; | |
| frenzyText.className = | |
| 'fixed inset-0 flex items-center justify-center text-6xl font-bold text-yellow-400 animate-pulse z-50'; | |
| document.body.appendChild(frenzyText); | |
| setTimeout(() => { | |
| frenzyText.remove(); | |
| }, 3000); | |
| alert('🐸 Craig Frenzy Activated! Click the mini Craig\'s for 1000 flies each!'); | |
| // Spawn mini Craig's | |
| const spawnMiniCraig = () => { | |
| if (!isFrenzyActive) return; | |
| const miniCraig = document.createElement('img'); | |
| miniCraig.src = | |
| "https://core-docs.s3.amazonaws.com/limestone_county_schools_ar/directory/1893430/small_5c471c54-cec5-4d2a-95cc-e862369c472f.png"; | |
| miniCraig.className = 'absolute w-16 h-16 cursor-pointer animate-bounce'; | |
| miniCraig.style.top = `${Math.random() * 80 + 10}%`; | |
| miniCraig.style.left = `${Math.random() * 80 + 10}%`; | |
| miniCraig.addEventListener('click', () => { | |
| score += 1000; | |
| updateScore(); | |
| miniCraig.remove(); | |
| playSound('purchase'); | |
| }); | |
| document.body.appendChild(miniCraig); | |
| // Remove after 5 seconds | |
| setTimeout(() => { | |
| if (miniCraig.parentNode) { | |
| miniCraig.remove(); | |
| } | |
| }, 5000); | |
| // Spawn another if frenzy still active | |
| if (isFrenzyActive) { | |
| setTimeout(spawnMiniCraig, 1000); | |
| } | |
| }; | |
| // Start spawning mini Craig's | |
| spawnMiniCraig(); | |
| } | |
| // Check if frenzy should end | |
| if (isFrenzyActive && Date.now() > frenzyEndTime) { | |
| isFrenzyActive = false; | |
| // Remove any remaining mini Craig's (but not the original Craig) | |
| document.querySelectorAll('img[src="https://core-docs.s3.amazonaws.com/limestone_county_schools_ar/directory/1893430/small_5c471c54-cec5-4d2a-95cc-e862369c472f.png"]').forEach(el => { | |
| if (!el.classList.contains('bounce')) { | |
| // Only remove mini Craig's that don't have the bounce class (original has it) | |
| el.remove(); | |
| } | |
| }); | |
| } | |
| // Auto-tongue income | |
| if (autoTongue > 0) { | |
| score += autoTongue * (isFrenzyActive ? 2 : 1); | |
| updateScore(); | |
| } | |
| // Frog army income | |
| if (frogArmy > 0) { | |
| score += frogArmy * 5 * (isFrenzyActive ? 2 : 1); | |
| updateScore(); | |
| } | |
| // Pond paradise income | |
| if (pondParadise > 0) { | |
| score += pondParadise * 20 * (isFrenzyActive ? 2 : 1); | |
| updateScore(); | |
| } | |
| // Fly farm income (every 20 seconds) | |
| if (flyFarm > 0 && Date.now() % 20000 < 1000) { | |
| score += flyFarm * 50 * (isFrenzyActive ? 2 : 1); | |
| updateScore(); | |
| } | |
| // Frog kingdom income (every 30 seconds) | |
| if (frogKingdom > 0 && Date.now() % 30000 < 1000) { | |
| score += frogKingdom * 100 * (isFrenzyActive ? 2 : 1); | |
| updateScore(); | |
| } | |
| // Golden craig income (every minute) | |
| if (goldenCraig > 0 && Date.now() % 60000 < 1000) { | |
| score += goldenCraig * 200 * (isFrenzyActive ? 2 : 1); | |
| updateScore(); | |
| } | |
| // Fly factory income (every minute) | |
| if (flyFactory > 0 && Date.now() % 60000 < 1000) { | |
| score += flyFactory * 500 * (isFrenzyActive ? 2 : 1); | |
| updateScore(); | |
| } | |
| // Craig empire income (every 2 minutes) | |
| if (craigEmpire > 0 && Date.now() % 120000 < 1000) { | |
| score += craigEmpire * 1000 * (isFrenzyActive ? 2 : 1); | |
| updateScore(); | |
| } | |
| }, 1000); | |
| // Simple sound effects | |
| function playSound(type) { | |
| if (type === 'ribbit') { | |
| const sounds = [ | |
| 'https://assets.mixkit.co/sfx/preview/mixkit-frog-croaking-1411.mp3', | |
| 'https://assets.mixkit.co/sfx/preview/mixkit-frog-croaking-1449.mp3', | |
| ]; | |
| const sound = new Audio(sounds[Math.floor(Math.random() * sounds.length)]); | |
| sound.volume = 0.3; | |
| sound.play(); | |
| } else if (type === 'purchase') { | |
| const sound = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-casino-win-notification-1980.mp3'); | |
| sound.volume = 0.2; | |
| sound.play(); | |
| } | |
| } | |
| // Save game state | |
| function saveGame() { | |
| const gameState = { | |
| isFrenzyActive, | |
| frenzyEndTime, | |
| score, | |
| autoTongue, | |
| frogArmy, | |
| pondParadise, | |
| flyFarm, | |
| frogKingdom, | |
| goldenCraig, | |
| flyFactory, | |
| craigEmpire, | |
| autoTongueCost, | |
| frogArmyCost, | |
| pondParadiseCost, | |
| flyFarmCost, | |
| frogKingdomCost, | |
| goldenCraigCost, | |
| flyFactoryCost, | |
| craigEmpireCost, | |
| }; | |
| localStorage.setItem('froggyClicker', JSON.stringify(gameState)); | |
| } | |
| // Load game state | |
| function loadGame() { | |
| const savedGame = localStorage.getItem('froggyClicker'); | |
| if (savedGame) { | |
| const gameState = JSON.parse(savedGame); | |
| isFrenzyActive = gameState.isFrenzyActive || false; | |
| frenzyEndTime = gameState.frenzyEndTime || 0; | |
| score = gameState.score || 0; | |
| autoTongue = gameState.autoTongue || 0; | |
| frogArmy = gameState.frogArmy || 0; | |
| pondParadise = gameState.pondParadise || 0; | |
| flyFarm = gameState.flyFarm || 0; | |
| frogKingdom = gameState.frogKingdom || 0; | |
| goldenCraig = gameState.goldenCraig || 0; | |
| flyFactory = gameState.flyFactory || 0; | |
| craigEmpire = gameState.craigEmpire || 0; | |
| autoTongueCost = gameState.autoTongueCost || 20; | |
| frogArmyCost = gameState.frogArmyCost || 100; | |
| pondParadiseCost = gameState.pondParadiseCost || 500; | |
| flyFarmCost = gameState.flyFarmCost || 1500; | |
| frogKingdomCost = gameState.frogKingdomCost || 5000; | |
| goldenCraigCost = gameState.goldenCraigCost || 20000; | |
| flyFactoryCost = gameState.flyFactoryCost || 50000; | |
| craigEmpireCost = gameState.craigEmpireCost || 100000; | |
| // Update display | |
| scoreElement.textContent = score; | |
| autoTongueOwnedElement.textContent = autoTongue; | |
| frogArmyOwnedElement.textContent = frogArmy; | |
| pondParadiseOwnedElement.textContent = pondParadise; | |
| autoTongueCostElement.textContent = autoTongueCost; | |
| frogArmyCostElement.textContent = frogArmyCost; | |
| pondParadiseCostElement.textContent = pondParadiseCost; | |
| checkAchievements(); | |
| } | |
| } | |
| // Autosave every 10 seconds | |
| setInterval(saveGame, 10000); | |
| // Cheat menu | |
| const cheatMenu = document.createElement('div'); | |
| cheatMenu.id = 'cheat-menu'; | |
| cheatMenu.className = | |
| 'fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg shadow-xl z-50 hidden border-2 border-yellow-400'; | |
| cheatMenu.innerHTML = ` | |
| <h2 class="text-2xl font-bold text-green-700 mb-4">Cheat Menu</h2> | |
| <div class="grid gap-4"> | |
| <button id="add-1000" class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded"> | |
| Add 1,000 Flies | |
| </button> | |
| <button id="add-10000" class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded"> | |
| Add 10,000 Flies | |
| </button> | |
| <button id="add-100000" class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded"> | |
| Add 100,000 Flies | |
| </button> | |
| <button id="max-all" class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded"> | |
| Max All Upgrades | |
| </button> | |
| <button id="close-cheats" class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded"> | |
| Close Menu | |
| </button> | |
| </div> | |
| `; | |
| document.body.appendChild(cheatMenu); | |
| // Cheat menu functions | |
| document.getElementById('add-1000').addEventListener('click', () => { | |
| score += 1000; | |
| updateScore(); | |
| playSound('purchase'); | |
| }); | |
| document.getElementById('add-10000').addEventListener('click', () => { | |
| score += 10000; | |
| updateScore(); | |
| playSound('purchase'); | |
| }); | |
| document.getElementById('add-100000').addEventListener('click', () => { | |
| score += 100000; | |
| updateScore(); | |
| playSound('purchase'); | |
| }); | |
| document.getElementById('max-all').addEventListener('click', () => { | |
| autoTongue = 9999; | |
| frogArmy = 9999; | |
| pondParadise = 9999; | |
| flyFarm = 9999; | |
| frogKingdom = 9999; | |
| goldenCraig = 9999; | |
| flyFactory = 9999; | |
| craigEmpire = 9999; | |
| autoTongueOwnedElement.textContent = autoTongue; | |
| frogArmyOwnedElement.textContent = frogArmy; | |
| pondParadiseOwnedElement.textContent = pondParadise; | |
| flyFarmOwnedElement.textContent = flyFarm; | |
| frogKingdomOwnedElement.textContent = frogKingdom; | |
| goldenCraigOwnedElement.textContent = goldenCraig; | |
| flyFactoryOwnedElement.textContent = flyFactory; | |
| craigEmpireOwnedElement.textContent = craigEmpire; | |
| playSound('purchase'); | |
| }); | |
| document.getElementById('close-cheats').addEventListener('click', () => { | |
| cheatMenu.classList.add('hidden'); | |
| // Show reopen button | |
| const reopenBtn = document.createElement('button'); | |
| reopenBtn.id = 'reopen-cheats'; | |
| reopenBtn.className = | |
| 'fixed top-4 left-4 bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg shadow-md z-50'; | |
| reopenBtn.textContent = 'Open Cheats'; | |
| reopenBtn.addEventListener('click', () => { | |
| cheatMenu.classList.remove('hidden'); | |
| reopenBtn.remove(); | |
| }); | |
| document.body.appendChild(reopenBtn); | |
| }); | |
| // Remove reopen button when cheats are opened via name | |
| document.getElementById('player-name').addEventListener('change', e => { | |
| const reopenBtn = document.getElementById('reopen-cheats'); | |
| if (reopenBtn && e.target.value.toLowerCase().includes('BATMAN')) { | |
| reopenBtn.remove(); | |
| } | |
| }); | |
| // Name input check for cheat menu and easter eggs | |
| let gimmeFliesUses = 0; | |
| document.getElementById('player-name').addEventListener('change', e => { | |
| if (e.target.value.toLowerCase().includes('BATMAN')) { | |
| cheatMenu.classList.remove('hidden'); | |
| } else if (e.target.value.toLowerCase() === 'gimme sum flies' && gimmeFliesUses < 3) { | |
| score += 1000; | |
| gimmeFliesUses++; | |
| updateScore(); | |
| const message = document.createElement('div'); | |
| message.textContent = `🤑 Here you go! +1000 flies! (${3 - gimmeFliesUses} uses left)`; | |
| message.className = | |
| 'fixed top-4 left-1/2 transform -translate-x-1/2 bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded z-50'; | |
| document.body.appendChild(message); | |
| setTimeout(() => message.remove(), 3000); | |
| playSound('purchase'); | |
| } else if (e.target.value.toLowerCase() === 'gimme sum flies' && gimmeFliesUses >= 3) { | |
| const message = document.createElement('div'); | |
| message.textContent = '❌ No more free flies for you!'; | |
| message.className = | |
| 'fixed top-4 left-1/2 transform -translate-x-1/2 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded z-50'; | |
| document.body.appendChild(message); | |
| setTimeout(() => message.remove(), 3000); | |
| } | |
| }); | |
| // Initialize | |
| window.addEventListener('load', () => { | |
| loadGame(); | |
| feather.replace(); | |
| // Check button states on load | |
| updateScore(); | |
| // Easter egg - double click frog | |
| frogButton.addEventListener('dblclick', () => { | |
| if (Math.random() < 0.1) { | |
| // 1 in 10 chance (was 1/50) | |
| score += 100; | |
| updateScore(); | |
| alert('👨💻 Wow! You found Craig\'s secret stash! +100 flies!'); | |
| } | |
| }); | |
| // Start boss fight once hit 100000 flies | |
| startBossFight(); | |
| setInterval(bossAttackLoop, 1500); // Boss attack loop every 5.5 sec | |
| }); | |
| // -------------- Boss Fight Code -------------- | |
| // Player stats | |
| const playerMaxHP = 500; | |
| let playerHP = playerMaxHP; | |
| // Boss stats (will scale) | |
| let bossMaxHP; | |
| let bossHP; | |
| let bossLevel = 1; // increases when boss defeated | |
| // Elements | |
| const playerHPBar = document.getElementById('player-hp-bar'); | |
| const playerHPText = document.getElementById('player-hp-text'); | |
| const bossHPBar = document.getElementById('boss-hp-bar'); | |
| const bossHPText = document.getElementById('boss-hp-text'); | |
| const bossFightLog = document.getElementById('boss-fight-log'); | |
| const attackSlapBtn = document.getElementById('attack-slap'); | |
| const attackTongueBtn = document.getElementById('attack-tongue'); | |
| const attackSuperjumpBtn = document.getElementById('attack-superjump'); | |
| // Attack cooldowns in ms | |
| const attackCooldowns = { | |
| slap: 10, | |
| tongue: 10, | |
| superjump: 10, | |
| }; | |
| const lastAttackTimes = { | |
| slap: 0, | |
| tongue: 0, | |
| superjump: 0, | |
| }; | |
| // Boss attacks | |
| const bossAttacks = [ | |
| { | |
| name: 'Tail Swipe', | |
| damage: 8, | |
| description: 'Boss uses a powerful tail swipe!', | |
| cooldown: 5000, | |
| }, | |
| { | |
| name: 'Venom Spit', | |
| damage: 5, | |
| description: 'Boss spits venom!', | |
| cooldown: 8000, | |
| }, | |
| { | |
| name: 'Ground Stomp', | |
| damage: 10, | |
| description: 'Boss stomps the ground causing shockwave!', | |
| cooldown: 10000, | |
| }, | |
| ]; | |
| // Last boss attack timestamp | |
| let lastBossAttackTime = 0; | |
| // Utility to add message to fight log and scroll down | |
| function logBossFight(message) { | |
| if (!message) { | |
| // Clear log | |
| bossFightLog.innerHTML = ''; | |
| return; | |
| } | |
| const p = document.createElement('p'); | |
| p.textContent = message; | |
| bossFightLog.appendChild(p); | |
| bossFightLog.scrollTop = bossFightLog.scrollHeight; | |
| } | |
| // Update UI health bars and text | |
| function updateHealthUI() { | |
| // Clamp values | |
| playerHP = Math.min(Math.max(playerHP, 0), playerMaxHP); | |
| bossHP = Math.min(Math.max(bossHP, 0), bossMaxHP); | |
| playerHPText.textContent = `${playerHP} / ${playerMaxHP}`; | |
| playerHPBar.style.width = `${(playerHP / playerMaxHP) * 100}%`; | |
| bossHPText.textContent = `${bossHP} / ${bossMaxHP}`; | |
| bossHPBar.style.width = `${(bossHP / bossMaxHP) * 100}%`; | |
| } | |
| // Compute boss stats based on level and highest achievements | |
| function getBossStats(level) { | |
| // Base HP and multipliers | |
| const baseHP = 150; | |
| const hpMultiplier = 1.5; | |
| // Achievement scaling multiplier | |
| let achievementScale = 1; | |
| if (score >= 10000000) achievementScale = 5; | |
| else if (score >= 1000000) achievementScale = 4; | |
| else if (score >= 100000) achievementScale = 3; | |
| else if (score >= 5000) achievementScale = 2; | |
| else if (score >= 1000) achievementScale = 1.5; | |
| return { | |
| hp: Math.floor(baseHP * Math.pow(hpMultiplier, level - 1) * achievementScale), | |
| damageMultiplier: achievementScale, | |
| }; | |
| } | |
| // Enable or disable player attack buttons | |
| function enablePlayerAttacks(enable) { | |
| attackSlapBtn.disabled = !enable; | |
| attackTongueBtn.disabled = !enable; | |
| attackSuperjumpBtn.disabled = !enable; | |
| } | |
| // Start or reset boss fight | |
| function startBossFight() { | |
| const stats = getBossStats(bossLevel); | |
| bossMaxHP = stats.hp; | |
| bossHP = bossMaxHP; | |
| playerHP = playerMaxHP; | |
| updateHealthUI(); | |
| logBossFight(`Boss Level ${bossLevel} approaches!`); | |
| enablePlayerAttacks(true); | |
| } | |
| // Player attack handler | |
| function playerAttack(type) { | |
| const now = Date.now(); | |
| if (now - lastAttackTimes[type] < attackCooldowns[type]) { | |
| logBossFight(`Attack ${type} is on cooldown!`); | |
| return; | |
| } | |
| lastAttackTimes[type] = now; | |
| // Damage values | |
| let damage = 0; | |
| let description = ''; | |
| switch (type) { | |
| case 'slap': | |
| damage = 10; | |
| description = 'Player slaps the boss!'; | |
| break; | |
| case 'tongue': | |
| damage = 25; | |
| description = 'Player uses Quick Tongue!'; | |
| break; | |
| case 'superjump': | |
| damage = 40; | |
| description = 'Player performs a Super Jump attack!'; | |
| break; | |
| default: | |
| return; | |
| } | |
| // Apply frenzy multiplier | |
| damage = Math.floor(damage * (isFrenzyActive ? 2 : 1)); | |
| bossHP -= damage; | |
| updateHealthUI(); | |
| logBossFight(description + ` (-${damage} HP)`); | |
| // Check if boss defeated | |
| if (bossHP <= 0) { | |
| logBossFight(`🎉 Boss defeated! You earned 10000 flies!`); | |
| score += 5000; | |
| updateScore(); | |
| bossLevel++; | |
| enablePlayerAttacks(false); | |
| // Next boss starts in 3 seconds | |
| setTimeout(() => { | |
| logBossFight(''); | |
| startBossFight(); | |
| }, 3000); | |
| } | |
| } | |
| // Boss attacks periodically | |
| function bossAttackLoop() { | |
| const now = Date.now(); | |
| if (now - lastBossAttackTime < 1500) return; | |
| // Pick random boss attack | |
| const attack = bossAttacks[Math.floor(Math.random() * bossAttacks.length)]; | |
| // Damage scales with achievement multiplier | |
| const stats = getBossStats(bossLevel); | |
| const adjustedDamage = Math.floor(attack.damage * stats.damageMultiplier); | |
| playerHP -= adjustedDamage; | |
| updateHealthUI(); | |
| logBossFight(attack.description + ` (-${adjustedDamage} HP to player)`); | |
| if (playerHP <= 0) { | |
| logBossFight(`💀 You were defeated by the boss... Try again.`); | |
| enablePlayerAttacks(false); | |
| bossLevel = 1; | |
| setTimeout(() => { | |
| logBossFight(''); | |
| startBossFight(); | |
| }, 5000); | |
| } | |
| lastBossAttackTime = now; | |
| } | |
| // Player attack button events | |
| attackSlapBtn.addEventListener('click', () => playerAttack('slap')); | |
| attackTongueBtn.addEventListener('click', () => playerAttack('tongue')); | |
| attackSuperjumpBtn.addEventListener('click', () => playerAttack('superjump')); | |
| </script> | |
| </body> | |
| </html> |