Clicker Game with Upgrades and Rebirths

Open In Editor Publish Your Code

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

Clicker Game with Upgrades and Rebirths

Recommended

Tennis Game

HTML Tabs with Close Button

Zombie City Defender Game HTML Canvas

HTML

CSS

JS

Recommended

Tennis Game

HTML Tabs with Close Button

Zombie City Defender Game HTML Canvas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS