Jeu Super Clicker

51 Lspath940

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

16 January 2026

Intégration de jeu Flash avec Ruffle Player

21 October 2024

Jeu de correspondance d'Halloween

13 January 2026

Chargeur de canevas de jeu HTML5 et de moteur JavaScript

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>

Recommandé

Intégration de jeu Flash avec Ruffle Player

Jeu de correspondance d'Halloween

Chargeur de canevas de jeu HTML5 et de moteur JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS