Jeu de clic avec améliorations et renaissances

Ouvrir dans l'éditeur Publiez votre code

Recommandé

22 June 2025

Exemple de formulaire de connexion HTML

16 November 2024

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

Jeu de clic avec améliorations et renaissances

Recommandé

Exemple de formulaire de connexion HTML

Carte de dégradé HTML

Barre de recherche CSS

HTML

CSS

JS

Recommandé

Exemple de formulaire de connexion HTML

Carte de dégradé HTML

Barre de recherche CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS