Совместное создание веб-сайта с 2D-игрой с использованием ChatGPT

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

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

Условия и требования

Для начала хочу отметить, что для этого эксперимента я использовал GPT-4 (версия от марта 2023 года). Перед началом проекта я поставил конкретные условия сотрудничества с ChatGPT. Я подчеркнул важность задавать вопросы, прежде чем давать ответы, обеспечивая полное понимание моих запросов и способность лучше ориентироваться в своих потребностях. Такой подход способствовал продуктивному диалогу и позволял более целенаправленно реагировать на мои требования на протяжении всего процесса.

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

Путешествие

Как фронтенд-инженер, я был рад начать это путешествие, чтобы создать футуристический веб-сайт и прототип 2D-игры в сотрудничестве с языковой моделью ИИ. Мы начали с обсуждения моих требований и определения четкого видения проекта.

Первой задачей было создание целевой страницы, которая должна была быть темной и футуристической с шестиугольными элементами и анимацией бегущего света. ChatGPT предоставил мне HTML-структуру, которую я просмотрел и проверил. Затем мы перешли к стилю CSS, убедившись, что дизайн соответствует моим предпочтениям в отношении фиолетово-черной цветовой схемы. После этого мы включили функциональность JavaScript для обработки анимации бегущих огней, внеся коррективы на основе моих отзывов, чтобы обеспечить желаемый результат.

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

Когда целевая страница была готова, мы сосредоточились на прототипе игры. Я хотел динамичный 2D-файтинг, в котором сочетались бы элементы моих любимых игр и хобби. Мы начали с создания базовой структуры игры, используя класс Game и класс Player. ChatGPT помог мне реализовать основные движения игрока, прыжки и атакующие действия, такие как удары руками, ногами и специальные атаки. Мы также добавили систему столкновений, чтобы персонаж не выходил за пределы холста, и интегрировали гравитацию для более реалистичного движения.

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

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

Более того, когда проект зашел так далеко, мне пришлось действительно понимать содержание кода, чтобы иметь возможность отлаживать его из-за разных имен переменных или понимать, как комбинировать код, когда ChatGPT дает мне только части кода с ... existing code ... Комментарии.

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

Если вас интересует результат, вы можете взглянуть на развернутый результат на одной из моих страниц Github (https://jmondaut.github.io/gpt4-website-2d-game/) или просмотреть код напрямую. на Github (https://github.com/jmondaut/gpt4-website-2d-game). Я предпочитаю поставить предупреждение об этом, потому что я намеренно не дорабатывал проект, и он будет глючным.

Заключение

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

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

Я хочу поблагодарить всех, кто помогал рецензировать эту статью, особенно Аделину, Алексис, Хольгер и Николя.

Если вы нашли эту статью ценной или проницательной, я был бы очень признателен за вашу поддержку, подписавшись на меня, Джонатан Мондо, здесь, на Medium. Я стремлюсь делиться более увлекательным и практичным контентом, который поможет вам оставаться впереди в современном быстро меняющемся мире. Не пропустите мои будущие статьи — подписывайтесь на меня сейчас, и давайте учиться и расти вместе!