Переменные и числа: где игра хранит очки

В новой игре ты будешь собирать кристаллы, расходовать энергию и покупать одно улучшение. Начнём с данных игры: количества кристаллов, запаса энергии и признака победы. Эти значения вместе называют состоянием игры. Пока результат увидишь в Console — окне сообщений браузера. Кнопок на этом этапе ещё нет.

Перед этим уроком понадобятся законченная HTML-история и знания об общем CSS из урока об интерфейсе на Flexbox. Старую историю сохрани отдельно. Для кликера создаём новую папку.

Распакуй архив целиком. У каждой версии своя папка с index.html, style.css и game.js. Открывай HTML внутри выбранной папки двойным щелчком; после правки сохраняй файл и обновляй браузер. Установка Node.js, аккаунт и сервер здесь не нужны. CSS уже знаком по первому модулю и дан как готовое оформление.

Подключаем JavaScript к странице

Создай папку crystals. Скопируй в неё три файла из start/. HTML здесь служит оболочкой: заголовок и показатели пока написаны обычным текстом. Открой index.html в редакторе и найди в head строку:

<script src="game.js" defer></script>

src указывает имя соседнего файла. Оно должно совпасть с game.js, включая буквы и расширение. defer означает: выполнить подключённый скрипт после разбора HTML. Позже скрипт будет искать элементы страницы; к этому моменту они уже должны существовать. Сам файл пишем без тегов <script> — они уже находятся в HTML.

В game.js замени стартовый комментарий на:

console.log('Скрипт подключён');

console.log(...) — команда вывести значение в Console. Круглые скобки содержат то, что нужно вывести. Одинарные кавычки обозначают текст; сами кавычки в сообщении не появятся. Точка с запятой завершает инструкцию. Сохрани оба файла, открой HTML в браузере, нажми F12 или выбери в меню браузера «Инструменты разработчика», затем вкладку Console и обнови страницу.

Проверка: должно появиться сообщение «Скрипт подключён». Если его нет, проверь сохранение файла, строку src и расширение .js, а затем обнови страницу. Если открылся текст HTML, проверь, что имя не заканчивается на .html.txt. Отдельный запуск файла JS двойным щелчком нам не нужен.

Число хранится в переменной

Теперь замени сообщение следующими четырьмя строками. Это версия step-01/:

let score = 0;
console.log(score);
score = score + 3;
console.log(score);

let score = 0 объявляет переменную с именем score и начальным значением 0. Переменная — имя, по которому код получает текущее значение. Следующая строка читает его. Затем score = score + 3 сначала вычисляет правую часть: старое значение 0 плюс 3. Получившееся 3 записывается обратно в score. Второй вывод поэтому показывает 3.

Знак = здесь означает присваивание, а не математическое равенство и не проверку. Инструкции выполняются сверху вниз. Если перенести вывод выше присваивания, он увидит старое значение. Имя чувствительно к регистру: score и Score — разные имена. Повторно писать let при изменении не нужно: переменная уже объявлена.

Проверка: сначала предскажи два числа, затем обнови страницу и сравни. Измени прибавку на 5 — второй вывод должен стать 5. После перезагрузки скрипт начинается заново с нуля: сохранения пока нет.

Очки, энергия и отличие строки от числа

У сбора кристалла будут два последствия. Добавим награду к очкам и вычтем единицу из энергии. Замени game.js кодом step-02/:

let score = 4;
let energy = 10;
const reward = 3;
score = score + reward;
energy = energy - 1;
console.log(score, energy);
console.log(10 + 2);
console.log('10' + 2);
console.log(typeof score);
console.log(typeof '10');

const reward = 3 задаёт имя для награды, которое мы не будем переназначать. let подходит для меняющегося счёта, const — для постоянной цены или ссылки на элемент. const запрещает новое присваивание самому имени, а не обещает «неизменность всего содержимого»; составные данные разберём позже. Попытка reward = 4 закончится ошибкой. Чтобы изменить награду поменяй число в исходном объявлении и перезагрузи страницу.

Арифметические знаки: + складывает числа, - вычитает, * умножает, / делит. Скобки задают порядок: (2 + 3) * 4 даст 20. Первый вывод этапа — 7 и 9: очки выросли с 4 на 3, энергия уменьшилась с 10 на 1.

10 — число, а '10' — строка, то есть текст из двух символов. Если у + одно из значений — строка, он соединяет текст: '10' + 2 даёт '102'. typeof показывает тип значения: number для числа и string для строки. Не бери счёт из надписи на странице: позже число останется в JS, а на странице мы будем показывать его значение.

Готовим начальное состояние партии

Мы проверили, как меняются числа. Теперь зададим значения, с которых должна начинаться новая игра. Сохрани такой game.js; он соответствует final/:

let score = 0;
let energy = 10;
let clickPower = 1;
let upgraded = false;
let won = false;

const upgradePrice = 10;
const winningScore = 20;

console.log('Кристаллы:', score);
console.log('Энергия:', energy);
console.log('Сила:', clickPower);
console.log('Улучшение куплено:', upgraded);
console.log('Победа:', won);

clickPower — сколько кристаллов даёт сбор; upgradePrice — цена улучшения; winningScore — цель. upgraded и won хранят логические значения false или true: «улучшение ещё не куплено» и «победы ещё нет». Это тип boolean; кавычки ему не нужны. Строка 'false' была бы текстом, а не этим признаком.

В Console можно перечислить несколько значений через запятую, как в итоговых сообщениях. Комментарий начинается с //; браузер игнорирует остаток такой строки. Сейчас не нужно менять флаги вручную: правила покупки и победы появятся в отдельном уроке.

Самостоятельно: рассчитай награду и расход энергии

В отдельной копии step-02/ задай такие правила: в начале 6 кристаллов и 4 энергии; один удачный ход приносит награду 2, удвоенную бонусом, и тратит 2 энергии. Выведи обе величины. Перед запуском запиши ожидаемые числа и порядок вычислений. Для второго опыта замени начальный счёт на строку '6' и объясни отличие. В папке final оставь начальные значения 0 кристаллов и 10 энергии: с них начнём следующий урок.

Готово, когда: ты объясняешь вывод 10 и 2, можешь отличить число от строки и показать, где значение присваивается. В версии final консоль показывает 0, 10, 1, false, false. Цифры в HTML пока не обновляются. В следующем уроке свяжем их с переменными.

Справочник: объявления переменных и типы в MDN. Его не нужно читать целиком до продолжения.