Git для первой игры: сохраняем версии и отменяем изменения

Кликер уже работает: кнопка меняет счёт, покупка проверяет цену, а новая партия сбрасывает состояние. Теперь сохраним эту версию так, чтобы после неудачного эксперимента вернуть прежнее поведение и увидеть, что именно изменилось.

Сегодня ты создашь локальный репозиторий Git, сделаешь два сохранения и отменишь учебную правку отдельным коммитом. Аккаунт и публикация в интернете пока не нужны. Результат урока — работающая игра и история, по которой понятно, что и зачем менялось.

Подготовь рабочую игру

Нужен законченный кликер из предыдущего занятия. Убедись, что можешь начать партию, накопить очки, купить улучшение, победить и снова начать с нуля. Если игра пока не работает, сначала исправь её: Git сохранит любые файлы, но не проверит правильность правил за тебя.

В папке start — та же версия, что в clicker-finish/final; step-01 показывает намеренно неудачную правку, final — восстановленные файлы. Историю Git ты создашь сам. Папка .git в архив не включена.

Создай отдельную папку my-clicker-git и скопируй туда только три файла своей игры: index.html, style.css, game.js. Открой этот index.html и сыграй одну партию. Это учебная копия: работай именно с ней.

Установи Git и открой терминал

Основной сценарий ниже — Windows и Git Bash, который входит в Git for Windows. Скачай подходящий установщик с официальной страницы Git, запусти его и пройди установку с обычными настройками. Если Git уже установлен, заново устанавливать его не нужно.

Открой папку my-clicker-git в Проводнике. Нажми правой кнопкой по пустому месту и выбери Open Git Bash here. В Windows 11 пункт может находиться в меню «Показать дополнительные параметры». Если его нет, открой Git Bash из меню «Пуск», набери cd с пробелом, перетащи папку игры в окно и нажми Enter.

Терминал принимает команды текстом. Вводи команды ниже по одной, нажимая Enter после каждой. Строки с результатами терминала копировать не надо.

git --version
pwd
ls

Первая команда показывает установленную версию Git. pwd — текущую папку, ls — её содержимое. Ты должен увидеть my-clicker-git в пути и три файла игры в списке. Если показана другая папка, вернись в Проводник и открой Git Bash из нужного места.

На macOS и Linux используй обычный терминал в папке проекта. Установку для своей системы смотри в официальной инструкции. Все последующие команды Git одинаковы; Git Bash отдельно для этих систем не требуется.

Создай репозиторий

Git — программа, которая хранит версии файлов. Репозиторий — проект с такой историей. GitHub и другие сервисы могут хранить копию репозитория в интернете; для сегодняшней работы достаточно Git на компьютере.

git init -b main
git config --local user.name "Learner"
git config --local user.email "learner@example.invalid"
git status

init создаёт скрытую папку .git с историей. main — имя основной ветки; несколько веток сейчас не нужны. Не перемещай и не редактируй файлы внутри .git вручную.

user.name и user.email — подпись автора будущих коммитов, а не вход в аккаунт. Здесь учебные значения: можно оставить их в этой локальной копии или указать выбранные тобой имя и адрес. --local применяет настройку только к этому репозиторию. Если позже будешь публиковать историю, помни: подпись коммита видна вместе с ней. Настройка описана в справочнике Git.

status должен показать новые, пока не отслеживаемые файлы — Untracked files. Это нормально: Git обнаружил их, но ты ещё не выбрал, что сохранить.

Сохрани проверенную версию

Коммит — сохранённый снимок выбранных файлов с пояснением. Сначала выбираем файлы через add, потом создаём снимок через commit.

git add -- index.html style.css game.js
git status
git commit -m "Сохраняю рабочий кликер"
git status
git --no-pager log --oneline

После add файлы находятся в разделе Changes to be committed — подготовлены к снимку. Двойной дефис отделяет параметры от имён файлов. -m задаёт понятное сообщение коммита прямо в команде. В конце status сообщает working tree clean: отслеживаемые файлы совпадают с сохранённой версией.

log --oneline показывает историю по одной строке на коммит. Слева будет короткий идентификатор, например 7ac12ef, справа — твоё сообщение. У тебя идентификатор будет другим. --no-pager выводит результат прямо в терминал, не открывая отдельный просмотрщик.

Проверка: есть одна запись, нет несохранённых изменений, игра запускается. Теперь у неё есть точка, к которой можно вернуться. Git сохраняет код, а не текущие очки открытой партии в браузере.

Сделай и сохрани намеренно неудачную правку

В game.js найди объявление цели победы:

const winningScore = 20;

Замени только число 20 на 200, сохрани файл и обнови игру. Предскажи результат: победа теперь требует десятикратного количества очков. Проверь, что обычная партия стала слишком длинной. Для нашего короткого кликера это неудачный эксперимент с правилом.

git status
git --no-pager diff -- game.js

diff сравнивает ещё не подготовленные изменения с подготовленной версией файла. Строка с - показывает прежнее значение, с + — новое. В этом опыте должна измениться ровно одна строка. Если видишь другую правку, сначала разберись с ней.

git add -- game.js
git --no-pager diff --cached -- game.js
git commit -m "Эксперимент: цель 200 очков"
git status
git --no-pager log --oneline

diff --cached показывает именно то, что попадёт в следующий коммит. После add обычный diff может быть пустым: правка уже подготовлена. Если после подготовки ты ещё раз изменил файл, снова просмотри его и повтори add. В снимок попадает подготовленный вариант, а не автоматически всё, что сейчас открыто в редакторе. Подробнее: выбор и сохранение изменений.

Проверка: в истории две записи, верхняя описывает цель 200, status чистый. Запиши идентификатор именно этого экспериментального коммита.

Отмени эксперимент, сохранив историю

Мы уже сохранили неудачную правку. Команда revert создаст новый коммит, который отменяет изменения указанного коммита. История будет показывать и попытку, и решение вернуться к прежнему правилу.

Сначала выполни git status. Если есть несохранённые правки, остановись: заверши и сохрани их отдельно, затем вернись к этому опыту. Здесь нужно чистое состояние и ровно тот эксперимент, который ты только что сделал.

В следующей команде замени abc1234 своим идентификатором экспериментального коммита из верхней строки log. Это пример, не готовый идентификатор твоей истории:

git revert --no-edit abc1234
git --no-pager log --oneline
git status

--no-edit принимает стандартное сообщение отмены без открытия редактора. Теперь записей три. Исходный эксперимент всё ещё виден, а новая запись отменяет его. Так работает git revert.

Открой game.js: цель снова 20. Обнови браузер и проверь победу и сброс. Одной чистой истории мало: нужно убедиться, что вернулось и ожидаемое поведение игры.

Если что-то пошло не так

Что видишь	Что проверить
git: command not found	Установлен ли Git? После установки закрой терминал, заново открой Git Bash и выполни git --version.
not a git repository	Проверь pwd и ls. Ты должен находиться внутри учебной папки после git init.
Author identity unknown	Повтори две команды git config --local из этого урока в папке игры, затем повтори коммит.
nothing to commit, хотя редактировал	Сохрани файл в редакторе, проверь путь открытого файла и git status. Если правка уже сохранена коммитом, новый снимок не нужен.
bad revision	В команду попал пример abc1234 или опечатка. Скопируй реальный идентификатор своего экспериментального коммита.
local changes would be overwritten	Есть другие незакоммиченные изменения. Посмотри status и diff, сохрани нужные изменения отдельным коммитом; не пытайся принудительно стирать файлы.
CONFLICT во время отмены	История отличается от простого опыта: те же строки менялись снова. Выполни git revert --abort, чтобы выйти из незавершённой отмены. Вернись к отдельной учебной копии и повтори последовательность без дополнительных правок между экспериментом и отменой.
Git вернул 20, а игра показывает старое	Обнови нужную вкладку и проверь путь открытого index.html. Возможно, браузер показывает другую копию игры.

Самостоятельно: измени правило и верни прежнюю версию

Измени одно игровое правило в своей копии: например, стоимость покупки. Выбери цену от 5 до 15 при прежней цели 20. Сначала запиши, что должно происходить когда очков меньше цены, ровно столько же и больше неё. Каждый случай начинай с новой партии и проверяй покупку до победы. Проверь эти случаи, сохрани эксперимент отдельным коммитом и отмени именно его. Подтверди, что исходная покупка снова работает. Не используй готовую папку final для замены файлов: задача — вернуть прежнее правило с помощью Git.

Подсказка 1: как выбрать правку

Возьми одно число в game.js, отвечающее за известное тебе правило. Если не можешь объяснить строку, сначала вернись к разбору кликера. Менять оформление для этого задания недостаточно.

Подсказка 2: последовательность действий

Проверенная база → изменение правила → проверка в браузере → status и diff → add → commit → log → revert по идентификатору → повторная проверка. Команды можно смотреть выше: важнее верно выбрать версию и объяснить действие.

Разбор после самостоятельной попытки

Проверь, что выбранный коммит содержит только эксперимент с правилом. После отмены в истории остаются и эксперимент, и отменяющая запись; поведение покупки совпадает с исходным. Неправильный результат — заменить все файлы скачанным финалом или отменить первый коммит со всей игрой. Подробный список проверок есть во вкладке «Решение» просмотрщика исходников.

Проверь, что ты освоил

• Ты находишь нужную папку, читаешь status и видишь свою правку в diff.
• В истории есть рабочая версия, эксперимент и его отмена.
• Ты различаешь сохранение файла в редакторе, подготовку через add и коммит.
• Ты объясняешь, какое правило изменил и почему восстановилось прежнее поведение.
• После отмены игра запускается, покупка работает, победа и сброс проверены.

Модуль закончен: у тебя есть небольшой кликер, опыт изменения правил, поиска ошибок и сохранения рабочих версий. Закрепи его ещё одним действием: из минимального HTML-шаблона восстанови счётчик с другим правилом и сбросом, объясни, что хранит каждая переменная, и сохрани результат в новом учебном репозитории. Документацией пользоваться можно.

Книга по JavaScript для начинающих

«JavaScript с нуля: учимся программировать, создавая игры»

Пошаговый формат с маленькими практическими задачами: от базового синтаксиса до первых игровых механик без перегруза теорией.

Подробнее о книге →