रीबर्थ, अपग्रेड और जावास्क्रिप्ट के साथ क्लिकर गेम HTML

421 iroger7

संपादक में खोलें Video अपना कोड प्रकाशित करें

रीबर्थ, अपग्रेड और जावास्क्रिप्ट के साथ क्लिकर गेम HTML

अनुशंसित

16 January 2026

फ्लैश गेम प्लेयर (रफ़ल) HTML टेम्पलेट

18 December 2025

मंकी मार्ट गेम का HTML5 स्रोत कोड

18 October 2025

होवर प्रभाव के साथ HTML बटन (WEBLEB)

HTML

```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>
```

अनुशंसित

फ्लैश गेम प्लेयर (रफ़ल) HTML टेम्पलेट

मंकी मार्ट गेम का HTML5 स्रोत कोड

होवर प्रभाव के साथ HTML बटन (WEBLEB)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS