Build a web game like Wordle with AI and Replit

Spin up web games easily using ChatGPT and Replit - no coding knowledge needed.

Tags Streamline Icon:
Wrench Streamline Icon:
People Man Graduate Streamline Icon:

In this tutorial, we’re going to go from a high-level idea to a fully functional web game using only ChatGPT and Replit. We’ll build a word game like the New York Times’ Wordle.

If you don’t know how to code, no problem, ChatGPT will be doing all of the coding for you. If you do know how to code, this tutorial will help you move faster in your web game ideation and development process.

As you walk through this tutorial, you can bring your own game idea and follow our steps for reference, or you can build our game idea — “Lexicon Ladder.”

You’ll need:


  1. Generate game ideas with ChatGPT
  2. Ideate on game mechanics with ChatGPT
  3. Generate HTML, CSS, and JS game code with ChatGPT
  4. Host your game in Replit
  5. Test and iterate on your game
  6. Scale your game
Products Give Gift 1 Streamline Icon:

Try before you bite?
This one's on us.

Sign up for a free account to view our free courses

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Generate game ideas with ChatGPT

The first thing we need to do is come up with game ideas. I enjoy playing New York Times games like Wordle and Connections, so I’m going to prompt ChatGPT to come up with game ideas similar to these popular word games.

💡 Tip: If you already have a game idea in mind, you can skip to the next step of this tutorial.

Sample prompt:

I want to develop an HTML, CSS, and JS-based web game like the New York Times' Wordle or Connections. Can you come up with some ideas for games like these that we could develop together?

If you like one of the games that ChatGPT generates, you can move on to the next step to begin ideating on the detailed game mechanics. However, if you want more game ideas, you can prompt ChatGPT to provide additional concepts. You can even provide feedback on the previous set of ideas to help hone in on a more specific game concept.

I want it to be a word game. Like the Word Builder idea you provided or like the New York Times Wordle. Can you provide some more game ideas like these?

The idea that I want to develop with ChatGPT is “Lexicon Ladder”, so in the next step, I’ll work with ChatGPT to create detailed game mechanics for this game.

Ideate on game mechanics with ChatGPT

Now that you have your game idea, we can work with ChatGPT to develop detailed game mechanics. If ChatGPT came up with the game idea (from the previous step), you can reference that game in your prompt here. Otherwise, describe your game idea to ChatGPT in place of our sample prompt.

I like the Lexicon Ladder game idea. Let's go with that! Can you provide detailed game mechanics for this game?
💡 Tip: ChatGPT will often provide a more complicated set of game mechanics than we will want to develop in our first version. This is a good thing! It’s helpful to see where the game can eventually go. But like good product development practices, it’s best to start with a simple first version of our game. This will make the initial code more manageable with fewer errors. You can always add more features in the future.

To simplify the game mechanics, we’ll review all the game mechanics ChatGPT has provided and explicitly instruct ones we don’t need to be removed. In addition, we’ll let ChatGPT know we want to build a simpler first version of the game too.

This is great! But I want to build a simple first version of this game to start. Can you update the game mechanics accordingly for this first version? I want just a single screen with a keyboard and the game board, and a mechanism to catch errors and instruct the player when they've won. Specifically, I'd like to update the game to:

- Not use APIs, but instead a static word list to start

- Only use local storage

- Only be one screen with the game

- No timers or leaderboards
💡 Tip: If you’re developing a different game, you’ll want to edit the sample prompt to match the specific game mechanics accordingly. The important thing here is to instruct ChatGPT to reduce your game to the simplest first version possible to start. This will make the initial development process much easier. You’ll thank us later!

Generate HTML, CSS, and JS game code with ChatGPT

Now that we have the first version of our game mechanics defined, we can have ChatGPT generate the HTML, CSS, and JS code for our game. If you’re not a programmer, don’t worry, we’ll just be copying and pasting this code into Replit in the following step.

This is great. I'd like to generate the HTML, CSS, and JS code for this version of the game. I will be hosting this code in Replit. Can you generate the entire code for this version of the game?
💡 Tip: If you have reference images or designs you want ChatGPT to emulate, you can upload them as part of this prompt. ChatGPT will reference these when generating the CSS for your game, making it look and feel similar to your reference images.

