Jeu de clic avec améliorations et renaissances

971 iroger7

Ouvrir dans l'éditeur Publiez votre code

Jeu de clic avec améliorations et renaissances

Recommandé

25 June 2025

Un code de Mete

22 December 2025

Code d'intégration HTML5 du jeu Geometry Dash Lite

28 February 2023

Animation de texte avec glitches

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>

CSS