Build a game using ChatGPT and Replit

Jeffrey

Jan 23, 2023

7 min read

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.

Here it isa 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).

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.

Check ChatGPT’s capabilities.

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.

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

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!

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

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.

Ask ChatGPT to help when something isn’t working.

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!

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

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!

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.