Игра «Кликер» помогает понять базовую экономику браузерных игр: активный клик, пассивный доход, рост цен апгрейдов и сохранение прогресса. В статье разбираем ту же версию, которая доступна в разделе «Поиграть».
Рабочий кликер на HTML, CSS и JavaScript: очки за клик, доход в секунду, два апгрейда, динамические цены, автосохранение в localStorage и визуальные эффекты (нажатие, плавающие +очки, серия COMBO).
Сначала попробуйте готовую игру
Сыграйте 1-2 минуты: сделайте быструю серию кликов, активируйте COMBO, купите оба апгрейда и проверьте, как меняется темп накопления очков.
Структура проекта
kliker/
├── source.html
├── style.css
└── game.jsHTML: интерфейс и магазин
Разметка состоит из статуса, главной кнопки и двух покупок магазина. Все узлы логики отмечены атрибутами data-clicker-*.
<main class="clicker" data-clicker-game>
<section class="clicker__stats">
<p data-clicker-score>Очки: 0</p>
<p data-clicker-cps>Доход/сек: 0</p>
</section>
<button class="clicker__main" type="button" data-clicker-main>Клик!</button>
<section class="clicker__shop">
<button type="button" data-buy-click>+1 к клику</button>
<button type="button" data-buy-cps>+1 к доходу/сек</button>
</section>
</main>CSS: единый стиль с остальными играми
Игра оформлена в общей тёмной стилистике проекта: карточный контейнер, яркая основная кнопка и аккуратные кнопки магазина.
JavaScript: состояние и рендер
Состояние игры хранит очки, силу клика, пассивный доход и цены апгрейдов. Отдельные функции отвечают за визуальную обратную связь: анимацию нажатия кнопки, плавающие +очки и короткий подсвет COMBO-серии.
const state = {
score: 0,
perClick: 1,
cps: 0,
clickUpgradeCost: 20,
cpsUpgradeCost: 35,
};
function render() {
scoreEl.textContent = "Очки: " + formatNumber(state.score);
cpsEl.textContent = "Доход/сек: " + formatNumber(state.cps);
}Логика апгрейдов и рост стоимости
Покупка работает через универсальную функцию: списывает стоимость, применяет эффект и увеличивает цену. Это упрощает добавление новых апгрейдов.
function buy(costKey, action) {
const cost = state[costKey];
if (state.score < cost) return;
state.score -= cost;
action();
state[costKey] = Math.round(cost * 1.58);
render();
save();
}Пассивный доход и сохранение прогресса
Каждую секунду к счёту добавляется cps. Когда автодоход активен, игра показывает +очки/с и пульс показателей, чтобы игрок видел прирост в реальном времени. Состояние периодически сохраняется в localStorage, поэтому прогресс не теряется после перезагрузки.
Проверка
| Проверка | Ожидаемый результат |
|---|---|
| Нажать кнопку «Клик!» | Очки растут на текущий показатель клика |
| Купить улучшение клика | Увеличивается сила клика и растёт цена следующей покупки |
| Купить улучшение дохода | Доход/сек растёт, очки капают каждую секунду и появляется визуальный тик +очки/с |
| Сделать быструю серию кликов | Срабатывает визуальный COMBO: подсветка кнопки и надпись COMBO xN |
| Перезагрузить страницу | Сохранённый прогресс поднимается из localStorage |
FAQ
Как добавить третий апгрейд?
Добавьте новое поле в state, кнопку в HTML и вызов функции buy с нужным эффектом.
Почему цена растёт мультипликатором?
Так сохраняется баланс: первые шаги быстрые, дальше игроку нужно планировать покупки.
Откройте финальные файлы этой версии. Это тот же код, который работает в демо наверху и на странице «Поиграть».
Книга по JavaScript для начинающих
«JavaScript с нуля: учимся программировать, создавая игры»Пошаговый формат с маленькими практическими задачами: от базового синтаксиса до первых игровых механик без перегруза теорией.
Читать книгу на ЛитРес →