Clicker Game HTML with Rebirth, Upgrades, JavaScript

Open In Editor Publish Your Code

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ultimate Clicker Game with Rebirth</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            background: #222;
            color: #fff;
        }
        header, main, section {
            max-width: 900px;
            margin: auto;
        }
        header {
            background: #444;
            padding: 1rem;
            text-align: center;
            font-size: 2rem;
            letter-spacing: 2px;
        }
        .stats, .rebirth-stats {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin: 1rem 0;
            background: #333;
            padding: 1rem;
            border-radius: 8px;
        }
        #click-btn, #rebirth-btn {
            font-size: 2rem;
            padding: 1.2rem 2.8rem;
            margin: 1rem;
            background: #27ae60;
            border: none;
            border-radius: 8px;
            color: #fff;
            cursor: pointer;
            transition: background .2s;
        }
        #click-btn:disabled, #rebirth-btn:disabled {
            background: #666;
            cursor: not-allowed;
        }
        section {
            background: #292b2c;
            padding: 1rem;
            margin: 1rem 0;
            border-radius: 8px;
        }
        h2 {
            margin-top: 0;
        }
        .upgrades, .rebirth-upgrades {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 1rem;
        }
        .upgrade, .rebirth-upgrade {
            background: #222;
            border: 2px solid #666;
            border-radius: 6px;
            padding: 0.7rem;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        .upgrade button, .rebirth-upgrade button {
            margin-top: 0.5rem;
            background: #2980b9;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 0.5rem 1.2rem;
            font-size: 1rem;
            cursor: pointer;
        }
        .upgrade button:disabled, .rebirth-upgrade button:disabled {
            background: #555;
            cursor: not-allowed;
        }
        @media (max-width:600px) {
            .stats, .rebirth-stats {
                flex-direction: column;
                gap: 0.5rem;
            }
        }
    </style>
</head>
<body>
    
    <header>
        Ultimate Clicker Game
    </header>
    <main>
        
        <div class="stats" aria-label="Player Stats">
            <div>
                <strong>Clicks:</strong> <span id="clicks">0</span>
            </div>
            <div>
                <strong>Clicks per Click:</strong> <span id="perClick">1</span>
            </div>
            <div>
                <strong>Auto Click/s:</strong> <span id="autoClick">0</span>
            </div>
        </div>
        
        <div style="text-align:center;">
            <button id="click-btn" aria-label="Click!">Click!</button>
        </div>
        
        <section>
            <h2>Upgrades</h2>
            <div class="upgrades" id="upgrade-list">
                
            </div>
        </section>
        
        <section>
            <h2>Rebirth</h2>
            <div class="rebirth-stats" aria-label="Rebirth Stats">
                <div>
                    <strong>Rebirth Tokens:</strong> <span id="rebirthTokens">0</span>
                </div>
                <div>
                    <strong>Rebirths:</strong> <span id="rebirths">0</span>
                </div>
                <div>
                    <strong>Clicks Needed for Rebirth:</strong> <span id="rebirthCost">1000</span>
                </div>
            </div>
            <div style="text-align:center;">
                <button id="rebirth-btn" aria-label="Rebirth">Rebirth</button>
            </div>
            <h3>Rebirth Upgrades</h3>
            <div class="rebirth-upgrades" id="rebirth-upgrade-list">
                
            </div>
        </section>
    </main>
    
    <script>
    // Helper for formatting huge numbers
    function formatNumber(num) {
        if (num < 1000) return num.toLocaleString();
        const units = ['','K','M','B','T','Qa','Qi','Sx','Sp','Oc','No','Dc','Ud','Dd','Td','Qad','Qid','Sxd','Spd','Ocd','Nod','Vg','Uv','Dv','Tv','Qav','Qiv','Sxv','Spv','Ocv','Nov','Tg'];
        let unit = Math.floor(Math.log10(num)/3);
        let n = num / Math.pow(1000, unit);
        if (unit >= units.length) {
            return num.toExponential(2); // fallback
        }
        return n.toFixed(3) + units[unit];
    }

// Game state
    let clicks = 0;
    let clicksPerClick = 1;
    let autoClicksPerSecond = 0;
    let upgrades = [];
    let rebirthUpgrades = [];
    let rebirthTokens = 0;
    let rebirths = 0;
    let rebirthCost = 1000;

// Upgrade definitions (auto-generated)
    const UPGRADE_COUNT = 145;
    const REBIRTH_UPGRADE_COUNT = 167;

// Upgrade scaling factors
    function getUpgradeCost(i) {
        return Math.floor(10 * Math.pow(1.15, i) + (i * 25));
    }
    function getUpgradeBonus(i) {
        // Exponential scaling for click value upgrades
        return Math.round(Math.pow(1.25 + i/100, i+1));
    }
    function getAutoUpgradeBonus(i) {
        // Exponential scaling for auto clickers
        return Math.round(Math.pow(1.18 + i/100, i+1));
    }
    function getRebirthUpgradeCost(i) {
        return Math.floor(5 * Math.pow(1.18, i) + (i * 5));
    }
    function getRebirthUpgradeBonus(i) {
        // Strong exponential scaling for rebirth upgrades
        return Math.round(Math.pow(1.23 + i/125, i+2));
    }

// Upgrade objects
    for (let i = 0; i < UPGRADE_COUNT; i++) {
        let isAuto = (i % 5 === 0); // Every 5th is an auto clicker
        upgrades.push({
            id: i,
            name: isAuto ? `Auto Clicker Upgrade #${i+1}` : `Click Power Upgrade #${i+1}`,
            type: isAuto ? 'auto' : 'click',
            level: 0,
            cost: getUpgradeCost(i),
            bonus: isAuto ? getAutoUpgradeBonus(i) : getUpgradeBonus(i)
        });
    }
    for (let i = 0; i < REBIRTH_UPGRADE_COUNT; i++) {
        let isAuto = (i % 7 === 0); // Every 7th is rebirth auto clicker
        rebirthUpgrades.push({
            id: i,
            name: isAuto ? `Rebirth Auto Clicker #${i+1}` : `Rebirth Click Power #${i+1}`,
            type: isAuto ? 'auto' : 'click',
            level: 0,
            cost: getRebirthUpgradeCost(i),
            bonus: getRebirthUpgradeBonus(i)
        });
    }

// Render upgrades
    function renderUpgrades() {
        const upgradeList = document.getElementById('upgrade-list');
        upgradeList.innerHTML = '';
        upgrades.forEach((upg, idx) => {
            const div = document.createElement('div');
            div.className = 'upgrade';
            div.innerHTML = `
                <div><strong>${upg.name}</strong></div>
                <div>Level: ${upg.level}</div>
                <div>+${formatNumber(upg.bonus)} ${upg.type === 'auto' ? 'Auto Clicks/s' : 'Clicks/click'}</div>
                <div>Cost: <span>${formatNumber(upg.cost)}</span> Clicks</div>
                <button ${clicks < upg.cost ? 'disabled' : ''} data-idx="${idx}">
                    Buy
                </button>
            `;
            div.querySelector('button').onclick = function() { buyUpgrade(idx); };
            upgradeList.appendChild(div);
        });
    }
    function renderRebirthUpgrades() {
        const rebirthUpgradeList = document.getElementById('rebirth-upgrade-list');
        rebirthUpgradeList.innerHTML = '';
        rebirthUpgrades.forEach((upg, idx) => {
            const div = document.createElement('div');
            div.className = 'rebirth-upgrade';
            div.innerHTML = `
                <div><strong>${upg.name}</strong></div>
                <div>Level: ${upg.level}</div>
                <div>+${formatNumber(upg.bonus)} ${upg.type === 'auto' ? 'Auto Clicks/s' : 'Clicks/click'}</div>
                <div>Cost: <span>${formatNumber(upg.cost)}</span> Rebirth Tokens</div>
                <button ${rebirthTokens < upg.cost ? 'disabled' : ''} data-idx="${idx}">
                    Buy
                </button>
            `;
            div.querySelector('button').onclick = function() { buyRebirthUpgrade(idx); };
            rebirthUpgradeList.appendChild(div);
        });
    }

// Buy upgrade
    function buyUpgrade(idx) {
        let upg = upgrades[idx];
        if (clicks >= upg.cost) {
            clicks -= upg.cost;
            upg.level += 1;
            if (upg.type === 'click') {
                clicksPerClick += upg.bonus;
            } else {
                autoClicksPerSecond += upg.bonus;
            }
            upg.cost = Math.floor(upg.cost * 1.22 + (upg.level * 25));
            upg.bonus = upg.type === 'auto'
                ? getAutoUpgradeBonus(idx) * (upg.level + 1)
                : getUpgradeBonus(idx) * (upg.level + 1);
            updateStats();
            renderUpgrades();
        }
    }
    // Buy rebirth upgrade
    function buyRebirthUpgrade(idx) {
        let upg = rebirthUpgrades[idx];
        if (rebirthTokens >= upg.cost) {
            rebirthTokens -= upg.cost;
            upg.level += 1;
            if (upg.type === 'click') {
                clicksPerClick += upg.bonus * 10; // rebirth upgrades are even stronger
            } else {
                autoClicksPerSecond += upg.bonus * 10;
            }
            upg.cost = Math.floor(upg.cost * 1.23 + (upg.level * 25));
            upg.bonus = getRebirthUpgradeBonus(idx) * (upg.level + 1);
            updateStats();
            renderRebirthUpgrades();
        }
    }

// Handle clicking
    document.getElementById('click-btn').onclick = function() {
        clicks += clicksPerClick;
        updateStats();
        renderUpgrades();
        updateRebirthButton();
    };

// Auto clicker
    setInterval(() => {
        clicks += autoClicksPerSecond;
        updateStats();
        renderUpgrades();
        updateRebirthButton();
    }, 1000);

// Update stats
    function updateStats() {
        document.getElementById('clicks').textContent = formatNumber(clicks);
        document.getElementById('perClick').textContent = formatNumber(clicksPerClick);
        document.getElementById('autoClick').textContent = formatNumber(autoClicksPerSecond);
        document.getElementById('rebirthTokens').textContent = formatNumber(rebirthTokens);
        document.getElementById('rebirths').textContent = rebirths;
        document.getElementById('rebirthCost').textContent = formatNumber(rebirthCost);
    }

// Rebirth logic: can gain multiple rebirths at once
    function updateRebirthButton() {
        document.getElementById('rebirth-btn').disabled = clicks < rebirthCost;
    }
    document.getElementById('rebirth-btn').onclick = function() {
        let canRebirths = Math.floor(clicks / rebirthCost);
        if (canRebirths >= 1) {
            rebirths += canRebirths;
            let tokensGained = canRebirths;
            rebirthTokens += tokensGained;
            clicks -= canRebirths * rebirthCost;
            // Scale up rebirth cost for next round, exponential
            rebirthCost = Math.floor(rebirthCost * (1.35 + rebirths/100));
            // Reset progress, but keep upgrades (soft reset), or for stricter: reset upgrades (uncomment below)
            // upgrades.forEach(u => u.level = 0);
            // clicksPerClick = 1 + sum of rebirth upgrades
            // autoClicksPerSecond = sum of rebirth upgrades
            updateStats();
            renderUpgrades();
            renderRebirthUpgrades();
            updateRebirthButton();
        }
    };

// Initial render
    renderUpgrades();
    renderRebirthUpgrades();
    updateStats();
    updateRebirthButton();

</script>
</body>
</html>
```

Clicker Game HTML with Rebirth, Upgrades, JavaScript

Recommended

CSS Loading Animation with Fragment Effects

Basic HTML Three.js Template

Robux Tax Calculator HTML CSS

HTML

CSS

JS

Recommended

CSS Loading Animation with Fragment Effects

Basic HTML Three.js Template

Robux Tax Calculator HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS