Jeu de clic HTML avec renaissance, améliorations et JavaScript

Ouvrir dans l'éditeur Publiez votre code

Recommandé

25 July 2025

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

Jeu de clic HTML avec renaissance, améliorations et JavaScript

Recommandé

Le safari de microinteraction

Un code de M. Duck

Diaporama de parallaxe

HTML

CSS

JS

Recommandé

Le safari de microinteraction

Un code de M. Duck

Diaporama de parallaxe

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS