Недавно я был в отпуске с очень плохим интернетом. На iPhone было пару игр, но они быстро надоели.
Тогда мне пришла идея создать простой сайт с играми, который мог бы работать без интернета: чтобы один раз загрузил страницу и играй сколько хочешь.
Поскольку я совсем не разбираюсь в разработке, я решил поручить эту задачу ChatGPT с GPT-5. Заодно на реальном примере проверил его способности в программировании.
КРАТКОВторая игра — «Морской бой»
Третья игра — «Города»
Четвёртая игра — «Сапёр»
Пятая игра — «Крестики-нолики»
Первая игра — математический тренажер
Математический тренажер, который работает без интернета
Сначала я попросил ChatGPT сделать сайт с простыми математическими примерами, где нужно писать только правильный ответ.
В промте я подробно описал то, что хочу увидеть, а ChatGPT написал код и объяснил, как его запустить локально на компьютере.
📍 Промт
Я хочу сделать простой сайт с простыми математическими примерами для тренировки мозга. Например, чтобы можно было порешать примеры в очереди или в дороге. Они не должны быть сложными. Наоборот, их должны уметь решать даже школьники в 5-6 классе.
Я ничего не понимаю в программировании, поэтому хочу, чтобы ты написал такой сайт и объяснил, как его запустить.
Сайт должен состоять из одной страницы, на которой показывается пример и окно для ввода ответа. Если ответ правильный, то появляется зеленая подсветка и надпись «Правильно», «Отлично» и т.п.
Если ответ неверный, то окно ввода подсвечивается красным, а снизу появляется правильный ответ с примером решения.
Таких примеров должно быть несколько тысяч, чтобы они не повторялись слишком часто.
На выходе я получил одну страницу с готовым сайтом, где можно было решать различные примеры. Всё работало быстро и так, как я хотел.
Решив несколько примеров, стало понятно, что нужно менять уровни сложности и убирать лишние элементы.
Вот так выглядит работа с ChatGPT: он пишет что делает, а затем показывает код
Теперь все функции работают как и положено, сайт подстраивается под различные диагонали экранов, а темы переключаются автоматически.
Получился простой, но в то же время эффективный математический тренажер, который может напрячь мозг.
Вторая игра — «Морской бой»
«Морской бой» оптимизирован в первую очередь под экраны смартфонов
Пока я обдумывал правки для страницы с математическими примерами, мне пришла идея создать игру «Морской бой», которая работала бы быстро и без интернета. К тому же, она не требует больших ресурсов.
Пишу промт, посмотрим, что будет в итоге.
📍 Промт
Добавь вторую страницу, на которой будет игра морской бой.
Режим два на два. Пользователь играет против сайта по классическим правилам морского боя (они должны быть расписаны максимально понятно и спрятаны под кнопкой «Правила»).
На главном экране должно быть два поля. Крупное — пользователя, помельче сверху — сайта.
Пользователь расставляет корабли нажатиями на клетки. В качестве обозначений воды, кораблей, попаданий и утопленников используются эмодзи.
Комбинации сайта должны быть всегда разные. Он не должен за несколько ходов уничтожать мои корабли. Пользователь не должен видеть корабли противника.
ChatGPT создал рабочую версию игры, которая не нуждалась в доработках. Однако я решил внести небольшое изменение, чтобы при расстановке кораблей карта пользователя была крупнее, а затем мельче.
Также надо было добавить темную тему, чтобы ночью было играть комфортнее.
В этот момент ChatGPT решил переписать код заново, а заодно изменить всю механику игры. Всё стало только хуже.
Внезапно ChatGPT переписал весь код и выдал новую версию игры, которая работала намного хуже первой
Иногда ChatGPT начинает всё с нуля, не предупреждая об этом пользователя, создавая по сути новый проект. В таких случаях проще скопировать предыдущий (рабочий) код и добавить к нему новые инструкции, что я и сделал.
Эта попытка оказалась успешной: ChatGPT учёл все мои правки и не стал ничего менять.
Третья игра — «Города»
С «Городами» было меньше проблем
Идеи для следующих игр я придумал с помощью Gemini. «Города» — как раз та игра, которая тоже тренирует мозг, не требует никакой графики и серьезных ресурсов.
📍 Промт
Сделай страницу с ещё одной игрой — города. Пользователь должен написать город, название которого начинается на последнюю букву города, который предложил компьютер.
Когда пользователь пишет правильное слово, поле подсвечивается зеленым цветом. Когда неправильное — красным.
Можно писать только города со всего мира, но только на русском языке.
Добавь текущий счет (1 город – 1 очко) и рекорд. Также нужна темная темна и светлая тема (переключение через выпадающее меню).
ChatGPT быстро сделал игру, но, как обычно, не без недостатков. По неизвестной причине игра предлагает видимые подсказки, тем самым снижая интерес.
Кроме того, база городов получилась небольшой, поэтому не все наименования в ней присутствуют. Попросил увеличить базу и скрыть подсказки.
ChatGPT может писать код с правками 4–5 минут. Это видео ускорено в 20 раз
Всё хорошо. Только надо сделать подсказки скрытыми, чтобы они показывались при нажатии кнопки. И увеличь базу городов, особенно российских.
После внесения правок получилась хорошая рабочая игра.
Четвёртая игра — «Сапёр»
«Сапёр» был написан тоже очень быстро
«Сапёр» — это ещё одна очень простая игра, в которую играл, наверное, каждый пользователь Windows XP.
Я попросил ChatGPT сделать классический «Сапёр», только дополнив его эмодзи на поле боя.
📍 Промт
Сделай ещё одну страницу с игрой Сапер. В качестве обозначений на поле используй эмодзи. Остальные правила — как в классическом сапере.
Также сделай кнопку «Правила», которая будет показывать правила игры. Эти правила должны быть расписаны коротко и понятно, без воды.
Сделай светлую и темную тему.
По какой-то причине на странице не отображалось поле боя, а при нажатии на кнопку «Новая игра» ничего не происходило. Сказал об этом ChatGPT и отправил его искать ошибку.
Я был уверен, что ChatGPT даст отписку, но он действительно нашёл недостатки в своём же коде и исправил их
ChatGPT нашёл ошибку в своём коде и сам исправил её.
В остальном с этой игрой не было никаких проблем. Всё сразу заработало и не потребовалась никакая доработка.
Пятая игра — «Крестики-нолики»
Игра «Крестики-нолики» была создана без проблем с первого раза
Последняя игра для этого проекта — «Крестики-нолики», тоже с эмодзи.
Максимально простая и всем знакомая игра, поэтому не буду долго затягивать, а сразу покажу, что получилось. Тем более, что ChatGPT с первой попытки всё сделал хорошо.
📍 Промт
Сделай страницу с игрой крестики-нолики. В качестве крестиков и ноликов используй эмодзи. Поле 3х3. Добавь переключатель тем. Больше никаких настроек.
Что ещё сделал ChatGPT
Весь сайт занимает 90 Кб, залил его на GitHub
В итоге у меня получилось пять страниц, которые никак не связаны друг с другом. Поэтому я решил это исправить, прежде, чем выгружать их в сеть.
В ходе тестов я понял, что надо сделать выпадающее меню, в котором будут перечислены все игры, а также спрятаны настройки темы.
Главное, чтобы ChatGPT сделал всё как надо. Чтобы избежать ошибок, в каждый промт буду вставлять код сайта, чтобы ChatGPT применял настройки сразу в нём, а не искал старый код (зная его он может ошибиться).
Эти сайты ChatGPT 5 написал намного быстрее, потому что не использовал рассуждение
На протяжении всего проекта ChatGPT работал в режиме рассуждения. Из-за этого ему требовалось больше времени на обдумывание ответа и написания кода.
Я попробовал применить те же промты в обычном режиме. ChatGPT написал код быстрее, но сделал проект проще. Не могу выделить лучший вариант, мне понравились оба.
ChatGPT предложил несколько вариантов размещения сайта
После того, как все страницы были окончательно отредактированы и объедены между собой, я попросил ChatGPT объяснить, как выгрузить мой сайт в интернет.
Он предложил несколько вариантов. Я выбрал GitHub, потому что это самая популярная и знакомая площадка. Свой домен и хостинг тоже можно сделать, но для такого проекта это кажется излишним.
▶︎ Ссылка на сайт
▶︎ Репозиторий GitHub (можно посмотреть весь код)
ChatGPT объяснил, как создать свой репозиторий, какие настройки применить и сам написал файл Readme с описанием игр. От меня потребовалось только сделать скриншоты, залить их в репозиторий и вставить скопированный текст.
До сих пор под впечатлением
Все игры хоть и простые, но сам бы я их написать не смог. В совокупности на этот сайт я потратил примерно два часа, в основном ожидая, когда ChatGPT выдаст новый код.
Я и раньше знал, что ChatGPT хорошо работает с кодом. Но, признаюсь, практически не использовал эти возможности.
Теперь появилось желание освоить какой-нибудь язык программирования с помощью ChatGPT.
Все простые вещи которые в интернете миллион раз описаны, приведены в примерах стеков и т.д. нейросеть делает очень легко. Проблемы начинаются когда делаешь нестандартные задачи или когда задача сложная и у нейросети заканчивается контекст. В первом случае она галлюцинирует, во втором делает 90% и оставшиеся 10% добить очень и очень сложно.