Gioco Clicker HTML con rinascita, aggiornamenti, JavaScript

422 iroger7

Apri nell'Editor Video Pubblica il Tuo Codice

Gioco Clicker HTML con rinascita, aggiornamenti, JavaScript

Consigliato

13 January 2026

Modello HTML per il gioco WebGL Swordfight Unity

29 September 2025

Caricamento CSS con animazione e immagine di sfondo

21 October 2024

Goku contro Vegeta

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

Consigliato

Modello HTML per il gioco WebGL Swordfight Unity

Caricamento CSS con animazione e immagine di sfondo

Goku contro Vegeta

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS