[인공지능 기술] ChatGPT와 Replit을 사용하여 게임 만들기 : Build a game using ChatGPT and Replit

2024.12.10 02:27

졸리운_곰 조회 수:97

[인공지능 기술] ChatGPT와 Replit을 사용하여 게임 만들기 : Build a game using ChatGPT and Replit

ChatGPT와 Midjourney와 같은 AI 도구를 사용하면 게임 제작이 정말 쉬워졌습니다.

헛소리는 그만하자.

여러분은 제가 ChatGPT로 만든 게임을 확인하러 여기 오셨습니다.

이것이 바로 레트로 RPG 게임 스타일의 개인 웹사이트입니다.

여러분 대부분이 게임을 만드는 것에 대해 생각해 본 적이 있을 거라고 확신합니다. 하지만 코딩을 배우는 전망은 대부분의 사람들에게 그 작은 꿈을 좌절시킵니다.

하지만 미친 걸 알고 싶어? <div>를 가운데 정렬하는 게 힘든 나 같은 멍청이가 ChatGPT로 이걸 해냈어 ????.

알겠습니다. 어떻게 만들어졌는지 궁금하시겠지만, 요점은 이렇습니다.

여러분은 이미 ChatGPT에 대해 많은 것을 들어보셨을 것입니다.

이에 대해 읽는 것을 멈추고, 사용을 시작하세요.

직접 경험해보지 않으면 그 힘을 알 수 없을 거야. 이 글을 읽는 것보다는 그냥 가지고 노는 게 낫겠어 ㅋㅋㅋ

가기 전에, 이 노트의 끝에 당신을 위한 작은 선물이 있습니다. 이것을 가져가서 당신의 작은 게임에 사용할 수 있습니다. ❤️

이 메모의 요약은 다음과 같습니다.

  1. 초보자라면 누구나 ChatGPT로 간단하면서도 놀라운 앱을 만들 수 있습니다. HTML/CSS/JS에 대한 지식이 한 시간 정도만 있으면 됩니다.

  2. 고급 프로그래머라도 이 도구가 지루한 작업의 상당 부분을 자동화할 수 있다는 것을 보면 가치가 있음을 알게 될 것입니다.

  3. Replit을 설정하는 방법을 알려드리겠습니다. 초보자나 빠르게 무언가를 만들고 싶은 사람에게 매우 유용한 도구입니다.

  4. 이것은 종종 간과되는 요점입니다. ChatGPT를 그저 당신을 위해 일을 자동화하는 도구로만 사용하지 않을 것입니다. 실제로 질문을 하고 배울 수 있을 것입니다! 대화의 맥락을 추적하기 때문에 마치 자신의 일을 잘 아는 사람과 대화하는 것처럼 능동적으로 학습할 수 있습니다.

  5. ChatGPT는 여러분이 묻는 질문을 확장하는 답변을 제공하는 데 매우 능숙합니다. 게임을 만들 수 있는지 묻는다면, 그렇다고 말할 뿐만 아니라 어떤 라이브러리를 사용하면 좋은지도 알려줍니다.

  6. ChatGPT는 대화의 맥락을 추적하므로, 어색하지만 당신이 말하는 내용을 완전히 이해하는 사람과 대화하는 것 같은 느낌을 줍니다. 다시 말해, 그것은 단순히 2000년대 챗봇이 아닙니다.

  7. 기본적인 코드를 작성할 뿐만 아니라, 코드를 설명하는 능력도 매우 뛰어납니다.

  8. 실제로 마주칠 수 있는 문제를 해결하는 데 매우 좋습니다. Google/Stackoverflow/Discord Servers/등에서 몇 시간을 보내는 것과 작별하세요.

  9. ChatGPT는 때때로 특정한 문제 해결 방식에 집착할 수 있습니다. 문자 그대로 "새로운 시작을 하자. 그리고 당신이 내게 말했던 코드나 방법을 계속 제공하지 말자."라고 말해야 합니다.

  10. AI도 CSS에 약해요 ????

시작하는 데 필요한 도구

필요한 도구는 세 가지뿐입니다.

  1. Replit(무료).

  2. ChatGPT(무료).

  3. 선택한 텍스트-이미지 변환 AI 도구(무료일 수 있음).

그런데, 이 간단한 게임을 출시하면 수천 명의 다른 빌더와 함께 Nights & Weekends라는 6주 스프린트에 참여할 수 있습니다. 어떤 아이디어든 제품이나 회사로 만들기 위한 엄청난 지원과 피드백을 받게 될 겁니다.

당신이 해야 할 일은 여기에 신청하는 것뿐입니다 . [ 9:

Replit 설정(선택 사항)

계속해서 Replit 계정을 설정하세요 . Google 이메일, Github, Facebook 또는 무엇이든 할 수 있습니다.

좋습니다. 이제 Replit 계정이 생겼습니다.

왼쪽 상단 모서리에 있는 + 만들기를 클릭하여 Repl을 만듭니다 .

웹사이트에 맞는 HTML, CSS, JS 템플릿을 선택하세요 .

이제 .html, .js, .css 파일이 있는 UI와 실제 코드 자체, 그리고 라이브 웹사이트가 어떻게 보이는지 확인할 수 있습니다.

혼란스러우시다면 아래의 과정을 살펴보세요.

"화려한" 프롬프트는 필요하지 않습니다.

ChatGPT에 대한 "꼭 알아야 할" 프롬프트에 대한 수백 개의 LinkedIn 캐러셀과 Twitter 스레드를 보셨을 것입니다.

멋지긴 하지만 불필요해요.

ChatGPT라는 이름이 붙은 데에는 이유가 있습니다. 이 앱의 장점은 사용자와 대화할 수 있다는 것입니다.

제가 여러분께 드리는 유일한 조언은 호기심을 갖고 온갖 질문을 해서 그 한계를 시험해보라는 것입니다!

건설을 시작해봅시다.

????

초보자를 위한 조언

항상 자신이 만드는 것의 가장 단순한 형태에 대해 생각해보세요.

코드에 뛰어들거나 ChatGPT를 망치질하기 전에 펜과 종이를 들고 앉아서 무엇을 만들고 싶은지 파악하세요. 그리고 가능한 가장 단순한 형태로 생각해보세요.

사실, 이것이 모든 문제를 해결하는 열쇠입니다.

그러니까, 우리가 만들고 있는 것은 사실 배경 위에 움직이는 상자일 뿐입니다. 상자와 배경을 예쁜 것으로 바꾸면, 짜잔, 흥미로운 것을 얻게 됩니다.

강력한 작은 상자를 살펴보세요.

ChatGPT의 기능을 확인하세요.

제가 어떤 프로젝트에서든 가장 먼저 하고 싶은 일은 그것이 가능한지 보는 것입니다. 그래서 제가 ChatGPT에 물어본 것이 바로 이것입니다.

게임을 만드는 데 사용할 수 있는 다양한 JS 라이브러리에 대해서도 언급한다는 점이 놀랍습니다. 다음 주말에 이 주제에 대해 깊이 파고들 수 있는 완벽한 기회죠.

ChatGPT는 기본적인 코드를 작성하고 설명하는 데 정말 능숙합니다.

게임을 만들 수 있다고 알려주는 건 멋진 일이지만, ChatGPT에서 우리와 함께 게임을 만들 수 있을까요?

좋아, 충분히 보셨군요. 진지하게, 지금 당장 ChatGPT로 놀러가세요!

사실, 제가 보여드린 건 여러분이 직접 완전한 게임을 만들어낼 수 있을 만큼 충분했어요.

Chat GPT 에서 채팅을 할 수 있다고 말씀드린 걸 기억하시나요 ?

지금 당장 가서 이야기해 보세요.

마치 코딩을 좋아하고 뭔가 대단한 것을 만들도록 도와주고 싶어하는 친구와 대화하듯이 이야기하세요.

ChatGPT는 문제 해결에 능숙합니다. 초보자에게는 큰 도움이 됩니다.

ChatGPT로 무언가를 만들려고 하다가 문제에 부딪혔기 때문에 이 부분을 읽고 있기를 바라며, "글쎄, 그냥 이 글을 계속 읽고 싶어서"와 같은 어리석은 이유가 아니기를 바랍니다. 왜 그럴까요? 멋진 걸 만들어보세요 ㅋㅋㅋ.

문제가 발생하면 ChatGPT에 도움을 요청하세요.

이것은 아마도 ChatGPT로 코딩하는 것에 대한 가장 놀라운 것 중 하나일 것입니다. 그것은 당신의 문제와 간접적으로 관련된 답을 찾기 위해 Google/Stackoverflow/Discord Servers/등을 깊이 파고드는 시간을 절약해줍니다.

ChatGPT는 대화의 맥락을 추적하여 문제에 직접 답변합니다.

검은색 박스를 움직일 수 없어서 이 문제를 해결하는 데 도움이 될 수 있을지 물었습니다.

ChatGPT는 귀하의 코드베이스에 특정한 오류 코드도 해결하는 데 도움을 드릴 수 있습니다!

이건 제 정신을 약간 날려버렸습니다. 초보 코더들은 종종 오류 코드를 알아내려고 몇 시간을 보냈습니다.

이거 좀 보세요!

문제는 4번이었습니다. 1-3은 괜찮아 보였거든요. 그래서 ChatGPT에 4번을 구현하는 방법을 물었습니다.

내용은 다음과 같습니다.

이제 마무리하고, 건설을 시작할 때가 됐습니다.

ChatGPT에서 더 많은 코드베이스와 응답을 계속 보여드릴 수 있습니다. 하지만 그건 무의미할 겁니다.

ChatGPT가 나오기 전에는 점점 더 많은 기능을 추가하면서 복잡한 내용에 대한 글을 더 많이 읽어야 했을 겁니다.

지금은 상황이 다릅니다. 대화 형식으로 이 모든 정보에 즉시 액세스 할 수 있습니다! 즉, 더 빨리 배우고 구축할 수 있습니다(무작위로 복사하여 붙여넣지 않는 경우).

이것을 곰곰이 생각해 보세요. 저는 아직도 이것이 무슨 뜻인지 생각하고 있습니다.

더 자세히 알아보고 싶다면, 꼭 확인해야 할 몇 가지 참고 사항이 있습니다!

프롬프트 엔지니어링 101

제프리

•

8분 읽기

머신러닝/인공지능

ChatGPT + 데이터 과학

제프리

•

6분 읽기

데이터 과학

좋아, 그만. 내가 약속한 작은 선물이 여기 있어.

Midjourney로 만든 몇 가지 자료를 여러분을 위해 소개합니다!

위의 참고 사항을 확인하고 AI를 이용해 나만의 병든 자산을 생성할 수도 있습니다.

어쨌든, 행운을 빌고, 재미있게 지내고, 즐거운 건축을 하고, 정말 사랑해요.

xo,
제프리

여기 에서 모두 다운로드할 수 있습니다 .

 

[출처] https://buildspace.so/notes/chatgpt-replit-game

ChatGPT_Game_Assets-20241209T173001Z-001.zip

AI tools like ChatGPT and Midjourney just made it really easy for you to start making games.

Let’s cut through the bullshit.

You came here to check out the game I built with ChatGPT.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

Here it is — a personal website in the style of a retro rpg game.

I’m pretty sure that most of you have thought about making a game before. But the prospect of learning to code shuts down that mini-dream for most people.

Wanna know something crazy though? A goober like me who can barely center a <div> was able to make this happen with ChatGPT ????.

Okay, you’re wondering how it was built, but here’s the deal:

You’ve probably heard a ton about ChatGPT already.

Stop reading about it; start using it.

You won’t really know its power unless you experience it yourself. I would rather you go fk around with it than read this note LOL.

Before you go tho, I have a little gift at the end of the note for you. You can take these and use them for your own little game. ❤️

Here’s the TLDR to this note:

  1. Any beginner can now build simple yet amazing apps with ChatGPT. You only need about an hour's worth of HTML/CSS/JS knowledge.

  2. Even advanced programmers will find value in seeing how this tool could automate a lot of the tedious work.

  3. I will show you how to set up Replit — a fantastic tool for beginners, or anyone that wanna spin up something fast.

  4. This is an often missed point: you won’t just use ChatGPT as some tool that automates work for you, you will actually be able to ask it questions and learn! Because it tracks the context of your convo, you can engage in active learning as if you’re just chatting with someone that knows their shit.

  5. ChatGPT is very good at providing you answers that extend the questions you asked. If you ask if it can build a game, not only will it say yes, but also tell you what libraries are good to use.

  6. ChatGPT tracks the context of your convo, so you feel like you’re talking to someone who’s kinda awkward but totally gets what you’re saying. In other words, it’s not just a 2000s chatbot.

  7. It not only writes basic code, it’s also quite good at explaining it.

  8. It’s really good at troubleshooting problems you might run into. Say goodbye to spending hours on Google/Stackoverflow/Discord Servers/etc.

  9. ChatGPT can sometimes get obsessed with a particular way of solving problems. You literally have to tell it: “let’s start fresh and do not keep providing the code or the method you’ve been telling me.”

  10. AI sucks at CSS too ????

Tools you need to get started

There are only three tools you need.

  1. Replit (free).

  2. ChatGPT (free).

  3. Any text-to-image AI tool of your choosing (potentially free).

Btw, shipping this simple game sets you up to join 1000s of other builders for a 6-week sprint called Nights & Weekends. You'll get tons of support and feedback to turn any idea into a product or company.

All you gotta do is apply here. [9:

Setting up Replit (optional)

Go ahead and set up a Replit account. You can do it via your Google email, Github, Facebook, or whatever.

Okay, now that you have a Replit account.

Create a Repl using + Create on the top left hand corner.

Select the HTML, CSS, JS template for a website.

You will now see a UI with your .html, .js, and .css files, the actual code itself, and what the live website looks like.

Peep the process below if you're confused.

You don’t need “fancy” prompts.

You might have seen hundreds of LinkedIn carousels and Twitter threads about the “must-know” prompts for ChatGPT.

They’re cool, but unnecessary.

It’s called ChatGPT for a reason — its power lies in its ability to have a conversation with you.

My only advice to you is be curious, and ask it all kinds of things to test its limits!

Let’s start building.

????

Advice for beginners

Always think about the simplest form of what you’re building.

Before jumping into code or hammering away with ChatGPT, sit down with pen and paper to figure out just what you want to build. And think about it in the simplest form possible.

In fact, this is the key to solving any problem.

So, what we’re building is really just a moving box on a background. Replace the box and background with something pretty, and voila, you got yourself something interesting.

Check out the mighty little box.

Check ChatGPT’s capabilities.

The first thing I like to do with any project is to see if it’s even possible. So, this is exactly what I asked ChatGPT.

It’s incredible that it even talks about different JS libraries to use for making games — a perfect rabbit hole to dive into on another weekend.

ChatGPT is really good at writing basic code and explaining it.

It’s cool that it told me it’s possible to make a game, but can ChatGPT make one with us?

Okay, you have seen enough. Seriously, go play with ChatGPT now!

I’ve actually shown you enough for you to go build out a full game.

Remember how I said that you can chat with ChatGPT?

Go talk to it, like right now.

Talk to it like you’re chatting with a homie that loves to code and wanna help you build something epic.

ChatGPT is good at troubleshooting problems — huge W for beginners.

I hope you’re reading this part because you ran into some problems while trying to build something with ChatGPT, and not for dumb reasons like: “Well, I just wanna keep reading this article.” Why would you do that — go build something cool lol.

Ask ChatGPT to help when something isn’t working.

This is probably one of the most amazing things about coding with ChatGPT. It saves you time deep diving Google/Stackoverflow/Discord Servers/etc just to find an answer tangentially related to your problem.

ChatGPT tracks the context of your conversation, so it answers your problems directly.

I couldn’t get the black box to move so I asked if it could help me with that problem.

ChatGPT can even help you with error codes specific to your codebase!

This blew my mind somewhat. Beginner coders would often spend hours trying to figure out error codes.

Check this out!

Turns out, the problem was number 4 since 1-3 looked fine. I so asked ChatGPT how to implement 4.

Here’s what it said.

Time to wrap it up, time to go build.

I can continue to show you more codebase and responses from ChatGPT. But that would be pointless.

Before ChatGPT, you would’ve had to slog through more of my writing about the intricacies adding more and more functionalities.

Things are different now — you can instantly access all of this information in a conversational format! This means you can learn and build faster (if you don’t just blindly copy and paste things).

Let this soak in. I’m still considering what it all means.

If you're interested in exploring more, here are a couple of other notes you should definitely check out!

Prompt Engineering 101

Jeffrey

•

8 min read

ML/AI

ChatGPT + Data Science

Jeffrey

•

6 min read

Data Science

Okay, enough of that. Here’s the little gift I promised you.

Here are some assets I made with Midjourney, just for you!

You can check out the notes above as well and generate your own sick assets with AI.

Anyway, good luck, have fun, happy building, and I love you a lot.

xo,
Jeffrey

You can download them all from here.

 

[출처] https://buildspace.so/notes/chatgpt-replit-game

 

ChatGPT_Game_Assets-20241209T173001Z-001.zip

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
이 게시물을
목록
목록
번호 제목 글쓴이 날짜 조회 수
77 [인공지능 기술] 바닥부터 시작하는 인공지능 [수학공부]인공지능을 위한 수학 총정리/ 요약본 다운로드 file 졸리운_곰 2025.03.29 43
76 [인공지능 기술] LlamaIndex: 맞춤형 데이터로 LLM 애플리케이션을 쉽게 강화하세요 file 졸리운_곰 2025.03.12 101
75 [인공지능 기술] 휴머노이드에 "일자리 빼앗을거야?" 묻자...뼈 때리는 답변 돌아왔다 file 졸리운_곰 2025.03.07 57
74 [인공지능 기술] 대형 AI 모델서 데이터 뽑아 학습… 비용 18분의 1로 줄였다 / 딥시크 혁신 이끈 '지식 증류' file 졸리운_곰 2025.02.06 57
73 [인공지능 기술] [인공지능 그림 6] 스테이블 디퓨전 webui 나만의 모델 만들기 - kohya_ss 사용 LoRa 만들기(feat 전투복 소녀 만들기) file 졸리운_곰 2025.02.05 75
72 [인공지능 기술] Transformer²: Self-Adaptive LLMs : Transformer²: 자체 적응형 LLM file 졸리운_곰 2025.01.15 64
71 [인공지능 기술] 효과적인 에이전트 구축 : Building effective agents file 졸리운_곰 2025.01.01 97
70 [인공지능 기술] 골칫거리 AI 환각, 과학 연구에서는 혁신적 아이디어 제공 file 졸리운_곰 2024.12.25 78
69 [인공지능 기술] Replit Agent 사용법 - AI 기반 코딩 도구로 쉽게 개발하기 file 졸리운_곰 2024.12.22 59
68 [인공지능 기술] 한글 더 잘하는 llama3 찾아서 ollama에 연결하기 (feat. Bllossom ELO) file 졸리운_곰 2024.12.18 69
67 [인공지능 기술] Llama3를 내 PC에서 무료로 사용하는 방법 (GPT4All & RAG) file 졸리운_곰 2024.12.13 132
66 [인공지능 기술] "LLM 비즈니스 하향평준화돼...누구나 만들며 수익성 떨어져" file 졸리운_곰 2024.12.13 87
65 [인공지능 기술] [Python] Llama3를 파인튜닝을 통해 나만의 데이터로 학습 및 Huggingface에 적재해보자. file 졸리운_곰 2024.12.13 69
64 [인공지능 기술] Ollama + Open WebUI: Windows, Linux 또는 macOS에서 LLM을 로컬로 실행하는 방법 (Docker 없이) file 졸리운_곰 2024.12.12 93
63 [인공지능 기술] Ollama 서버에 외부에서 접속하는 방법: OS별 가이드 졸리운_곰 2024.12.12 120
62 [인공지능 기술] LLama.cpp 설치하고 실행해보기 file 졸리운_곰 2024.12.10 105
61 [인공지능기술] llama.cpp 설치 방법 및 사용방법 with LoRA file 졸리운_곰 2024.12.10 91
60 [인공지능 기술] Ollama란? Ollama 사용법: 내 PC에서 무료로 LLM 실행하기 졸리운_곰 2024.12.10 102
» [인공지능 기술] ChatGPT와 Replit을 사용하여 게임 만들기 : Build a game using ChatGPT and Replit file 졸리운_곰 2024.12.10 97
58 [인공지능 기술] "GPT 성능 향상 속도 둔화"...오픈AI, '오라이온' 개선 위해 전략 수정 file 졸리운_곰 2024.11.11 99
쓰기
태그
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED