Jeu de type « clicker » avec système d'améliorations et de renaissance

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

19 November 2024

Modèle de formulaire de connexion HTML CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ultimate Clicker Game (Escalating Rebirth)</title>
  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', Arial, sans-serif;
      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      min-height: 100vh;
      color: #fff;
      overflow-x: hidden;
    }
    .container {
      width: 90%;
      max-width: 1200px;
      margin: 32px auto;
      background: rgba(0,0,0,0.25);
      border-radius: 18px;
      box-shadow: 0 4px 32px rgba(30,30,80,0.14);
      padding: 32px 24px;
    }
    .stats {
      font-size: 1.25em;
      margin-bottom: 20px;
      display: flex;
      gap: 40px;
      flex-wrap: wrap;
    }
    .click-btn {
      transition: 0.2s;
      margin: 20px 0;
      padding: 32px 56px;
      font-size: 2.5em;
      border-radius: 50px;
      box-shadow: 0 8px 24px #0004;
      border: none;
      color: #fff;
      background: linear-gradient(90deg, #ff6a00 0%, #ee0979 100%);
      cursor: pointer;
      font-weight: bold;
      outline: none;
      will-change: transform;
      user-select: none;
      position: relative;
      overflow: hidden;
    }
    .click-btn:active {
      transform: scale(0.96) rotate(-1deg);
      filter: brightness(1.07);
    }
    .tabs {
      display: flex;
      gap: 12px;
      margin-bottom: 16px;
    }
    .tab-btn {
      background: #fff2;
      border: none;
      padding: 10px 26px;
      font-size: 1.15em;
      border-radius: 8px 8px 0 0;
      color: #fff;
      cursor: pointer;
      outline: none;
      transition: 0.12s;
      font-weight: 500;
    }
    .tab-btn.active {
      background: #fff9;
      color: #2575fc;
      font-weight: bold;
    }
    .upgrades, .rebirth-upgrades {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 18px;
      margin-bottom: 24px;
    }
    .upgrade, .rebirth-upgrade {
      background: #fff1;
      border-radius: 10px;
      padding: 13px 17px 10px 17px;
      box-shadow: 0 2px 12px #0002;
      position: relative;
      min-height: 85px;
      transition: box-shadow 0.2s, background 0.15s;
      border: 2px solid transparent;
      opacity: 0.92;
      overflow: hidden;
    }
    .upgrade.owned, .rebirth-upgrade.owned {
      border-color: #5fffa3;
      background: rgba(90,255,163,0.13);
      opacity: 1;
    }
    .upgrade .buy-btn, .rebirth-upgrade .buy-btn {
      margin-top: 6px;
      background: linear-gradient(90deg, #f7971e 0%, #ffd200 100%);
      color: #222;
      border: none;
      padding: 7px 18px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 1em;
      font-weight: 600;
      box-shadow: 0 2px 12px #0002;
      transition: 0.13s;
    }
    .upgrade .buy-btn:disabled, .rebirth-upgrade .buy-btn:disabled {
      background: #bbb;
      color: #666;
      cursor: not-allowed;
    }
    .rebirth-section {
      background: #fff2;
      border-radius: 10px;
      padding: 16px 18px 12px 18px;
      margin-bottom: 24px;
      box-shadow: 0 2px 12px #0002;
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    .rebirth-btn {
      background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);
      color: #222;
      border: none;
      padding: 13px 32px;
      border-radius: 8px;
      font-size: 1.4em;
      cursor: pointer;
      font-weight: bold;
      box-shadow: 0 2px 12px #0003;
      transition: 0.15s;
      outline: none;
    }
    .rebirth-btn:disabled {
      background: #bbb;
      color: #666;
      cursor: not-allowed;
    }
    .rebirth-tokens {
      font-size: 1.2em;
      font-weight: bold;
      color: #f7f78a;
      margin-left: 18px;
    }
    .shine {
      position: absolute;
      top: -60px;
      left: -60px;
      width: 220px;
      height: 220px;
      background: radial-gradient(circle at 70% 30%, #fff8 0%, #fff0 70%);
      transform: rotate(18deg);
      opacity: 0.3;
      pointer-events: none;
      transition: opacity 0.5s;
      z-index: 0;
      will-change: opacity;
    }
    .upgrade.owned .shine, .rebirth-upgrade.owned .shine {
      opacity: 0.7;
      transition: opacity 0.5s;
      filter: blur(1px);
    }
    @media (max-width: 800px) {
      .container { padding: 10px; }
      .upgrades, .rebirth-upgrades { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="stats">
      <div>Clicks: <span id="clicks">0</span></div>
      <div>Clicks per Click: <span id="cpc">1</span></div>
      <div>Clicks per Second: <span id="cps">0</span></div>
      <div>Rebirth Tokens: <span id="rebirthTokens">0</span></div>
      <div>Rebirths: <span id="rebirths">0</span></div>
    </div>
    <button class="click-btn" id="clickBtn">
      <span id="clickBtnText">CLICK!</span>
    </button>
    <div class="tabs">
      <button class="tab-btn active" data-tab="upgrades">Normal Upgrades</button>
      <button class="tab-btn" data-tab="rebirth">Rebirth Upgrades</button>
    </div>
    <div id="upgradesTab">
      <div class="upgrades" id="upgrades"></div>
    </div>
    <div id="rebirthTab" style="display:none">
      <div class="rebirth-section">
        <span style="font-size:1.1em;">Rebirth resets your clicks and upgrades, but gives you <b>rebirth tokens</b>! The more clicks you have, the more tokens you get at once!</span>
        <button class="rebirth-btn" id="rebirthBtn">Rebirth</button>
        <span class="rebirth-tokens">
          Next Rebirth: <span id="rebirthCost">100000</span> Clicks 
          (<span id="potentialTokens">0</span> tokens if rebirth now)
        </span>
      </div>
      <div class="rebirth-upgrades" id="rebirthUpgrades"></div>
    </div>
  </div>
  <script>
    // Parameters for scaling
    const NUM_NORMAL_UPGRADES = 670;
    const NUM_REBIRTH_UPGRADES = 670;
    const BASE_UPGRADE_COST = 10;
    const UPGRADE_COST_MULT = 1.15;
    const BASE_UPGRADE_POWER = 1;
    const UPGRADE_POWER_MULT = 1.10;

const BASE_REBIRTH_COST = 100000;
    const REBIRTH_COST_MULT = 2.3;
    const BASE_REBIRTH_UPGRADE_COST = 5;
    const REBIRTH_UPGRADE_COST_MULT = 1.17;
    const BASE_REBIRTH_UPGRADE_POWER = 1.5;
    const REBIRTH_UPGRADE_POWER_MULT = 1.08;

// Game state
    let clicks = 0;
    let cpc = 1;
    let cps = 0;
    let rebirthTokens = 0;
    let rebirths = 0;
    let nextRebirthCost = BASE_REBIRTH_COST;
    let upgradesOwned = Array(NUM_NORMAL_UPGRADES).fill(0);
    let rebirthUpgradesOwned = Array(NUM_REBIRTH_UPGRADES).fill(0);

// DOM references
    const clicksSpan = document.getElementById('clicks');
    const cpcSpan = document.getElementById('cpc');
    const cpsSpan = document.getElementById('cps');
    const rebirthTokensSpan = document.getElementById('rebirthTokens');
    const rebirthsSpan = document.getElementById('rebirths');
    const clickBtn = document.getElementById('clickBtn');
    const clickBtnText = document.getElementById('clickBtnText');
    const upgradesDiv = document.getElementById('upgrades');
    const rebirthUpgradesDiv = document.getElementById('rebirthUpgrades');
    const rebirthBtn = document.getElementById('rebirthBtn');
    const rebirthCostSpan = document.getElementById('rebirthCost');
    const potentialTokensSpan = document.getElementById('potentialTokens');
    const tabs = document.querySelectorAll('.tab-btn');
    const upgradesTab = document.getElementById('upgradesTab');
    const rebirthTab = document.getElementById('rebirthTab');

// Effects
    function animateClick() {
      clickBtnText.style.transform = 'scale(1.15)';
      setTimeout(() => {
        clickBtnText.style.transform = '';
      }, 120);
    }

// Upgrade creation
    function createUpgrades() {
      upgradesDiv.innerHTML = '';
      for(let i=0;i<NUM_NORMAL_UPGRADES;i++) {
        const cost = Math.floor(BASE_UPGRADE_COST * Math.pow(UPGRADE_COST_MULT, i));
        const power = Math.floor(BASE_UPGRADE_POWER * Math.pow(UPGRADE_POWER_MULT, i));
        const isCps = i % 2 === 1; // Odd: CPS, Even: CPC
        const upgrade = document.createElement('div');
        upgrade.className = 'upgrade';
        upgrade.innerHTML = `
          <div class="shine"></div>
          <b>${isCps ? 'Auto Clicker' : 'Click Power'} #${i+1}</b><br/>
          +${power} ${isCps ? 'Clicks/sec' : 'Clicks/click'}<br/>
          <span>Cost: <b>${cost}</b> Clicks</span><br/>
          <button class="buy-btn" id="buyUpgrade${i}">Buy</button>
        `;
        upgradesDiv.appendChild(upgrade);
        document.getElementById(`buyUpgrade${i}`).onclick = () => buyUpgrade(i, cost, power, isCps);
      }
    }
    function createRebirthUpgrades() {
      rebirthUpgradesDiv.innerHTML = '';
      for(let i=0;i<NUM_REBIRTH_UPGRADES;i++) {
        const cost = Math.floor(BASE_REBIRTH_UPGRADE_COST * Math.pow(REBIRTH_UPGRADE_COST_MULT, i));
        const power = (BASE_REBIRTH_UPGRADE_POWER * Math.pow(REBIRTH_UPGRADE_POWER_MULT, i)).toFixed(2);
        const isCps = i % 2 === 1;
        const upgrade = document.createElement('div');
        upgrade.className = 'rebirth-upgrade';
        upgrade.innerHTML = `
          <div class="shine"></div>
          <b>${isCps ? 'Auto Clicker Multiplier' : 'Click Power Multiplier'} #${i+1}</b><br/>
          x${power} ${isCps ? 'CPS' : 'CPC'}<br/>
          <span>Cost: <b>${cost}</b> Tokens</span><br/>
          <button class="buy-btn" id="buyRebirthUpgrade${i}">Buy</button>
        `;
        rebirthUpgradesDiv.appendChild(upgrade);
        document.getElementById(`buyRebirthUpgrade${i}`).onclick = () => buyRebirthUpgrade(i, cost, power, isCps);
      }
    }

// Tab switching
    tabs.forEach(tab=>{
      tab.onclick = function() {
        tabs.forEach(t=>t.classList.remove('active'));
        this.classList.add('active');
        if(this.dataset.tab==="upgrades") {
          upgradesTab.style.display = '';
          rebirthTab.style.display = 'none';
        } else {
          upgradesTab.style.display = 'none';
          rebirthTab.style.display = '';
        }
      }
    });

// Buying upgrades
    function buyUpgrade(i, cost, power, isCps) {
      if(clicks >= cost) {
        clicks -= cost;
        upgradesOwned[i]++;
        document.getElementsByClassName('upgrade')[i].classList.add('owned');
        if(isCps) cps += power;
        else cpc += power;
        updateStats();
      }
    }
    function buyRebirthUpgrade(i, cost, power, isCps) {
      if(rebirthTokens >= cost) {
        rebirthTokens -= cost;
        rebirthUpgradesOwned[i]++;
        document.getElementsByClassName('rebirth-upgrade')[i].classList.add('owned');
        updateStats();
      }
    }

// Click handler
    clickBtn.onclick = () => {
      clicks += getTotalCpc();
      animateClick();
      updateStats();
    };

// Rebirth handler
    rebirthBtn.onclick = () => {
      const tokensEarned = Math.floor(clicks / nextRebirthCost);
      if(tokensEarned >= 1) {
        rebirths++;
        rebirthTokens += tokensEarned;
        clicks = 0;
        cpc = 1;
        cps = 0;
        upgradesOwned = Array(NUM_NORMAL_UPGRADES).fill(0);
        nextRebirthCost = Math.floor(BASE_REBIRTH_COST * Math.pow(REBIRTH_COST_MULT, rebirths));
        createUpgrades();
        updateStats();
      }
    };

// Autoclicking
    setInterval(() => {
      clicks += getTotalCps() / 10;
      updateStats();
    }, 100);

// Update all stats
    function updateStats() {
      clicks = Math.floor(clicks);
      clicksSpan.textContent = clicks;
      cpcSpan.textContent = getTotalCpc();
      cpsSpan.textContent = getTotalCps();
      rebirthTokensSpan.textContent = rebirthTokens;
      rebirthsSpan.textContent = rebirths;
      rebirthCostSpan.textContent = nextRebirthCost;
      // Show how many tokens you'd get if you rebirth now
      const tokens = Math.floor(clicks / nextRebirthCost);
      potentialTokensSpan.textContent = tokens;
      // Enable/disable rebirth button
      rebirthBtn.disabled = tokens < 1;
      // Enable/disable upgrade buttons
      document.querySelectorAll('.upgrade').forEach((div,i)=>{
        const cost = Math.floor(BASE_UPGRADE_COST * Math.pow(UPGRADE_COST_MULT, i));
        div.querySelector('.buy-btn').disabled = clicks < cost;
        if(upgradesOwned[i]) div.classList.add('owned');
      });
      document.querySelectorAll('.rebirth-upgrade').forEach((div,i)=>{
        const cost = Math.floor(BASE_REBIRTH_UPGRADE_COST * Math.pow(REBIRTH_UPGRADE_COST_MULT, i));
        div.querySelector('.buy-btn').disabled = rebirthTokens < cost;
        if(rebirthUpgradesOwned[i]) div.classList.add('owned');
      });
    }

// Calculate total click power (base + upgrades + rebirth multipliers)
    function getTotalCpc() {
      let base = 1;
      for(let i=0;i<NUM_NORMAL_UPGRADES;i++) {
        if(i%2===0) base += upgradesOwned[i] * Math.floor(BASE_UPGRADE_POWER * Math.pow(UPGRADE_POWER_MULT, i));
      }
      let mult = 1;
      for(let i=0;i<NUM_REBIRTH_UPGRADES;i++) {
        if(i%2===0) mult *= Math.pow((BASE_REBIRTH_UPGRADE_POWER * Math.pow(REBIRTH_UPGRADE_POWER_MULT, i)), rebirthUpgradesOwned[i]);
      }
      return Math.floor(base * mult);
    }
    function getTotalCps() {
      let base = 0;
      for(let i=0;i<NUM_NORMAL_UPGRADES;i++) {
        if(i%2===1) base += upgradesOwned[i] * Math.floor(BASE_UPGRADE_POWER * Math.pow(UPGRADE_POWER_MULT, i));
      }
      let mult = 1;
      for(let i=0;i<NUM_REBIRTH_UPGRADES;i++) {
        if(i%2===1) mult *= Math.pow((BASE_REBIRTH_UPGRADE_POWER * Math.pow(REBIRTH_UPGRADE_POWER_MULT, i)), rebirthUpgradesOwned[i]);
      }
      return Math.floor(base * mult);
    }

// Initial population
    createUpgrades();
    createRebirthUpgrades();
    updateStats();
  </script>
</body>
</html>

Jeu de type « clicker » avec système d'améliorations et de renaissance

Recommandé

code de test de l'iPhone 16

Bulles de coeur

Modèle de formulaire de connexion HTML CSS

HTML

CSS

JS

Recommandé

code de test de l'iPhone 16

Bulles de coeur

Modèle de formulaire de connexion HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS