Код нейросети для игры: змейка в одном файле за вечер
Код нейросети для игры: как получить браузерную змейку в одном HTML-файле, открыть её без установки и поменять скорость и размер поля. Пример из LibraChat.
Евгений
Дизайнер-партнёр LibraChat
7 мин чтения
«Пап, а ты можешь сделать игру?» Сыну девять, и он уверен, что дизайнер умеет всё, что связано с экраном. Я умею рисовать интерфейсы, но не писать игры. Вечером того же дня у нас была змейка: поле 20 на 20 клеток, управление стрелками. Счёт. Кнопка «Ещё раз». Код нейросети для игры занял один файл, который открывается в браузере без установки. Ниже запрос, что пришло, как мы с сыном меняли скорость и размер поля и что я как дизайнер поправил в оформлении.
Почему код нейросети для игры начался со змейки
Сын хотел «что-то как в старом телефоне у дедушки». Змейка подходит идеально: правила понятны за секунду, а логики достаточно, чтобы было интересно разбираться. Сам я бы её не написал. Знаю, что есть поле и змейка. Есть еда, есть столкновения. Но не знаю, как это превратить в код.
Я поставил себе три условия. Один файл, чтобы не возиться с установкой. Без библиотек, чтобы ничего не скачивать. И понятные места, где можно что-то поменять, потому что сын точно захочет «побыстрее» уже через пять минут.
Запрос: что я попросил
Напиши простую браузерную игру в одном HTML-файле: змейка на поле 20 на 20 клеток, управление стрелками, счёт очков, после проигрыша кнопка «Ещё раз». Без библиотек. В конце объясни, где в коде поменять скорость змейки и размер поля.
Последняя фраза запроса оказалась самой полезной. Именно её мы с сыном использовали весь вечер.
Сначала я хотел попросить сразу всё: уровни, звук, таблицу рекордов. Остановил себя. Опыт работы с подрядчиками подсказывал, что первую версию лучше делать маленькой. Если она заработает, дальше можно добавлять по одной вещи. Если нет, разбираться в маленьком коде проще, чем в большом.
Что пришло: файл, который просто открывается
Ответ начался с инструкции на одну строку: сохранить код как файл `snake.html` и открыть в браузере. Код занял страницы три. Внутри всё: оформление, логика, управление. Я скопировал код в Блокнот, сохранил с расширением `.html`, дважды щёлкнул по файлу.
Открылось тёмное поле с рамкой, сверху заголовок «Змейка» и счёт. Нажал стрелку, змейка поехала. Съела первую клетку еды, счёт стал единицей. Врезалась в стену, появилась кнопка «Ещё раз».
Сын играл 20 минут, не отрываясь. Потом сказал: «А можно быстрее?» Я ждал этого вопроса и уже знал, где искать ответ.
Код нейросети для игры: две цифры, которые мы меняли
В конце ответа было объяснение, ровно как я просил:
Константа SPEED = 140. Это пауза между ходами в миллисекундах. Меньше число — змейка быстрее (например, 90), больше — медленнее (например, 200).
И про поле: константа `GRID = 20` задаёт число клеток по стороне, а `CELL = 20` — размер клетки в пикселях. Если поле стало слишком большим, уменьшить `CELL`.
Вот что мы пробовали в тот вечер:
Что меняли · Было · Стало · Что вышло
Скорость — 140 — 90 — змейка носится, сын в восторге
Скорость — 90 — 60 — слишком быстро, проигрыш за секунды
Скорость — 60 — 110 — золотая середина для сына
Размер поля — 20 — 30 — поле больше, играть дольше
Размер клетки — 20 — 15 — поле 30 на 30 влезло в экран ноутбука
Каждая правка — одно число в начале файла. Сохранить, обновить страницу в браузере, проверить. Через 30 минут сын делал это сам. Без меня. Для него это была первая в жизни правка кода, и он очень гордился. На следующий день он показал змейку другу и объяснил, где «живёт скорость». Друг попросил прислать файл. Так наша игра за вечер разошлась по двум квартирам, а потом и по всему классу.
Как я сначала ошибся
Каюсь, первую версию я чуть не испортил сам. Решил, что могу поменять размер поля «на глаз», и поставил `GRID = 50`. Поле стало огромным и вылезло за экран ноутбука, половину змейки было не видно. Сын расстроился, я тоже.
Сначала я полез увеличивать клетки, думая, что так будет нагляднее. Вышло ещё хуже. Потом перечитал объяснение из ответа. Там было сказано ровно про это: если поле стало слишком большим, уменьшить размер клетки. Поставил `CELL = 12`, и поле на 50 клеток уместилось. Правда, играть на нём оказалось скучно: змейка слишком долго ползла до еды. Вернулись к 30.
Вывод простой. Объяснение в конце ответа стоит прочитать до первой правки, а не после третьей. Это две строки, и они экономят полчаса.
Ещё одна вещь, которую я проверил на себе. Сын лучше всего запомнил не саму игру, а то, что числа в коде можно менять. Через неделю он спросил, нельзя ли так же поменять что-нибудь в мультике. Пришлось объяснить, что мультики устроены иначе, но интерес к тому, как всё работает изнутри, у него остался.
Что я поменял как дизайнер
Код нейросети для игры был рабочим, но оформление строгое: тёмный фон, серая рамка, простой шрифт. Для девятилетнего игрока я сделал три вещи:
Цвет змейки поменял с исходного на ярко-зелёный, а еду на красную. Сын сразу сказал: «Как яблоко». Так и прижилось.
Добавил над полем строку «Рекорд», которую мы считали на бумажке рядом с ноутбуком. В код её не вписывали, просто договорились.
Увеличил шрифт счёта: на расстоянии от экрана мелкие цифры читались плохо.
Цвета я искал поиском по коду: там, где стоят значения вроде `#1a1a1a`. Названия цветов в коде говорящие, и найти нужное место было просто. Для меня, дизайнера, это была самая приятная часть: наконец я не объяснял разработчику, какой нужен зелёный, а поставил его сам.
Код нейросети для игры: что ещё можно попросить
Через пару дней сын пришёл с новыми идеями. Я записал их, чтобы отправить следующим сообщением в тот же чат:
чтобы змейка проходила сквозь стены и появлялась с другой стороны;
чтобы скорость росла с каждым съеденным яблоком;
чтобы рекорд сохранялся после закрытия браузера.
Каждую правку удобнее просить по одной. Если попросить три сразу и что-то сломается, будет непонятно, какая из трёх виновата. Так проще понять, что изменилось, и вернуться назад, если что-то сломалось. Каждую удачную версию мы оставляем отдельным файлом с номером в имени. Если новая правка ломает игру, достаточно открыть прошлый номер.
Что ещё я заметил как дизайнер
Игра, собранная за вечер, оказалась хорошим уроком интерфейса. Сын путался, когда кнопка «Ещё раз» появлялась поверх поля: ему казалось, что игра ещё идёт. Я затемнил поле под кнопкой, и вопросы исчезли. Мелочь, но это ровно та работа, которую я делаю каждый день в приложениях: показать человеку, в каком состоянии сейчас экран.
Второе наблюдение. Счёт сверху сын не замечал, пока играл: глаза на змейке. Я перенёс крупный счёт прямо под поле, ближе к взгляду. Он сразу начал следить за очками и ставить рекорды.
Где граница
Змейка в одном файле — это игрушка для вечера, а не игра для магазина приложений. Если хочется настоящую игру с уровнями, графикой, звуком, это уже работа на недели, и тут понадобится разработчик или движок для игр.
И второе. Нейросеть пишет код по описанию. Если в описании дыра, в игре будет дыра. Например, я не уточнил, что делать, если нажать две стрелки почти одновременно. В коде это предусмотрено: змейка не может развернуться назад. Но о таких вещах лучше думать заранее и писать их в запросе.
Придумай простую игру, которую можно описать в трёх строках: змейка, крестики-нолики, угадай число. Отправь описание в чат LibraChat и попроси в конце объяснить, где менять главные числа. Сохрани файл, открой в браузере, попробуй поменять одну цифру. Если рядом есть ребёнок, отдай ему вторую правку. Для такой игры платная подписка не понадобится, а тарифы можно сравнить на этой странице.
код нейросети для игрызмейкаhtmljavascriptигра для ребёнкадизайн игры
