ClickCoin - VideojuCan

by CosmicCobra59
204 lines5.7 KB
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ClickCoin - VideojuCan</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            background: #1a1a2e;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: 'Segoe UI', sans-serif;
            user-select: none;
            -webkit-user-select: none;
        }

        .game-container {
            text-align: center;
            background: #16213e;
            padding: 2rem;
            border-radius: 20px;
            border: 3px solid #f1c40f;
            box-shadow: 0 0 30px rgba(241,196,15,0.3);
        }

        .title {
            font-size: 2rem;
            color: #f1c40f;
            margin-bottom: 0.5rem;
            font-weight: bold;
        }

        .coin-display {
            font-size: 3rem;
            color: #f1c40f;
            margin: 1rem 0;
        }

        .coin-count {
            font-size: 4rem;
            font-weight: bold;
            color: #fff;
        }

        .click-btn {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: linear-gradient(135deg, #f1c40f, #f39c12);
            border: 5px solid #e67e22;
            font-size: 4rem;
            cursor: pointer;
            transition: all 0.1s;
            box-shadow: 0 10px 30px rgba(241,196,15,0.4);
            -webkit-tap-highlight-color: transparent;
        }

        .click-btn:active {
            transform: scale(0.9);
            box-shadow: 0 5px 15px rgba(241,196,15,0.6);
        }

        .shop {
            margin-top: 1.5rem;
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            justify-content: center;
        }

        .shop-item {
            background: #0f3460;
            padding: 0.8rem 1.2rem;
            border-radius: 12px;
            color: #eee;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.2s;
        }

        .shop-item:hover {
            border-color: #f1c40f;
        }

        .shop-item .cost {
            color: #f1c40f;
            font-weight: bold;
        }

        .multiplier {
            color: #2ecc71;
            font-size: 1.2rem;
            margin-top: 0.5rem;
        }

        .reset-btn {
            margin-top: 1rem;
            padding: 0.5rem 1.5rem;
            background: transparent;
            border: 2px solid #e74c3c;
            color: #e74c3c;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <div class="game-container">
        <div class="title">🪙 CLICKCOIN</div>
        <p style="color:#aaa;">Toca la moneda para ganar</p>

        <div class="coin-display">
            <span>🪙</span>
            <span class="coin-count" id="coinCount">0</span>
        </div>

        <button class="click-btn" id="clickBtn">🪙</button>

        <p class="multiplier" id="multiplierText">x1 por click</p>

        <div class="shop">
            <div class="shop-item" onclick="buyUpgrade(1)">
                <div>🔧 Mejora x2</div>
                <div class="cost">💰 <span id="cost1">10</span></div>
            </div>
            <div class="shop-item" onclick="buyUpgrade(2)">
                <div>🔧 Mejora x5</div>
                <div class="cost">💰 <span id="cost2">50</span></div>
            </div>
            <div class="shop-item" onclick="buyUpgrade(3)">
                <div>🔧 Mejora x10</div>
                <div class="cost">💰 <span id="cost3">200</span></div>
            </div>
        </div>

        <button class="reset-btn" onclick="resetGame()">🔄 Reiniciar</button>

        <p style="color:#aaa; margin-top:1rem; font-size:0.8rem;">🏢 VideojuCan</p>
    </div>

    <script>
        let coins = 0;
        let multiplier = 1;
        let upgradeLevel = 0;
        const maxUpgrade = 3;

        const costBase = [10, 50, 200];

        function updateDisplay() {
            document.getElementById('coinCount').textContent = coins;
            document.getElementById('multiplierText').textContent = 'x' + multiplier + ' por click';

            for (let i = 1; i <= maxUpgrade; i++) {
                const costEl = document.getElementById('cost' + i);
                if (upgradeLevel >= i) {
                    costEl.parentElement.parentElement.style.opacity = '0.4';
                    costEl.textContent = '✅';
                } else {
                    costEl.parentElement.parentElement.style.opacity = '1';
                    costEl.textContent = costBase[i - 1];
                }
            }
        }

        function clickCoin() {
            coins += multiplier;
            updateDisplay();
        }

        function buyUpgrade(level) {
            if (upgradeLevel >= level) return; // ya comprada
            if (level > 1 && upgradeLevel < level - 1) return; // comprar en orden
            if (coins < costBase[level - 1]) return; // no hay monedas

            coins -= costBase[level - 1];
            upgradeLevel = level;

            if (level === 1) multiplier = 2;
            if (level === 2) multiplier = 5;
            if (level === 3) multiplier = 10;

            updateDisplay();
        }

        function resetGame() {
            coins = 0;
            multiplier = 1;
            upgradeLevel = 0;
            updateDisplay();
        }

        document.getElementById('clickBtn').addEventListener('click', clickCoin);

        // Inicializar
        updateDisplay();
    </script>
</body>
</html
Game Source: ClickCoin - VideojuCan

Creator: CosmicCobra59
Libraries: none
Complexity: complex (204 lines, 5.7 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: clickcoin-videojucan-cosmiccobra59" to link back to the original. Then publish at arcadelab.ai/publish.