Космический кликер

by WildPilot47
173 lines4.4 KB
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Космический кликер</title>
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <style>
      :root {
        --bg-color: #1a1a2e;
        --text-color: #ffffff;
        --accent: #0f3460;
        --btn-color: #e94560;
      }
      body {
        background-color: var(--bg-color);
        color: var(--text-color);
        font-family: sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        margin: 0;
        user-select: none;
      }
      h1 { margin: 10px 0; }
      .stats {
        font-size: 24px;
        margin-bottom: 30px;
        text-align: center;
      }
      .ship {
        width: 160px;
        height: 160px;
        background: radial-gradient(circle at 50% 50%, #ff4d4d, #c00000);
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 0 20px rgba(233, 69, 96, 0.5);
        transition: transform 0.1s;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        color: white;
        border: 4px solid #fff;
      }
      .ship:active { transform: scale(0.95); }
      .shop {
        margin-top: 40px;
        width: 100%;
        max-width: 320px;
      }
      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--accent);
        padding: 12px;
        margin-bottom: 8px;
        border-radius: 8px;
      }
      button {
        background: var(--btn-color);
        border: none;
        color: white;
        padding: 8px 16px;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
      }
      button:disabled {
        background: #555;
        cursor: not-allowed;
      }
      #close-btn {
        margin-top: 20px;
        background: transparent;
        color: #aaa;
        border: 1px solid #555;
      }
    </style>
  </head>
  <body>
    <h1>🚀 Космический кликер</h1>

    <div class="stats">
      Очки: <span id="score">0</span><br>
      За клик: <span id="per-click">1</span>
    </div>

    <div class="ship" id="ship">🚀</div>

    <div class="shop">
      <div class="item">
        <span>+1 за клик</span>
        <div>
          <span id="cost-click">10</span> очков
          <button onclick="buy('click')">Купить</button>
        </div>
      </div>
      <div class="item">
        <span>Авто +1 в сек</span>
        <div>
          <span id="cost-auto">50</span> очков
          <button onclick="buy('auto')">Купить</button>
        </div>
      </div>
    </div>

    <button id="close-btn">Закрыть игру</button>

    <script>
      const tg = window.Telegram.WebApp;
      tg.ready();

      let score = 0;
      let perClick = 1;
      let autoPerSec = 0;

      const scoreEl = document.getElementById('score');
      const perClickEl = document.getElementById('per-click');
      const costClickEl = document.getElementById('cost-click');
      const costAutoEl = document.getElementById('cost-auto');

      let costClick = 10;
      let costAuto = 50;

      function updateUI() {
        scoreEl.textContent = score;
        perClickEl.textContent = perClick;
        costClickEl.textContent = costClick;
        costAutoEl.textContent = costAuto;
      }

      document.getElementById('ship').addEventListener('click', () => {
        score += perClick;
        updateUI();
        if (tg.HapticFeedback) {
          tg.HapticFeedback.impactOccurred('light');
        }
      });

      function buy(type) {
        if (type === 'click') {
          if (score >= costClick) {
            score -= costClick;
            perClick++;
            costClick = Math.floor(costClick * 1.5);
            updateUI();
          }
        } else if (type === 'auto') {
          if (score >= costAuto) {
            score -= costAuto;
            autoPerSec++;
            costAuto = Math.floor(costAuto * 1.5);
            updateUI();
          }
        }
      }

      setInterval(() => {
        if (autoPerSec > 0) {
          score += autoPerSec;
          updateUI();
        }
      }, 1000);

      document.getElementById('close-btn').addEventListener('click', () => {
        tg.close();
      });
    </script>
  </body>
</html>
Game Source: Космический кликер

Creator: WildPilot47
Libraries: none
Complexity: moderate (173 lines, 4.4 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: game-wildpilot47" to link back to the original. Then publish at arcadelab.ai/publish.