Как создать игру с помощью нейросети и сыграть первый раунд

В сцене из «Скотного двора» Обвал пишет правила на стене амбара, а Стукач помогает ему с краской. Обвалу приходится карабкаться на стремянку: копыта для такой работы приспособлены неважно. У наших правил будет другое место — короткий запрос, по которому помощник напишет поведение игры. Прочитать их нужно будет и после появления красивой кнопки.

Допустим, на семейном вечере хочется показать свою мини-игру. Называется она «Упрямая кнопка»: нажимаете «Начать», получаете 20 секунд и собираете очки кнопкой «Поймал!». Когда время вышло, счёт останавливается. Следующий раунд начинается с нуля. Старые очки остаются итогом предыдущей попытки и не дают преимущества в новой. Кто-нибудь за столом непременно захочет нажать ещё до старта. Потом тот же человек вдруг обнаружит в себе спортсмена и попросит второй раунд. Начало, очки и повтор нужны игре именно для этих простых действий.

Понадобятся доступ к обычному чату Алисы AI, свой текстовый редактор и браузер. Сохранение ниже разобрано для Windows через Блокнот. Файл игры будет храниться на вашем компьютере; для его запуска по выбранному способу не нужны внешние библиотеки, сетевые запросы или установка игрового движка.

Создать игру с помощью нейросети начнём с правил

Сначала договоримся, что делает каждое действие. До старта счёт равен нулю, а игровая кнопка не даёт очков. После «Начать» идёт отсчёт. Каждое нажатие на «Поймал!» добавляет одно очко. По окончании 20 секунд новые очки не принимаются, а кнопка «Ещё раз» начинает новый раунд со сбросом.

До старта «Поймал!» недоступна: сначала игрок включает раунд, затем набирает очки.

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

Для Алисы описывайте тот же небольшой результат. В официальной справке о помощи с кодом указано, что можно попросить написать, объяснить или исправить код обычным сообщением. Отдельный навык для этого запускать не нужно.

Попросим Алису написать один файл

Откройте чат Алисы AI, при необходимости войдите с Яндекс ID и начните диалог. Вставьте запрос в строку сообщения. Он уже включает правила и способ запуска:

Напиши мини-игру «Упрямая кнопка» одним полным HTML-файлом со встроенными CSS и JavaScript. Игра открывается локально в браузере, без внешних библиотек, сети и установки. Все видимые подписи по-русски. До старта: 0 очков, 20 секунд, игровая кнопка не начисляет очки. «Начать» запускает раунд на 20 секунд; нажатие на «Поймал!» даёт ровно 1 очко. После истечения времени кнопка больше не начисляет очки, показан итог. «Ещё раз» сбрасывает счёт и время и запускает новый раунд. Повторное нажатие старта во время игры не должно запускать второй таймер. Клик, поступивший уже после окончания 20 секунд, очков не даёт, даже если обновление надписи запоздало. Дай весь файл от doctype до закрывающего html, без пропусков. Затем по одному действию объясни, как сохранить game.html в Блокноте Windows в UTF-8 и открыть его в браузере. Дожидайся моего результата на каждом шаге.

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

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

Если сначала хочется научиться понятнее описывать собственный замысел, поможет способ писать промпты под задачу. Для первого раунда запрос выше уже готов.

Сохраним game.html, чтобы браузер увидел страницу

В Windows откройте Блокнот через поиск в меню «Пуск». Создайте новый пустой документ. Скопируйте из ответа только код HTML целиком и вставьте его. Пояснения чата и строки с тройными обратными кавычками в файл не входят. Первая строка кода начинается с <!doctype html>, последняя — </html>.

Откройте Файл → Сохранить как. Выберите понятную папку для этой игры. В поле имени запишите game.html, в типе файла — «Все файлы», в кодировке — UTF-8, затем сохраните. Microsoft показывает выбор UTF-8 и All files для Блокнота; здесь мы используем эти элементы сохранения для своего HTML.

Схема окна сохранения. Расширение .html остаётся в имени файла, UTF-8 сохраняет русские подписи.

