Jeu Super Clicker

362 Lspath940

Ouvrir dans l'éditeur Publiez votre code

Recommandé

15 December 2023

Jeu de pile JavaScript

29 April 2026

jeux amusants

28 May 2026

Modèle HTML de jeux débloqués avec prise en charge du plein écran

HTML

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Super Clicker Game</title>
  <style>
    /* General body styling */
    body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #f0f8ff;
      margin: 0;
      padding: 20px;
    }

h1 {
      color: #333;
    }

#clicker-container {
      text-align: center;
      margin-top: 50px;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 10px;
      box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
      width: 300px;
    }

button {
      font-size: 18px;
      padding: 15px 30px;
      cursor: pointer;
      margin: 10px;
      border-radius: 8px;
      border: none;
      color: white;
      background-color: #007bff;
      transition: background-color 0.3s;
    }

button:hover {
      background-color: #0056b3;
    }

#stats {
      margin-top: 20px;
    }

.upgrade {
      display: block;
      margin: 10px 0;
      font-size: 16px;
      background-color: #28a745;
    }

.upgrade:hover {
      background-color: #1e7e34;
    }
  </style>
</head>
<body>
  <h1>Super Clicker Game</h1>
  <div id="clicker-container">
    <p>Clicks: <span id="clicks">0</span></p>
    <button id="click-button">Click Me!</button>

<div id="stats">
      <p>Clicks per second (CPS): <span id="cps">0</span></p>
    </div>

<h3>Upgrades</h3>
    <button class="upgrade" id="auto-clicker">Buy Auto-Clicker (+1 CPS) - Cost: <span id="auto-cost">50</span></button>
    <button class="upgrade" id="double-click">Buy Double Click (+1 Click per click) - Cost: <span id="double-cost">100</span></button>
  </div>

// Upgrade costs
    let autoClickerCost = 50;
    let doubleClickCost = 100;

// HTML element references
    const clickDisplay = document.getElementById('clicks');
    const cpsDisplay = document.getElementById('cps');
    const clickButton = document.getElementById('click-button');
    const autoClickButton = document.getElementById('auto-clicker');
    const doubleClickButton = document.getElementById('double-click');
    const autoCostDisplay = document.getElementById('auto-cost');
    const doubleCostDisplay = document.getElementById('double-cost');

// Click button logic
    clickButton.addEventListener('click', () => {
      clicks += clicksPerClick;
      updateDisplay();
    });

// Auto-clicker purchase
    autoClickButton.addEventListener('click', () => {
      if (clicks >= autoClickerCost) {
        clicks -= autoClickerCost;
        cps++;
        autoClickerCost = Math.floor(autoClickerCost * 1.5); // Increase cost
        autoCostDisplay.textContent = autoClickerCost;
        updateDisplay();
      }
    });

// Double click purchase
    doubleClickButton.addEventListener('click', () => {
      if (clicks >= doubleClickCost) {
        clicks -= doubleClickCost;
        clicksPerClick++;
        doubleClickCost = Math.floor(doubleClickCost * 2); // Increase cost
        doubleCostDisplay.textContent = doubleClickCost;
        updateDisplay();
      }
    });

// Auto-click logic
    setInterval(() => {
      clicks += cps;
      updateDisplay();
    }, 1000);

// Update display function
    function updateDisplay() {
      clickDisplay.textContent = clicks;
      cpsDisplay.textContent = cps;
    }

updateDisplay(); // Initial display
  </script>
</body>
</html>

CSS