Infinite Scaling Clicker Game

Clicker Game

Clicks: 0

Clicks per second: 0

Upgrades

:root { --bg-color: #f0f0f0; --text-color: #333; --container-bg: #fff; --border-color: #eee; --button-bg: #4CAF50; --button-text: white; --button-hover-bg: #45a049; --button-disabled-bg: #cccccc; --upgrade-border: #ddd; --upgrade-button-bg: #008CBA; --upgrade-button-hover-bg: #007bb5; } body.dark-mode { --bg-color: #1a1a1a; --text-color: #eee; --container-bg: #333; --border-color: #555; --button-bg: #6200ee; --button-text: white; --button-hover-bg: #3700b3; --button-disabled-bg: #555; --upgrade-border: #555; --upgrade-button-bg: #03dac6; --upgrade-button-hover-bg: #018786; } body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: var(--bg-color); color: var(--text-color); margin: 0; transition: background-color 0.3s ease, color 0.3s ease; } .game-container { text-align: center; background-color: var(--container-bg); padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: background-color 0.3s ease, box-shadow 0.3s ease; max-height: 95vh; /* Limit container height */ display: flex; flex-direction: column; } .controls { margin-bottom: 20px; } #darkModeToggle { padding: 8px 15px; cursor: pointer; background-color: var(--upgrade-button-bg); color: var(--button-text); border: none; border-radius: 4px; transition: background-color 0.3s ease; } #darkModeToggle:hover { background-color: var(--upgrade-button-hover-bg); } .stats { margin-bottom: 20px; font-size: 1.2em; } #clickButton { padding: 15px 30px; font-size: 1.5em; cursor: pointer; margin-bottom: 20px; background-color: var(--button-bg); color: var(--button-text); border: none; border-radius: 5px; transition: background-color 0.3s ease; } #clickButton:hover { background-color: var(--button-hover-bg); } .upgrades { margin-top: 20px; border-top: 1px solid var(--border-color); padding-top: 20px; transition: border-color 0.3s ease; flex-grow: 1; /* Allow upgrades section to take available space */ overflow-y: auto; /* Add scrollbar */ max-height: calc(95vh - 200px); /* Adjust max-height based on other elements */ } .upgrade-item { border: 1px solid var(--upgrade-border); padding: 10px; margin-bottom: 10px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; transition: border-color 0.3s ease; } .upgrade-item button { padding: 8px 15px; cursor: pointer; background-color: var(--upgrade-button-bg); color: var(--button-text); border: none; border-radius: 4px; transition: background-color 0.3s ease; } .upgrade-item button:hover:not(:disabled) { background-color: var(--upgrade-button-hover-bg); } .upgrade-item button:disabled { background-color: var(--button-disabled-bg); cursor: not-allowed; } let clicks = 0; let clicksPerClick = 1; let clicksPerSecond = 0; const clicksDisplay = document.getElementById('clicks'); const cpsDisplay = document.getElementById('cps'); const clickButton = document.getElementById('clickButton'); const upgradeListDiv = document.getElementById('upgradeList'); const darkModeToggle = document.getElementById('darkModeToggle'); const body = document.body; // Define core upgrade types. Each type can be purchased many times. const upgrades = [ { id: 'cursor', name: 'Cursor', baseCost: 10, baseEffect: { type: 'cpc', value: 1 }, count: 0, costMultiplier: 1.15 }, { id: 'grandma', name: 'Grandma', baseCost: 100, baseEffect: { type: 'cps', value: 1 }, count: 0, costMultiplier: 1.15 }, { id: 'farm', name: 'Farm', baseCost: 1100, baseEffect: { type: 'cps', value: 8 }, count: 0, costMultiplier: 1.15 }, { id: 'mine', name: 'Mine', baseCost: 12000, baseEffect: { type: 'cps', value: 47 }, count: 0, costMultiplier: 1.15 }, { id: 'factory', name: 'Factory', baseCost: 130000, baseEffect: { type: 'cps', value: 260 }, count: 0, costMultiplier: 1.15 }, { id: 'bank', name: 'Bank', baseCost: 1400000, baseEffect: { type: 'cps', value: 1400 }, count: 0, costMultiplier: 1.15 }, { id: 'temple', name: 'Temple', baseCost: 20000000, baseEffect: { type: 'cps', value: 7800 }, count: 0, costMultiplier: 1.15 }, { id: 'wizardtower', name: 'Wizard Tower', baseCost: 330000000, baseEffect: { type: 'cps', value: 44000 }, count: 0, costMultiplier: 1.15 }, { id: 'shipment', name: 'Shipment', baseCost: 5100000000, baseEffect: { type: 'cps', value: 260000 }, count: 0, costMultiplier: 1.15 }, { id: 'alchemy', name: 'Alchemy Lab', baseCost: 75000000000, baseEffect: { type: 'cps', value: 1600000 }, count: 0, costMultiplier: 1.15 }, { id: 'portal', name: 'Portal', baseCost: 1000000000000, baseEffect: { type: 'cps', value: 10000000 }, count: 0, costMultiplier: 1.15 }, { id: 'timemachine', name: 'Time Machine', baseCost: 14000000000000, baseEffect: { type: 'cps', value: 65000000 }, count: 0, costMultiplier: 1.15 }, { id: 'antimatter', name: 'Antimatter Condenser', baseCost: 170000000000000, baseEffect: { type: 'cps', value: 430000000 }, count: 0, costMultiplier: 1.15 }, { id: 'prism', name: 'Prism', baseCost: 2100000000000000, baseEffect: { type: 'cps', value: 2900000000 }, count: 0, costMultiplier: 1.15 }, { id: 'chancemaker', name: 'Chancemaker', baseCost: 26000000000000000, baseEffect: { type: 'cps', value: 21000000000 }, count: 0, costMultiplier: 1.15 }, { id: 'fractal', name: 'Fractal Engine', baseCost: 310000000000000000, baseEffect: { type: 'cps', value: 150000000000 }, count: 0, costMultiplier: 1.15 }, { id: 'idleverse', name: 'Idleverse', baseCost: 7100000000000000000, baseEffect: { type: 'cps', value: 1100000000000 }, count: 0, costMultiplier: 1.15 }, { id: 'legacy', name: 'Legacy', baseCost: 120000000000000000000, baseEffect: { type: 'cps', value: 8300000000000 }, count: 0, costMultiplier: 1.15 }, { id: 'cortex', name: 'Cortex Baker', baseCost: 1900000000000000000000, baseEffect: { type: 'cps', value: 64000000000000 }, count: 0, costMultiplier: 1.15 }, { id: 'you', name: 'You', baseCost: 100000000000000000000000, baseEffect: { type: 'cps', value: 500000000000000 }, count: 0, costMultiplier: 1.15 }, { id: 'kardashev', name: 'Kardashev', baseCost: 10000000000000000000000000, baseEffect: { type: 'cps', value: 4000000000000000 }, count: 0, costMultiplier: 1.15 }, { id: 'omniversal', name: 'Omniversal', baseCost: 1000000000000000000000000000, baseEffect: { type: 'cps', value: 30000000000000000 }, count: 0, costMultiplier: 1.15 }, { id: 'multiverse', name: 'Multiverse', baseCost: 100000000000000000000000000000, baseEffect: { type: 'cps', value: 200000000000000000 }, count: 0, costMultiplier: 1.15 }, { id: 'beyond', name: 'The Beyond', baseCost: 10000000000000000000000000000000, baseEffect: { type: 'cps', value: 1000000000000000000 }, count: 0, costMultiplier: 1.15 }, { id: 'infinity', name: 'Infinity', baseCost: 1e34, baseEffect: { type: 'cps', value: 7e18 }, count: 0, costMultiplier: 1.15 }, { id: 'universe', name: 'Universe', baseCost: 1e37, baseEffect: { type: 'cps', value: 5e19 }, count: 0, costMultiplier: 1.15 }, { id: 'dimension', name: 'Higher Dimension', baseCost: 1e40, baseEffect: { type: 'cps', value: 3e20 }, count: 0, costMultiplier: 1.15 }, { id: 'reality', name: 'Reality Engine', baseCost: 1e43, baseEffect: { type: 'cps', value: 2e21 }, count: 0, costMultiplier: 1.15 }, { id: 'singularity', name: 'Singularity', baseCost: 1e46, baseEffect: { type: 'cps', value: 1e22 }, count: 0, costMultiplier: 1.15 }, { id: 'multireality', name: 'Multireality', baseCost: 1e49, baseEffect: { type: 'cps', value: 8e22 }, count: 0, costMultiplier: 1.15 }, { id: 'omni', name: 'Omni-Dimension', baseCost: 1e52, baseEffect: { type: 'cps', value: 6e23 }, count: 0, costMultiplier: 1.15 }, { id: 'metaverse', name: 'Metaverse', baseCost: 1e55, baseEffect: { type: 'cps', value: 4e24 }, count: 0, costMultiplier: 1.15 }, { id: 'cosmos', name: 'Cosmic Fabric', baseCost: 1e58, baseEffect: { type: 'cps', value: 3e25 }, count: 0, costMultiplier: 1.15 }, { id: 'void', name: 'The Void', baseCost: 1e61, baseEffect: { type: 'cps', value: 2e26 }, count: 0, costMultiplier: 1.15 }, { id: 'genesis', name: 'Genesis Engine', baseCost: 1e64, baseEffect: { type: 'cps', value: 1e27 }, count: 0, costMultiplier: 1.15 }, { id: 'creation', name: 'Creation Machine', baseCost: 1e67, baseEffect: { type: 'cps', value: 8e27 }, count: 0, costMultiplier: 1.15 }, { id: 'existence', name: 'Existence Generator', baseCost: 1e70, baseEffect: { type: 'cps', value: 6e28 }, count: 0, costMultiplier: 1.15 }, { id: 'prime', name: 'Prime Mover', baseCost: 1e73, baseEffect: { type: 'cps', value: 4e29 }, count: 0, costMultiplier: 1.15 }, { id: 'absolute', name: 'Absolute Infinity', baseCost: 1e76, baseEffect: { type: 'cps', value: 3e30 }, count: 0, costMultiplier: 1.15 }, { id: 'omega', name: 'Omega Point', baseCost: 1e79, baseEffect: { type: 'cps', value: 2e31 }, count: 0, costMultiplier: 1.15 }, { id: 'alpha', name: 'Alpha Source', baseCost: 1e82, baseEffect: { type: 'cps', value: 1e32 }, count: 0, costMultiplier: 1.15 }, { id: 'transcendence', name: 'Transcendence', baseCost: 1e85, baseEffect: { type: 'cps', value: 8e32 }, count: 0, costMultiplier: 1.15 }, { id: 'divine', name: 'Divine Spark', baseCost: 1e88, baseEffect: { type: 'cps', value: 6e33 }, count: 0, costMultiplier: 1.15 }, { id: 'celestial', name: 'Celestial Engine', baseCost: 1e91, baseEffect: { type: 'cps', value: 4e34 }, count: 0, costMultiplier: 1.15 }, { id: 'cosmic', name: 'Cosmic Consciousness', baseCost: 1e94, baseEffect: { type: 'cps', value: 3e35 }, count: 0, costMultiplier: 1.15 }, { id: 'universal', name: 'Universal Harmony', baseCost: 1e97, baseEffect: { type: 'cps', value: 2e36 }, count: 0, costMultiplier: 1.15 }, { id: 'omnipresent', name: 'Omnipresent Force', baseCost: 1e100, baseEffect: { type: 'cps', value: 1e37 }, count: 0, costMultiplier: 1.15 }, { id: 'eternal', name: 'Eternal Recursion', baseCost: 1e103, baseEffect: { type: 'cps', value: 8e37 }, count: 0, costMultiplier: 1.15 }, { id: 'infinite', name: 'Infinite Loop', baseCost: 1e106, baseEffect: { type: 'cps', value: 6e38 }, count: 0, costMultiplier: 1.15 }, { id: 'absolutezero', name: 'Absolute Zero', baseCost: 1e109, baseEffect: { type: 'cps', value: 4e39 }, count: 0, costMultiplier: 1.15 }, { id: 'ultimate', name: 'Ultimate Reality', baseCost: 1e112, baseEffect: { type: 'cps', value: 3e40 }, count: 0, costMultiplier: 1.15 }, { id: 'final', name: 'The Final Click', baseCost: 1e115, baseEffect: { type: 'cps', value: 2e41 }, count: 0, costMultiplier: 1.15 }, // Added more to extend the list and scaling { id: 'beyondfinal', name: 'Beyond The Final', baseCost: 1e118, baseEffect: { type: 'cps', value: 1e42 }, count: 0, costMultiplier: 1.15 }, { id: 'unknown', name: 'Unknown Source', baseCost: 1e121, baseEffect: { type: 'cps', value: 8e42 }, count: 0, costMultiplier: 1.15 }, { id: 'mystery', name: 'Mystery Box', baseCost: 1e124, baseEffect: { type: 'cps', value: 6e43 }, count: 0, costMultiplier: 1.15 }, { id: 'enigma', name: 'Enigma Engine', baseCost: 1e127, baseEffect: { type: 'cps', value: 4e44 }, count: 0, costMultiplier: 1.15 }, { id: 'paradox', name: 'Paradox Machine', baseCost: 1e130, baseEffect: { type: 'cps', value: 3e45 }, count: 0, costMultiplier: 1.15 }, { id: 'singularity2', name: 'Second Singularity', baseCost: 1e133, baseEffect: { type: 'cps', value: 2e46 }, count: 0, costMultiplier: 1.15 }, { id: 'void2', name: 'Deeper Void', baseCost: 1e136, baseEffect: { type: 'cps', value: 1e47 }, count: 0, costMultiplier: 1.15 }, { id: 'genesis2', name: 'Second Genesis', baseCost: 1e139, baseEffect: { type: 'cps', value: 8e47 }, count: 0, costMultiplier: 1.15 }, { id: 'creation2', name: 'Greater Creation', baseCost: 1e142, baseEffect: { type: 'cps', value: 6e48 }, count: 0, costMultiplier: 1.15 }, { id: 'existence2', name: 'True Existence', baseCost: 1e145, baseEffect: { type: 'cps', value: 4e49 }, count: 0, costMultiplier: 1.15 }, { id: 'prime2', name: 'Primeval Mover', baseCost: 1e148, baseEffect: { type: 'cps', value: 3e50 }, count: 0, costMultiplier: 1.15 }, { id: 'absolute2', name: 'Absolute Beyond', baseCost: 1e151, baseEffect: { type: 'cps', value: 2e51 }, count: 0, costMultiplier: 1.15 }, { id: 'omega2', name: 'Omega Singularity', baseCost: 1e154, baseEffect: { type: 'cps', value: 1e52 }, count: 0, costMultiplier: 1.15 }, { id: 'alpha2', name: 'Alpha and Omega', baseCost: 1e157, baseEffect: { type: 'cps', value: 8e52 }, count: 0, costMultiplier: 1.15 }, { id: 'transcendence2', name: 'Higher Transcendence', baseCost: 1e160, baseEffect: { type: 'cps', value: 6e53 }, count: 0, costMultiplier: 1.15 }, { id: 'divine2', name: 'Divine Intervention', baseCost: 1e163, baseEffect: { type: 'cps', value: 4e54 }, count: 0, costMultiplier: 1.15 }, { id: 'celestial2', name: 'Celestial Alignment', baseCost: 1e166, baseEffect: { type: 'cps', value: 3e55 }, count: 0, costMultiplier: 1.15 }, { id: 'cosmic2', name: 'Cosmic Expansion', baseCost: 1e169, baseEffect: { type: 'cps', value: 2e56 }, count: 0, costMultiplier: 1.15 }, { id: 'universal2', name: 'Universal Collapse', baseCost: 1e172, baseEffect: { type: 'cps', value: 1e57 }, count: 0, costMultiplier: 1.15 }, { id: 'omnipresent2', name: 'Omnipresent Void', baseCost: 1e175, baseEffect: { type: 'cps', value: 8e57 }, count: 0, costMultiplier: 1.15 }, { id: 'eternal2', name: 'Eternal Cycle', baseCost: 1e178, baseEffect: { type: 'cps', value: 6e58 }, count: 0, costMultiplier: 1.15 }, { id: 'infinite2', name: 'Infinite Horizon', baseCost: 1e181, baseEffect: { type: 'cps', value: 4e59 }, count: 0, costMultiplier: 1.15 }, { id: 'absolutezero2', name: 'Absolute Maximum', baseCost: 1e184, baseEffect: { type: 'cps', value: 3e60 }, count: 0, costMultiplier: 1.15 }, { id: 'ultimate2', name: 'Ultimate Singularity', baseCost: 1e187, baseEffect: { type: 'cps', value: 2e61 }, count: 0, costMultiplier: 1.15 }, { id: 'final2', name: 'The True Final Click', baseCost: 1e190, baseEffect: { type: 'cps', value: 1e62 }, count: 0, costMultiplier: 1.15 }, // Continue adding more with increasing baseCost and baseEffect values... // The number of *types* is fixed, but the number of *purchases* of each type can be massive due to scaling cost. // The rendering logic ensures you only see the next available ones, giving the "scroll forever" feel. ]; function formatNumber(num) { if (num === 0) return '0'; // Use BigInt for calculations if numbers exceed Number.MAX_SAFE_INTEGER // However, direct BigInt display formatting is complex. // For simplicity, we'll rely on JS Number's exponential notation for huge numbers. // If num is already Infinity or too large for standard formatting: if (!isFinite(num) || Math.abs(num) > 1e308) { return num.toExponential(2); } if (Math.abs(num) < 1000) return num.toFixed(0); const suffixes = ["", "K", "M", "B", "T", "Qa", "Qi", "Sx", "Sp", "Oc", "No", "Dc", "Ud", "Dd", "Td", "Qad", "Qid", "Sxd", "Spd", "Ocd", "Nod", "Vig", "Cen", "Unvig", "Dovig", "Trevig", "Quattuorvig", "Quinvig", "Sexvig", "Septenvig", "Octovig", "Nonvig", "Trig", "Untrig", "Dodetrig", "Tredetrig", "Quattuordetrig", "Quindetrig", "Sexdetrig", "Septendetrig", "Octodetrig", "Nonadetrig", "Quadrag", "Unquadrag", "Duadrag", "Trequadrag", "Quattuorquadrag", "Quinquadrag", "Sexquadrag", "Septenquadrag", "Octoquadrag", "Nonaquadrag", "Quinquag", "Unquinquag", "Duquinquag", "Trequinquag", "Quattuorquinquag", "Quinquinquag", "Sexquinquag", "Septenquinquag", "Octoquinquag", "Nonaquinquag", "Sexag", "Unsexag", "Dosexag", "Tresexag", "Quattuorsexag", "Quinsexag", "Sexsexag", "Septensexag", "Octosexag", "Nonasexag", "Septuag", "Unseptuag", "Doseptuag", "Treseptuag", "Quattuorseptuag", "Quinseptuag", "Sexseptuag", "Septenseptuag", "Octoseptuag", "Nonaseptuag", "Octog", "Unoctog", "Duoctog", "Trioctog", "Quattuoroctog", "Quinoctog", "Sexoctog", "Septenoctog", "Octooctog", "Nonaoctog", "Nonag", "Unnonag", "Duononag", "Trenonag", "Quattuornonag", "Quinnonag", "Sexnonag", "Septennonag", "Octononag", "Nonanonag", "Cent", "Uncent", "Ducent", "Trecent", "Quattuorcent", "Quincent", "Sexcent", "Septencent", "Octocent", "Nonacent", "Mill"]; // Extended suffixes const order = Math.floor(Math.log10(Math.abs(num)) / 3); if (order >= suffixes.length) { // Use scientific notation for numbers beyond defined suffixes return num.toExponential(2); } const suffix = suffixes[order]; const scaledNum = num / Math.pow(1000, order); return scaledNum.toFixed(2) + suffix; } function updateDisplay() { clicksDisplay.textContent = formatNumber(clicks); cpsDisplay.textContent = formatNumber(clicksPerSecond); renderUpgrades(); // Re-render upgrades to show newly affordable ones } function click() { clicks += clicksPerClick; updateDisplay(); } function getUpgradeCost(upgrade)