ChatGPT should generate three separate files for your game: HTML, CSS, and JS. We’ll be copying each of these code files into Replit in the next step.

Host your game in Replit

Now that we have the code files for our game, we can head over to Replit to host the code and test our game. If you’re unfamiliar with Replit, it is an AI-driven software creation platform where you can build, share, and ship software fast. It’s perfect for our use case, where we have multiple code files we want to review and test quickly.

To get started, create a free Replit account if you don’t already have one, navigate to the home page, and click the “Create Repl” button.

From there, select the HTML, CSS, JS Template and give your project a name. I’ve named mine “Lexicon-Ladder”. Click the “Create Repl” button to create your project.

When we create an HTML, CSS, JS project, Replit will create a Repl (aka project) that already has the necessary files we need to develop and test our game. These file names and types exactly match the file names and types that ChatGPT generated for us in the previous step:

  • index.html
  • script.js
  • style.css

Once your Repl is created, go back to ChatGPT, copy the code from each file, and paste it into the corresponding file in Replit (i.e. copy the HTML and paste it into the ‘index.html’ file, copy the CSS and paste it into the ‘style.css’ file, etc.). You will want to delete any existing sample code in the Replit files.

After you’ve pasted in your code, click the “Run” button at the top of the page, and like magic, your game should appear in the right-side window, ready to test!

Test and iterate on your game

Now for the fun part, in the “Webview” window, you can start testing your game as if you were a player. If you’ve created Lexicon Ladder, you can start entering words to test the game.

💡 Tip: The first version of your game will not always be exactly what you want. Some things also might be broken. This is where you’ll hop back into ChatGPT to iterate on the code using prompts to update the game mechanics and debug issues.

For Lexicon Ladder, there are a few things I want to update in the game. In my version, the ending word does not appear on the screen, which makes it difficult to play. Also, as a new player, there aren’t detailed instructions on how to play the game. I want to add these items to my game.

Sample prompt:

This is great! There are two things I'd like to update to the game:

1- Can we display the ending word on the screen?

2- Can we add a little help icon, that when clicked, a dialog box appears with instructions on how the game works?

Can you update the necessary code files accordingly? Please generate full, updated code files for these updates.

Once ChatGPT has generated the new code files, copy and paste them over your existing code files in Replit and click the “Run” button again. Now, your game should be updated with these new additions.

💡 Tip: Given the length of code that ChatGPT has to generate, you may need to click the “Continue Generating” button at the bottom of your ChatGPT window if any of the code gets cut off. In addition, as your game gets more complex and the code files get longer, ChatGPT will often truncate the code files to save space. This is fine, but you have to then insert the updated code into your existing files in Replit, rather than copying and pasting over them entirely.

Scale your game

Congrats! You have a working web game. So what are some of the things you can do to scale your game?

Update features

You might notice from our example Lexicon Ladder game that we’ve hard-coded the dictionary of words in our Javascript file. This isn’t ideal, we could update this to use a dictionary API or another mechanism to make this more production quality. You can review your game code to start identifying areas you want to improve.

Add features

You might want to add menu options, a leaderboard, or the ability to save user statistics to your game. You can work with ChatGPT to ideate on these features and generate the updated code to add these features to your game.

Improve the design

You can partner with ChatGPT to update the look and feel of your game, providing more detailed design instructions or screenshots of examples to emulate.

Publish your game

Once your game is in a good place, you can move your code from Replit to a full-service hosting platform like Netlify. Replit is an awesome tool for storing and testing your code, but it’s not ideal when you want to publish to the web and have other people play it.

And that’s it! Congrats on creating a web game with ChatGPT and Replit. In a relatively short time, you’ve gone from idea to developing, testing, and hosting a web game. If you publish your game, share it with us in the Ben’s Bites Community!

This tutorial was created by Garrett.

Get full access

✔️ All 100+ courses & tutorials in our catalog
✔️ New content added weekly
✔️ Private community access
✔️ No subscription, $150 paid once
✔️ Expense it using this template. Or get a team account.
✔️ 30-day refund policy. No questions asked
Join 3,107 learners from companies like Microsoft, Coca Cola, NBA, Adobe & Google

More tutorials like this

View all

If you scrolled this far, you must be a little interested...

Start learning ->

Join 3,107 professionals already learning