Juego Super Clicker

50 Lspath940

Abrir en el editor Video Publica tu código

Recomendado

17 December 2025

Clon del juego Geometry Dash HTML CSS JavaScript

15 December 2023

Juego de Pilas en JavaScript

10 March 2026

Juego de columpios Ragdoll: Distancia infinita, biomas

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>

Recomendado

Clon del juego Geometry Dash HTML CSS JavaScript

Juego de Pilas en JavaScript

Juego de columpios Ragdoll: Distancia infinita, biomas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS