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.

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?

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

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?

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.

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.

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.