Как сделать игру «Змейка» с помощью ИИ

Помните старую добрую «Змейку»? Чёрно-белая змейка, ползает по экрану, ест яблоки, растёт и врезается в стены. Когда-то она была на каждой второй кнопочной Nokia. Сегодня такую игру можно собрать за вечер — и при этом совсем не обязательно писать код руками. Пройдём весь путь: как сделать веб-версию «Змейки» с помощью Claude Code — от идеи до запуска в браузере.

Это не урок программирования. Мы не будем учить JavaScript, разбирать циклы и запоминать синтаксис. Наша цель — понять, как поставить задачу Claude Code словами, получить работающий результат и довести его до ума.

Что мы будем делать

В итоге у нас получится простая браузерная игра:

• змейка движется по игровому полю;
• игрок управляет стрелками на клавиатуре;
• змейка ест еду и растёт;
• при столкновении со стеной или с собой игра заканчивается;
• есть счёт и кнопка «Начать заново».

Игра будет работать прямо в браузере, без установки серверов и без сложных фреймворков. Только HTML, CSS и JavaScript — самые базовые технологии веба.

Что понадобится для старта

Для работы вам понадобится:

• компьютер с Windows, macOS или Linux;
• браузер Chrome, Firefox, Safari или Edge;
• установленный Claude Code;
• папка на компьютере, где будет лежать проект.

Всё остальное Claude сделает за вас. Если у вас ещё нет Claude Code, установите его по официальной инструкции. На момент написания статьи Claude Code доступен для Windows, macOS и Linux.

С чего начать

Перед тем как писать первый промпт, полезно немного подготовиться. Откройте пустую папку для проекта. Это может быть папка snake-game на рабочем столе или в любом другом удобном месте. Запустите Claude Code в этой папке.

Если вы работаете в терминале, команда обычно выглядит так:

claude

После запуска Claude Code окажется в той же папке, что и вы, и увидит все файлы проекта. Пока файлов нет — и это нормально.

Стартовый промпт

Первый промпт самый важный. В нём мы задаём направление. Используем формулу: что + контекст + детали + критерий.

Создай простую браузерную игру "Змейка" в этой папке.

Проект должен состоять из трёх файлов:
- index.html — разметка страницы;
- style.css — внешний вид;
- script.js — логика игры.

Требования к игре:
- Игровое поле — квадрат 20 на 20 клеток.
- Змейка состоит из клеток и движется в одном из четырёх направлений: вверх, вниз, влево, вправо.
- Управление — стрелками на клавиатуре.
- В случайной клетке появляется еда. Когда змейка ест еду, она растёт на одну клетку, и счёт увеличивается на 1.
- Если змейка врезается в стену или в себя, игра заканчивается.
- После проигрыша показывается сообщение "Игра окончена" и кнопка "Начать заново".
- Игра должна выглядеть аккуратно: тёмное поле, зелёная змейка, красная еда, белый счёт.

Критерий готовности:
- Я открываю index.html в браузере, нажимаю стрелки, и змейка движется.
- Еда появляется, счёт растёт, столкновение заканчивает игру.

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

Что происходит после стартового промпта

Claude Code выполняет несколько действий:

1. Создаёт файл index.html с базовой разметкой: заголовок, игровое поле, счёт, кнопка перезапуска.
2. Создаёт файл style.css со стилями: размер клеток, цвета, отступы, шрифты.
3. Создаёт файл script.js с логикой игры: движение змейки, генерация еды, обработка нажатий клавиш, проверка столкновений.
4. Проверяет, что файлы созданы, и сообщает вам, что можно запускать.

Важно: Claude пишет код, но не может нажать за вас клавиши в браузере. Проверка игры — ваша задача. Откройте index.html двойным кликом или через локальный сервер, если Claude его запустил.

Как запустить игру

Если вы просто откроете index.html в браузере, игра должна работать. Но для некоторых браузерных функций удобнее использовать локальный сервер. Claude может запустить его за вас командой:

npx serve

После этого в терминале появится адрес, например http://localhost:3000. Скопируйте его в браузер, и вы увидите игру.

Если у вас не установлен Node.js, локальный сервер может не запуститься. В таком случае откройте index.html напрямую. Для простой «Змейки» это тоже сработает.

Проверяем первую версию

После запуска проверьте базовые сценарии:

• Змейка движется сразу после старта?
• Стрелки меняют направление?
• При поедании еды змейка растёт, а счёт увеличивается?
• При столкновении со стеной игра заканчивается?
• Кнопка «Начать заново» работает?

Не пугайтесь, если что-то сделано не так, как вы себе представляли. Первая версия редко идеальна. Сейчас начинается самое интересное — доводка.

Доводка игры: типичные правки

Предположим, первая версия работает, но вам хочется лучше. Вот как можно просить Claude внести изменения.

Правка 1: скорость игры

Правка 2: внешний вид

Правка 3: управление на телефоне

Правка 4: рекорд

Правка 5: пауза

Каждая такая правка — отдельный промпт. Не смешивайте всё в одно сообщение. Claude лучше справляется с одной задачей за раз, а вы легче отслеживаете изменения.

Пример полного цикла доводки

Давайте представим реальный диалог с Claude Code.

Вы:

Claude:

Вы открываете игру, проверяете и пишете:

Claude вносит изменение в script.js.

Вы снова проверяете:

Claude добавляет кнопки и стили для мобильных экранов.

Вы:

Claude добавляет localStorage.

Так шаг за шагом игра превращается из простого прототипа в полноценную маленькую игрушку.

Сколько времени это занимает

Первая версия «Змейки» появляется за несколько минут. Большая часть времени уходит не на написание кода, а на проверку и доводку. Реальные цифры могут быть такими:

• стартовый прототип — 5–10 минут;
• тестирование и первая правка — 10–15 минут;
• добавление мобильного управления, рекорда, паузы — 20–30 минут;
• финальная проверка и полировка — 10–15 минут.

Всего за 45 минут — час можно получить игру, которой не стыдно поделиться с друзьями или выложить в интернет.

Что реально происходит под капотом

Когда Claude Code пишет игру, он использует стандартные веб-технологии. Разберём, из чего состоит игра, простыми словами.

HTML — скелет страницы

HTML-файл отвечает за структуру: заголовок, игровое поле, счёт, кнопки. Это как каркас дома. Без него браузер не понял бы, что где находится.

CSS — внешний вид

CSS-файл отвечает за цвета, размеры, шрифты, расположение элементов. Это облицовка и интерьер дома. Именно благодаря CSS игра выглядит аккуратно, а не как голый текст.

JavaScript — мозг игры

JavaScript-файл содержит логику: как змейка движется, что происходит при нажатии клавиши, когда счёт увеличивается, как определяется столкновение. Это электрика и сантехника дома. Всё, что движется и реагирует, работает через JavaScript.

Canvas или DOM

Claude может реализовать игру двумя способами:

• через HTML Canvas — специальный элемент для рисования графики;
• через DOM — обычные HTML-элементы, которые передвигаются по полю.

Оба способа подходят для «Змейки». Canvas обычно даёт более плавную графику, DOM проще для понимания и стилизации. Если вам важен конкретный подход, скажите об этом в промпте.

Типичные проблемы и как их решать

Проблема 1: игра не запускается

Если вы открыли index.html, а экран пустой, первым делом откройте консоль браузера. В Chrome это делается клавишей F12, вкладка Console. Там может быть ошибка в JavaScript.

Покажите текст ошибки Claude и попросите исправить:

Проблема 2: управление не работает

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

Проблема 3: змейка проходит сквозь стены

Если змейка не умирает при столкновении со стеной, значит, проверка границ не работает или работает неправильно. Попросите Claude добавить проверку:

Проблема 4: еда появляется на теле змейки

Это распространённый баг. Еда должна появляться только на свободных клетках. Если Claude этого не сделал, напишите:

Проблема 5: игра тормозит

Если змейка движется рывками, возможно, интервал обновления слишком маленький или код выполняет лишние операции. Попросите Claude оптимизировать игровой цикл.

Как сделать игру интереснее

Базовая «Змейка» уже хороша, но можно добавить несколько фишек, которые сделают игру увлекательнее.

Уровни сложности

Препятствия

Бонусная еда

Звуки

Таблица рекордов

Каждая фича — отдельный промпт. Не пытайтесь реализовать всё сразу. Сделайте одно, проверьте, потом переходите к следующему.

Что делать, если Claude не справился с первого раза

Иногда Claude делает не совсем то, что вы хотели. Это нормально. Главное — не опускать руки, а конкретно описать, что не так.

Если игра не похожа на то, что вы задумали

Не пишите «переделай». Опишите конкретные расхождения:

Если Claude предложил слишком сложное решение

Claude иногда использует библиотеки и подходы, которые новичку не нужны. Если вы видите, что он подключил какой-то фреймворк или написал много лишнего, скажите:

Если Claude не понял задачу

Перефразируйте промпт, используя формулу «что + контекст + детали + критерий». Добавьте пример или скриншот, если можете.

Если появилась ошибка

Скопируйте текст ошибки из терминала или консоли браузера и покажите Claude. Лучшее сообщение выглядит так:

Если хочется отменить изменения

Claude Code обычно показывает, какие файлы изменены. Если результат вас не устраивает, попросите его откатить изменения:

Или используйте Git:

git checkout -- .

Эта команда отменяет все несохранённые изменения в текущей папке.

Как выбрать между Canvas и DOM

Claude может реализовать «Змейку» двумя способами. Полезно понимать разницу, чтобы выбирать подходящий вариант.

Canvas

Canvas — это специальный HTML-элемент, на котором можно рисовать с помощью JavaScript. Подходит для игр с плавной графикой и большим количеством движущихся объектов.

Плюсы Canvas:

• плавная анимация;
• полный контроль над отрисовкой;
• меньше накладных расходов на больших полях.

Минусы Canvas:

• сложнее стилизовать отдельные элементы;
• для новичка код может показаться менее наглядным;
• обработка кликов по отдельным объектам требует дополнительной логики.

DOM

DOM — это обычные HTML-элементы, которые создаются и перемещаются JavaScript. Для «Змейки» это может быть набор div-элементов, каждый из которых — клетка поля.

Плюсы DOM:

• простая стилизация через CSS;
• наглядная структура;
• легко добавлять анимации и эффекты.

Минусы DOM:

• на больших полях может тормозить;
• менее плавная анимация по сравнению с Canvas.

Что выбрать

Для первой «Змейки» оба подхода подойдут. Если вам важна простота и наглядность — попросите Claude использовать DOM. Если важна плавность и вы планируете добавлять сложную графику — выберите Canvas.

Расширенный пример: добавляем уровни сложности

Разберём, как выглядит реальный диалог с Claude при добавлении новой фичи.

Вы:

Claude:

Вы проверяете и пишете:

Claude вносит правки в CSS.

Вы:

Claude добавляет ожидание первого нажатия.

Так вы последовательно доводите фичу до ума. Каждое сообщение — одна конкретная правка.

Как публиковать игру

Когда игра готова, вы можете выложить её в интернет, чтобы другие могли поиграть. Самый простой способ для новичка — GitHub Pages. Это бесплатный хостинг для статических сайтов, который отлично подходит для простых игр.

Кратко процесс выглядит так:

1. Создаёте репозиторий на GitHub.
2. Загружаете туда файлы игры.
3. Включаете GitHub Pages в настройках репозитория.
4. Получаете ссылку вида https://ваш-никнейм.github.io/snake-game.

Мы подробно разбираем GitHub Pages в отдельной статье «GitHub Pages и PWA для новичка: публикуем игру по ссылке». Если хотите сделать из игры настоящее приложение, которое можно установить на телефон, почитайте её.

Почему именно «Змейка» хороша для старта

«Змейка» — идеальный первый проект по нескольким причинам.

Правила простые. Всё понятно без объяснений: ползи, ешь, не врезайся.

Код компактный. Игра умещается в несколько сотен строк. Это значит, что Claude справится быстро, а вы сможете разобраться в том, что получилось.

Результат наглядный. В отличие от бэкенда или API, игру сразу видно и можно потрогать.

Можно развивать. Базовая версия легко превращается в более сложную игру: добавляйте уровни, звуки, рекорды, мобильное управление.

Все технологии полезны. HTML, CSS и JavaScript — это фундамент веб-разработки. Даже если вы никогда не станете программистом, понимание этих технологий поможет вам лучше общаться с ИИ-ассистентами.

Что вы узнали в процессе

Собирая «Змейку» с Claude Code, вы не просто получаете игру. Вы учитесь:

• формулировать задачи для ИИ;
• проверять результат, а не слепо верить ассистенту;
• разбивать большую задачу на маленькие шаги;
• читать ошибки в браузере и передавать их Claude;
• понимать, как связаны HTML, CSS и JavaScript.

Эти навыки работают в любых проектах: от лендинга до мобильного приложения. Claude пишет код, но вы управляете процессом.

Чек-лист создания игры с Claude Code

• Я создал пустую папку для проекта.
• Я запустил Claude Code в этой папке.
• Я написал стартовый промпт с параметрами игры.
• Claude создал файлы index.html, style.css и script.js.
• Я открыл игру в браузере и проверил базовые сценарии.
• Я внёс правки по одной, проверяя каждую.
• Я добавил хотя бы одну дополнительную фичу: рекорд, паузу или мобильное управление.
• Я знаю, как выложить игру на GitHub Pages.

Мостик к практикуму

«Змейка» — отличная тренировка, но это только начало. Настоящая сила вайбкодинга открывается, когда вы начинаете делать собственные проекты: сайты, приложения, инструменты для бизнеса. Главное — не выучить код, а научиться ставить задачи так, чтобы Claude их понимал.

Если хочешь пройти весь путь от первой игры до публикации собственного проекта с поддержкой, это и есть наш курс «Собери своё первое приложение с ИИ»: готовые промпты, чек-листы и живая команда, которая помогает на каждом затыке.

А пока откройте Claude Code, создайте папку и напишите свой первый промпт. Через час у вас может быть собственная «Змейка», которой вы сможете похвастаться.