Jeu de clic avec améliorations et renaissances

636 iroger7

Ouvrir dans l'éditeur Publiez votre code

Jeu de clic avec améliorations et renaissances

Recommandé

20 August 2024

Carte de retournement de prix

23 February 2026

Jeu Unity WebGL Swordfight intégré

26 August 2025

Calques d'animation CSS pour arrière-plan de la ville

HTML

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

Recommandé

Carte de retournement de prix

Jeu Unity WebGL Swordfight intégré

Calques d'animation CSS pour arrière-plan de la ville

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS