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

Глубокое погружение в создание игры на javascript без программирования

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

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

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

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

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

Как создать игру с помощью ChatGPT

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

Содержание

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

  • 1. Обзор/структура проекта: Обзор проекта на высоком уровне.
  • 2. Взаимодействие с ChatGPT: Мы опишем нашу желаемую игру для ChatGPT и реализуем сгенерированный ею код.
  • 3. Тестирование кода : Мы будем тестировать нашу игру, вносить коррективы и улучшать ее внешний вид.

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

1. Обзор/Структура проекта

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

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

пример-chatgpt-игра/

index.html

index.js

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

создание структуры по умолчанию для игры chatgpt в vscode для создания игры с помощью chatgpt



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

добавление структуры по умолчанию в файл index.html с помощью фрагментатора кода



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

<script src="index.js"></script>
добавление соединения index.js в файл index.html

2. Взаимодействие с ChatGPT

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

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

напиши мне игру на javascript когда робот двигается и сбрасывает бомбы, не используйте HTML, дайте код игры по частям

попросить chatgpt написать игру на javascript



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

первый ответ chatgpt для игры с javascript



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

вставка кода в файл index.js для создания игры с помощью chatgpt

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

Chatgpt написание кода для управления движением в игре



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

chatgpt продолжает писать код для игры



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

Chatgpt пишет игру на javascript, часть 4



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

Chatgpt пишет игру на javascript, часть 5



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

Chatgpt пишет игру на javascript, часть 5 (продолжение)


3. Тестирование кода

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

тестирование игры с использованием расширения vscode live server



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

GIF просмотра игры, написанной до сих пор в браузере



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

попросить chatgpt добавить функционал в игру

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

chatgpt внесение корректировок в код по желанию



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

запросить у chatgpt улучшение кода



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

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

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

GIF-файл, показывающий добавленный функционал игры.



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

попросить chatgpt добавить цыплят в игру
Ответ chatgpt о добавлении курицы в игру
Ответ chatgpt о добавлении курицы в игру, часть 2
Ответ chatgpt о добавлении курицы в игру, часть 3



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

гифка, показывающая игру в браузере с добавленными цыплятами



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

попросить chatgpt улучшить внешний вид игры
ответ chatgpt для улучшения внешнего вида игры
ответ chatgpt для улучшения внешнего вида игры part2



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

гифку, показывающую игру в браузере с добавленными цыплятами разной скорости и цвета



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

попросить chatgpt сделать так, чтобы цыплята в игре исчезали при ударе
ответ chatgpt за то, что цыплята в игре исчезают при ударе
ответ chatgpt за то, что цыплята в игре исчезают, когда они нажимают часть 2



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

gif с изображением написанной игры в браузере



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

попросить chatgpt улучшить внешний вид персонажей в игре
попросить chatgpt улучшить внешний вид персонажей в игре part2
gif, показывающий игру с улучшенным внешним видом



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

попросить chatgpt внести коррективы в внешний вид
попросите chatgpt внести коррективы во внешний вид, часть 2

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

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

gif с финальной версией игры


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

Заключение

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

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

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

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

Есть вопросы? Вас пугает усиление конкуренции на рынке из-за поддержки разработчиков ChatGPT? Оставьте комментарий ниже.

Спасибо за чтение!

Нравится прочитанное? Пожалуйста, поделитесь с друзьями:
Чат GPT
Comments: 1
  1. Екатерина

    Не думала, что создавать некоторые игры так просто. Буду пробовать.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: