Как создать игру с помощью ChatGPT, не зная код?

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

Если вы никогда не слышали об этом раньше, ChatGPT — это сверхмощный инструмент искусственного интеллекта, созданный OpenAI, компанией, основанной в Сан-Франциско в конце 2015 года  Сэмом Альтманом, Илоном Маском и другими. 

В этом посте мы собираемся создать игру на javascript, не написав ни единого фрагмента кода. Как такое могло произойти? Мы собираемся получить помощь от ChatGPT! Если после прочтения этого поста вы подумаете, что некоторые вакансии могут не понадобиться в будущем, это вполне понятно. 

Во второй части этой серии я покажу, как опубликовать игру, которую мы создали с помощью ChatGPT, в Интернете, чтобы любой мог получить к ней доступ и сыграть в нее. Таким образом, вы можете поделиться своей игрой с кодом AI с друзьями и отлично провести время.

Наконец, лучше иметь некоторые практические знания Javascript. Однако, даже если вы не знакомы с ним или являетесь полным новичком, вы все равно сможете следовать большей части этого поста. И это то, в чем ChatGPT хорош.

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

Это первая часть цикла из двух частей. В этом посте будут затронуты следующие темы:

Я использовал редактор VSCode , но вы можете использовать любой редактор, который вам больше нравится. Я также рекомендую установить расширение Live Server на VSCode, чтобы легко протестировать приложение.

Для запуска этого приложения нам нужен толькоindex.htmlиindex.jsфайлы. Вот как выглядит структура моего проекта:

Я создал новую папку с именем «example-chatgpt-game», открыл ее в VSCode и внутри папки создал два новых файла с именами «index.html» и «index.js».

Теперь нам нужна структура HTML по умолчанию внутри файла index.html. Мы могли бы получить это из ChatGPT, но для упрощения я просто добавил его с помощью фрагмента кода.

Чтобы подключиться к файлу index.js, нам нужно добавить следующий фрагмент в файл index.html прямо под закрывающим тегом body (</body>)

<script src="index.js"></script>

Теперь мы установим соединение с ChatGPT и запросим нужный код. Давайте начнем.

Для всех, кто заинтересован, я включил первый запрос, который использовал ниже.

Он начал писать код и объяснять каждую часть и цель ее использования.

Я просто скопировал и вставил код в ранее созданный файл index.js. Все, что требуется, это скопировать и вставить код.

Попросив ChatGPT предоставить код небольшими фрагментами, я могу легко скопировать и вставить его в нужный файл. Это облегчает мою работу.

Обратите внимание, как он включает документацию для каждого фрагмента кода, который он пишет. Это впечатляет.

Он перешел к части 4. Я продолжаю копировать и вставлять код по мере необходимости.

На данный момент ChatGPT остановился. Я замечаю, что отсутствует часть кода, и прошу продолжить с части 5.

Похоже, ChatGPT выполнил свою задачу. Прежде чем перейти к просмотру результата, убедитесь, что весь предоставленный код скопирован в файл index.js.

Для тестирования кода, который был написан до сих пор, я планирую использовать расширение VSCode Live. Это расширение позволяет запускать приложение на локальном сервере. После установки расширения вы можете щелкнуть правой кнопкой мыши файл index.html и выбрать «Открыть с помощью Live Server», чтобы запустить его. Это делает нашу жизнь проще.

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

Поэтому я решил предоставить ChatGPT отзыв о том, что игра не до конца доработана. Я упомянул ему, что бомбы должны падать.

Он быстро получает и обрабатывает мои отзывы, внося некоторые коррективы в код.

Хорошо, это имеет смысл. Однако я чувствую проблему с кодом, известную как «запах кода», который относится к плохому или ошибочному программированию, которое становится трудно понять по мере увеличения размера. Поэтому я предоставляю следующие дополнительные отзывы:

Через некоторое время он перестает удивлять вас своими возможностями. Я хочу, чтобы вы учитывали, что он может вносить такие корректировки или улучшения кода, если вы того пожелаете. Опытные разработчики поймут мое волнение по этому поводу.

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

Сейчас буду тестировать снова.

Хорошо, теперь он работает нормально. Однако в игре по-прежнему отсутствуют некоторые элементы. Было бы интереснее, если бы были существа, которых я мог бы поразить. Поэтому я прошу ChatGPT добавить в игру несколько цыплят.

Я снова выполнил свою задачу, скопировав и вставив код в файл index.js. После этого снова тестирую.

Я хочу, чтобы игра была более визуально привлекательной. Поэтому я прошу, чтобы ИИ сделал так, чтобы цыплята имели случайно назначенные цвета и разные скорости.

После внедрения этого кода в свой проект я остановился на этом.

Я заметил, что так называемые цыплята не исчезают при попадании. Поэтому прошу исправить это.

Я считаю, что это улучшилось сейчас.

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

Я тестирую приложение и постоянно оставляю отзывы о нем.

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

После завершения финальных модификаций у меня получилась следующая игра.

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

Поздравляем! Вы успешно создали браузерную игру с помощью ChatGPT, даже если у вас нет опыта программирования.

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

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

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