Проверьте полное имя в Проводнике. В Windows 11 для этого включают Вид → Показать → Расширения имён файлов, как описано в справке Microsoft. Нужен game.html, без добавленного .txt на конце. Если получилось game.html.txt, вернитесь к «Сохранить как» и типу «Все файлы», затем проверьте имя заново.

Теперь откройте game.html двойным щелчком. Если он открылся в текстовом редакторе, нажмите на файл правой кнопкой и выберите Открыть с помощью, затем свой установленный браузер. На странице должны появиться русское название, счёт, оставшееся время и кнопки.

Структуру простого HTML, запись meta charset=“utf-8” и открытие локального файла объясняет урок MDN о первом HTML-документе. Пока файл открыт в Блокноте, перед вами текст устройства игры. В браузере тот же файл превращается в кнопки, подписи и действия. Между этими двумя видами не требуется новый проект.

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Упрямая кнопка</title>
<style>
body { margin: 0; min-height: 100vh; display: grid; place-items: center;
  background: #f5efdf; color: #193b2d; font: 20px/1.5 system-ui, sans-serif; }
main { width: min(90%, 34rem); padding: 2rem 0; text-align: center; }
button { font: inherit; border: 2px solid #193b2d; border-radius: 1rem;
  padding: .7rem 1.4rem; cursor: pointer; background: #e8b75d; color: #193b2d; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible { outline: 4px solid #b74f35; outline-offset: 4px; }
#hit { display: block; margin: 1.5rem auto; min-height: 8rem; min-width: 12rem;
  background: #193b2d; color: #fff8e8; touch-action: manipulation; }
</style>
</head>
<body>
<main>
<h1>Упрямая кнопка</h1>
<p>За 20 секунд наберите очки нажатиями на «Поймал!».</p>
<p>Осталось: <span id="time">20</span> с · Очки: <span id="score">0</span></p>
<button id="start" type="button">Начать</button>
<button id="hit" type="button" disabled>Поймал!</button>
<p id="status" role="status">Нажмите «Начать».</p>
</main>
<script>
(() => {
  const time = document.getElementById('time');
  const scoreText = document.getElementById('score');
  const start = document.getElementById('start');
  const hit = document.getElementById('hit');
  const status = document.getElementById('status');
  let score = 0;
  let active = false;
  let endAt = 0;
  let timer = null;

  function finish() {
    active = false;
    clearInterval(timer);
    timer = null;
    time.textContent = '0';
    hit.disabled = true;
    start.disabled = false;
    start.textContent = 'Ещё раз';
    status.textContent = 'Время вышло! Ваш счёт: ' + score + '.';
  }

  function updateTime() {
    if (Date.now() >= endAt) {
      finish();
      return;
    }
    time.textContent = String(Math.ceil((endAt - Date.now()) / 1000));
  }

  start.addEventListener('click', () => {
    if (active) return;
    clearInterval(timer);
    score = 0;
    scoreText.textContent = '0';
    time.textContent = '20';
    endAt = Date.now() + 20000;
    active = true;
    hit.disabled = false;
    start.disabled = true;
    status.textContent = 'Нажимайте «Поймал!».';
    timer = setInterval(updateTime, 100);
  });

  hit.addEventListener('click', () => {
    if (!active) return;
    if (Date.now() >= endAt) {
      finish();
      return;
    }
    score += 1;
    scoreText.textContent = String(score);
  });
})();
</script>
</body>
</html>

Четыре проверки первого раунда

Оставьте открытую страницу игры перед собой. До нажатия старта попробуйте игровую кнопку: счёт остаётся нулевым. Затем начните раунд и наблюдайте, что происходит с каждой частью.

Карта ожидаемого поведения. Свой результат запишите рядом с каждой проверкой: что нажали и что получили.

В проверке завершения важна не только надпись «Время вышло!». Нажмите игровую кнопку ещё раз и посмотрите на счёт. Он должен остаться прежним. Действие после нуля показывает, остановлен ли счёт.

При повторе посмотрите сразу на оба счётчика. Старые очки должны исчезнуть, время — снова начаться с 20 секунд. Затем сделайте одно попадание: оно должно дать одно очко. Иначе второй игрок получит чужой результат или несколько прибавлений за один щелчок. Если второй раунд идёт заметно быстрее первого, сообщите помощнику наблюдение и попросите проверить, не остался ли прежний таймер. Сначала зафиксируйте, что именно увидели, затем обсуждайте причину.

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

Если что-то повело себя иначе

Вместо «игра не работает» сохраните точный симптом. Например: «После 20 секунд вижу итог 7, но ещё один щелчок делает 8». Или: «Нажимаю “Ещё раз”, время вернулось к 20, а счёт остался 12». Отдельно запишите, какой файл открывали. Так помощник получит то поведение, которое требуется исправить.

Вернитесь в тот же диалог Алисы, приложите полный текущий код и такое сообщение:

В моём локальном game.html не прошла проверка завершения: после истечения 20 секунд новый щелчок продолжает добавлять очки. Вот полный код ниже. Исправь причину, сохрани остальные правила и русские подписи. Верни один полный HTML-файл без пропусков. Объясни, что изменил и как повторить именно проверку завершения.

Сохраните предыдущий файл отдельно, а исправленный — под новым именем, например game-fixed.html. Откройте исправленный вариант и повторите отказавший сценарий. Сверьте путь в адресной строке браузера: должен открыться game-fixed.html. Если помощник указал, что изменение затрагивает ещё и повтор, проверьте эту связь тоже. Исправление оценивается по наблюдаемому поведению кнопки и счётчиков.

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

Добавим одну собственную деталь

После первого проверенного раунда можно поменять название, надпись кнопки или цвет. Попросите Алису изменить одну вещь, сохранив прежние правила, и снова проверьте затронутое действие. Например, «Назови игру “Поймай вареник”, подпись на игровой кнопке оставь прежней, счёт и 20 секунд не меняй».

Для такой игры название уже создаёт настроение. Кнопка осталась на месте, зато у каждого очка появился вареник. Участники могут мысленно наполнять тарелку. Тот, кто минуту назад не понимал кнопок, уже требует сметану к рекорду. По счёту и таймеру по-прежнему легко сравнить новое оформление с прежними правилами.

Если появились идеи для нескольких новых правил, соберите их в отдельный список. Затем можно разложить следующие изменения в план с входами и результатами: что должно работать до следующего шага и какую проверку он потребует. Проверенный game.html сохраните как точку возврата. Если новая идея перестала давать прежний раунд, вы сможете открыть его и сравнить конкретное действие, вместо попытки вспомнить, что происходило вчера.

Несколько вопросов о локальной игре

Нужен ли сервер для такого файла?

В выбранном варианте вся страница и поведение находятся внутри HTML, внешних запросов нет. Такой файл открывается локально в браузере. Доступ к Алисе нужен для обсуждения и получения кода; сам раунд работает в файле.

Почему игра не появилась прямо в чате?

Мы попросили исходный HTML-код. Его сохраняют отдельным файлом и открывают в браузере. Текст ответа помогает подготовить страницу, а нажатия проверяют уже на ней.

Что скопировать: весь ответ или только блок?

Только полный код страницы, без пояснений и строк с обратными кавычками. Если код разделён на несколько частей, попросите объединить его в один законченный HTML перед сохранением.

Можно изменить длительность раунда?

Можно попросить другой срок и назвать, что должно показываться в начале, когда заканчивается начисление и как работает повтор. После изменения проверяйте обновлённое правило. Для первого опыта здесь оставлены 20 секунд.

Что считать своим первым результатом?

Файл открылся на вашем компьютере, все четыре сценария прошли, и рядом сохранилась запись проверок. Это маленький локальный прототип, который можно менять дальше по собственному замыслу.

Обвал закончил надписи и отбросил кисть; нам после записи правил достался первый раунд. Кнопка начисляет очки, отсчёт их останавливает, повтор даёт начать с нуля. Теперь у семейного вечера есть ещё одна короткая забава — с поведением, которое вы сами придумали и проверили.