Infinite Clicker

Infinite Clicker Game

Points: 0

Click Power: 1

Auto-Click Power: 0 per second

Upgrades

body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; margin: 0; } .container { text-align: center; background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } h1 { color: #333; } .stats { margin-bottom: 20px; font-size: 1.1em; } #clickButton { padding: 15px 30px; font-size: 1.5em; cursor: pointer; background-color: #4CAF50; color: white; border: none; border-radius: 5px; margin-bottom: 30px; transition: background-color 0.3s ease; } #clickButton:hover { background-color: #45a049; } .upgrades { margin-top: 20px; border-top: 1px solid #eee; padding-top: 20px; } .upgrades h2 { margin-bottom: 15px; color: #555; } .upgrades button { display: block; width: 100%; padding: 10px; margin-bottom: 10px; font-size: 1em; cursor: pointer; background-color: #008CBA; color: white; border: none; border-radius: 5px; transition: background-color 0.3s ease; text-align: left; } .upgrades button:hover:not(:disabled) { background-color: #007bb5; } .upgrades button:disabled { background-color: #cccccc; cursor: not-allowed; } .upgrades button span { font-weight: bold; } let points = 0; let clickPower = 1; let autoClickPower = 0; let upgradeClickCost = 10; let upgradeClickEffect = 1; let upgradeAutoCost = 100; let upgradeAutoEffect = 1; const pointsDisplay = document.getElementById('points'); const clickPowerDisplay = document.getElementById('clickPower'); const autoClickPowerDisplay = document.getElementById('autoClickPower'); const clickButton = document.getElementById('clickButton'); const upgradeClickButton = document.getElementById('upgradeClickPower'); const upgradeAutoButton = document.getElementById('upgradeAutoClick'); const upgradeClickCostDisplay = document.getElementById('upgradeClickCost'); const upgradeClickEffectDisplay = document.getElementById('upgradeClickEffect'); const upgradeAutoCostDisplay = document.getElementById('upgradeAutoCost'); const upgradeAutoEffectDisplay = document.getElementById('upgradeAutoEffect'); function updateDisplay() { pointsDisplay.textContent = Math.floor(points); clickPowerDisplay.textContent = clickPower; autoClickPowerDisplay.textContent = autoClickPower; upgradeClickCostDisplay.textContent = Math.floor(upgradeClickCost); upgradeClickEffectDisplay.textContent = upgradeClickEffect; upgradeAutoCostDisplay.textContent = Math.floor(upgradeAutoCost); upgradeAutoEffectDisplay.textContent = upgradeAutoEffect; // Enable/disable upgrade buttons upgradeClickButton.disabled = points < upgradeClickCost; upgradeAutoButton.disabled = points < upgradeAutoCost; } function clickPoints() { points += clickPower; updateDisplay(); } function buyUpgradeClick() { if (points >= upgradeClickCost) { points -= upgradeClickCost; clickPower += upgradeClickEffect; // Scale cost and effect for next upgrade upgradeClickCost = upgradeClickCost * 1.5; // Cost increases by 50% upgradeClickEffect += 1; // Effect increases additively updateDisplay(); } } function buyUpgradeAuto() { if (points >= upgradeAutoCost) { points -= upgradeAutoCost; autoClickPower += upgradeAutoEffect; // Scale cost and effect for next upgrade upgradeAutoCost = upgradeAutoCost * 1.7; // Cost increases by 70% upgradeAutoEffect += 1; // Effect increases additively updateDisplay(); } } // Auto-click interval (adds points every second) setInterval(() => { points += autoClickPower; updateDisplay(); }, 1000); // 1000 milliseconds = 1 second // Event listeners clickButton.addEventListener('click', clickPoints); upgradeClickButton.addEventListener('click', buyUpgradeClick); upgradeAutoButton.addEventListener('click', buyUpgradeAuto); // Initial display update updateDisplay();