Симулятор блогера: краткий ответ

Игру сделаем на трёх простых идеях, из которых собирается почти любой симулятор:

1. Состояние — где-то хранятся числа (сколько подписчиков в TikTok, YouTube, Telegram).
2. Событие — кнопка вызывает функцию, которая меняет число.
3. Отрисовка — после каждого изменения экран берёт числа из состояния и показывает их заново (плюс сумму).

Это буквально весь принцип. Ниже — готовая рабочая игра.

1. Код (сохрани как game.html и открой в браузере)

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Симулятор блогера</title>
<style>
  body{font-family:system-ui,Arial,sans-serif;background:#12131f;color:#fff;
       text-align:center;margin:0;padding:20px}
  .card{background:#1e2036;border-radius:16px;padding:14px;margin:12px auto;max-width:420px}
  .num{font-size:30px;font-weight:700;margin:6px 0}
  button{font-size:18px;padding:10px 14px;border:0;border-radius:10px;margin:4px;cursor:pointer}
  .up{background:#2ecc71}
  .down{background:#e74c3c;color:#fff}
  input{font-size:16px;padding:6px;border-radius:8px;border:0;margin:4px;width:90px}
</style>
</head>
<body>
  <h1>Симулятор блогера</h1>
  <p>Всего подписчиков: <span id="total" class="num">0</span></p>

  <div class="card">
    <h2>TikTok 🎵</h2>
    <p class="num" id="tt">0</p>
    <button class="up" onclick="add('tt', 100)">+100</button>
    <button class="down" onclick="add('tt', -100)">−100</button>
  </div>

  <div class="card">
    <h2>YouTube 🎬</h2>
    <p class="num" id="yt">0</p>
    <button class="up" onclick="add('yt', 50)">+50</button>
    <button class="down" onclick="add('yt', -50)">−50</button>
  </div>

  <div class="card">
    <h2>Telegram ✈️</h2>
    <p class="num" id="tg">0</p>
    <button class="up" onclick="add('tg', 20)">+20</button>
    <button class="down" onclick="add('tg', -20)">−20</button>
  </div>

  <div class="card">
    <h2>Вписать вручную</h2>
    <input id="who" placeholder="tt / yt / tg">
    <input id="val" type="number" placeholder="сколько">
    <button class="up" onclick="manual()">Записать</button>
  </div>

<script>
  // 1. СОСТОЯНИЕ: тут живут все числа игры
  const sub = { tt: 0, yt: 0, tg: 0 };

  // 2. СОБЫТИЕ: кнопки зовут эту функцию
  function add(key, delta) {
    sub[key] = Math.max(0, sub[key] + delta); // меньше нуля не бывает
    render();
  }

  // Ручной ввод: пишешь платформу и число
  function manual() {
    const key = document.getElementById('who').value.trim();
    const val = Number(document.getElementById('val').value);
    if (!(key in sub) || isNaN(val)) { alert('Напиши tt, yt или tg и число'); return; }
    sub[key] = Math.max(0, Math.floor(val));
    render();
  }

  // 3. ОТРИСОВКА: показываем состояние на экране
  function render() {
    document.getElementById('tt').textContent = sub.tt;
    document.getElementById('yt').textContent = sub.yt;
    document.getElementById('tg').textContent = sub.tg;
    document.getElementById('total').textContent = sub.tt + sub.yt + sub.tg;
  }
</script>
</body>
</html>

2. Как проверить, что работает

Нажми: TikTok +100, YouTube +50, Telegram +20 → сумма должна стать 170. Нажми TikTok −100 три раза → TikTok станет 0, а не −200 (это делает Math.max(0, …)).

Если сумма не сходится — почти всегда виновата одна из трёх вещей: не вызван render(), опечатка в id, или onclick ссылается на несуществующую функцию.

3. Как менять под себя

• Другие числа: поменяй 100 / 50 / 20 в кнопках — например, add('yt', 5).
• Новая платформа (например, VK): скопируй блок .card, поменяй id="vk" и подписи, добавь vk: 0 в sub и строку document.getElementById('vk').textContent = sub.vk; в render(), а в сумму — + sub.vk.
• Больше смысла (следующий уровень): добавь деньги и рекламу — тратишь монеты, подписчики растут. Принцип тот же: ещё одна переменная в sub и функция, которая её меняет.

Хочешь — сделаю версию на Python или на Scratch, если удобнее там.