Jogo Clicker com Melhorias e Renascimentos

Abrir no Editor Publique Seu Código

Recomendado

28 November 2024

Comentário de espaço reservado para código HTML

20 June 2025

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Animated Clicker Game with Rebirth</title>
  <style>
    body { margin: 0; font-family: sans-serif; background: #232946; color: #fff; }
    #container { display: flex; height: 100vh; }
    #upgrades, #rebirthUpgrades {
      width: 260px; background: #121629; padding: 16px; box-sizing: border-box; overflow-y: auto;
      display: flex; flex-direction: column; gap: 12px;
    }
    #rebirthUpgrades { background: #22223b; }
    #game {
      flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
      position: relative;
    }
    #clickBtn {
      width: 140px; height: 140px; border-radius: 50%; background: linear-gradient(145deg, #4f8ffb, #7fd6fc);
      border: none; font-size: 2.5em; color: #fff; box-shadow: 0 8px 30px #4f8ffb70;
      cursor: pointer; transition: transform 0.05s;
      position: relative; overflow: hidden;
    }
    #clickBtn:active { transform: scale(0.93); }
    .pop { position: absolute; pointer-events: none; font-size: 1.4em; animation: pop 0.8s forwards; }
    @keyframes pop {
      0% { opacity: 1; transform: translateY(0) scale(1);}
      100% { opacity: 0; transform: translateY(-60px) scale(1.5);}
    }
    .upgrade, .rebirth-upgrade {
      background: #282a36; padding: 8px 12px; border-radius: 6px; cursor: pointer; transition: background 0.2s;
      display: flex; justify-content: space-between; align-items: center; font-size: 1em;
    }
    .upgrade:hover, .rebirth-upgrade:hover { background: #434670; }
    .disabled { background: #353946 !important; color: #888 !important; cursor: default; }
    #stats {
      margin-top: 40px; font-size: 1.2em; text-align: center;
    }
    #rebirthSection {
      margin-top: 30px; background: #232946; padding: 16px 24px; border-radius: 10px;
    }
    #rebirthBtn {
      background: #f72c25; color: #fff; border: none; border-radius: 8px; padding: 12px 28px;
      font-size: 1.1em; cursor: pointer; margin-top: 8px; box-shadow: 0 2px 10px #f72c2530;
      transition: background 0.2s;
    }
    #rebirthBtn:disabled { background: #442b29; color: #bbb; cursor: default; }
    /* Scrollbars */
    #upgrades, #rebirthUpgrades { scrollbar-width: thin; scrollbar-color: #4f8ffb #232946; }
    #upgrades::-webkit-scrollbar, #rebirthUpgrades::-webkit-scrollbar { width: 6px; }
    #upgrades::-webkit-scrollbar-thumb, #rebirthUpgrades::-webkit-scrollbar-thumb { background: #4f8ffb; border-radius: 3px; }
  </style>
</head>
<body>
  <div id="container">
    <div id="upgrades"></div>
    <div id="game">
      <button id="clickBtn">Click!</button>
      <div id="stats"></div>
      <div id="rebirthSection">
        <div>
          <b>Rebirths:</b> <span id="rebirths">0</span> |
          <b>Tokens:</b> <span id="tokens">0</span>
        </div>
        <div>
          <b>Clicks needed:</b> <span id="rebirthCost">1000</span>
        </div>
        <button id="rebirthBtn" disabled>Rebirth!</button>
      </div>
    </div>
    <div id="rebirthUpgrades"></div>
  </div>
  <script>
    // Game State
    let clicks = 0, clicksPerClick = 1, rebirths = 0, tokens = 0;
    let upgrades = Array.from({length: 15}, (_, i) => ({
      name: `Upgrade ${i+1}`, level: 0, baseCost: 10 * (i+1), cost: 10 * (i+1), 
      effect: 1 + i, desc: `+${1 + i} clicks/click`
    }));
    let rebirthUpgrades = Array.from({length: 15}, (_, i) => ({
      name: `Rebirth Upgrade ${i+1}`, level: 0, baseCost: 1 + i, cost: 1 + i, 
      effect: 2 + i, desc: `+${2 + i} clicks/click (permanently, from rebirth)`
    }));
    let rebirthCost = 1000;

const upgradesDiv = document.getElementById('upgrades');
    const rebirthUpgradesDiv = document.getElementById('rebirthUpgrades');
    const statsDiv = document.getElementById('stats');
    const clickBtn = document.getElementById('clickBtn');
    const rebirthBtn = document.getElementById('rebirthBtn');
    const rebirthsSpan = document.getElementById('rebirths');
    const tokensSpan = document.getElementById('tokens');
    const rebirthCostSpan = document.getElementById('rebirthCost');

// Click Animation
    function animateEffect(text, btn, color="#fff") {
      const pop = document.createElement("div");
      pop.className = "pop";
      pop.textContent = text;
      pop.style.left = (btn.offsetLeft + btn.offsetWidth/2 - 20 + (Math.random() * 40 - 20)) + "px";
      pop.style.top = (btn.offsetTop + btn.offsetHeight/2 - 10) + "px";
      pop.style.color = color;
      pop.style.fontWeight = "bold";
      document.body.appendChild(pop);
      setTimeout(() => pop.remove(), 800);
    }

// Click Handler
    clickBtn.addEventListener('click', () => {
      clicks += clicksPerClick;
      updateUpgrades(); updateStats();
      animateEffect(`+${clicksPerClick}`, clickBtn);
      // Fancy ripple effect
      const ripple = document.createElement("span");
      ripple.style.position = "absolute";
      ripple.style.background = "rgba(255,255,255,0.5)";
      ripple.style.borderRadius = "50%";
      ripple.style.width = ripple.style.height = "120px";
      ripple.style.left = "10px"; ripple.style.top = "10px";
      ripple.style.transform = "scale(0)";
      ripple.style.animation = "ripple 0.4s linear";
      ripple.style.pointerEvents = "none";
      clickBtn.appendChild(ripple);
      ripple.addEventListener("animationend", () => ripple.remove());
    });
    // Ripple animation
    const style = document.createElement('style');
    style.innerHTML = `
      @keyframes ripple {
        to { transform: scale(1.6); opacity: 0; }
      }
    `;
    document.head.appendChild(style);

// Rebirth logic
    rebirthBtn.addEventListener('click', () => {
      if (clicks >= rebirthCost) {
        clicks = 0;
        clicksPerClick = 1;
        upgrades.forEach(u => { u.level = 0; u.cost = u.baseCost; });
        rebirths += 1;
        tokens += 1;
        rebirthCost = Math.floor(rebirthCost * 2.5);
        updateUpgrades(); updateRebirthUpgrades(); updateStats();
        animateEffect("REBIRTH!", clickBtn, "#fff700");
      }
    });

// Initial render
    updateUpgrades();
    updateRebirthUpgrades();
    updateStats();

// Responsive layout
    window.addEventListener('resize', () => {
      // Could adjust font sizes/widths here if desired
    });
  </script>
</body>
</html>

Jogo Clicker com Melhorias e Renascimentos

Recomendado

Efeito de carta

Comentário de espaço reservado para código HTML

Metaverso Desconstruído

HTML

CSS

JS

Recomendado

Efeito de carta

Comentário de espaço reservado para código HTML

Metaverso Desconstruído

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS