Clicker Game HTML with Rebirth, Upgrades, JavaScript

Open In Editor Video 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

HTML Landing Page Template: Travel Agency

HTML Animated Login Form Example

Modern Glassmorphism Login Form in html, css

HTML

CSS

JS

Recommended

HTML Landing Page Template: Travel Agency

HTML Animated Login Form Example

Modern Glassmorphism Login Form in html, css

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS