Day 20 of 30 Day AI Challenge – Creating A Simple Game With ChatGPT

For those just joining us, every day during this challenge, I’m going to try and do something different or better, using currently available Artificial Intelligence tools.

Ready for Day 20? If you’ve been following along, you may remember that I built a basic website with ChatGPT. Well, today’s experiment takes it up a notch. I used ChatGPT to create a simple game – it was a bit trickier than the website but way more fun!

Although this project was more challenging, it was also more exciting because it allowed me to work collaboratively with ChatGPT. Plus, if you’re patient and follow the steps, it could be an excellent learning experience. I’ll keep the nitty-gritty details to a minimum for this post but will explain my approach and share the before and after states.

First, Let’s Generate Some Game Ideas:

I asked ChatGPT to help create about ten ideas overall (you’ll see the first three below).

I settled on Idea 1 – Color Shift for this experiment.

The Game Development Process

Here’s the first step in the process…pretty straightforward to begin with:

Given processing limits, ChatGPT does cut out from time to time – you can either prompt it to complete specific parts of a response, or phrase a prompt that creates output in sections.

…and here’s what the first iteration of the game ended up looking like:

As you can see, this was far from usable. There were no color labels on the sliders, plus it would be hard for a human player to just randomly mix primary colors based on sliders with no visual reference point. This was a good jumping off point in terms of refinement though…from here began a long back and forth process with ChatGPT, with my providing feedback (in simple English) at each step and the AI then tweaking code to make changes based on that.

Tweaking or fixing the look and feel at various steps…

Adding in a visual reference point for the human player…

Making the game more functional by adding in staging, timing, scoring, etc…

Fixing bugs…

More bugs…note the ChatGPT response though (feels like working with a partner)

Tweaking the scoring system and adding a way to restart the game…

More troubleshooting and tweaking…I’ll spare you all the other examples.

The Final Game (Beta Release)

Here’s where we finally ended up with the game development. There are still plenty of bells, whistles and visual tweaks that could be made, but for what was about an hour’s worth of work, I felt this landed in a pretty good (and usable) place.

As a reminder, in this game (Color Shift) the player has to match a target color by mixing three primary colors (red, blue, green) using sliders. As the player progresses, the time to match the colors decreases, and the target color becomes harder to match. I made tweaks to the game mechanics so that your score is a factor of both speed and how close you come to the target color (accuracy).

Here’s a video demo of how the game works:

I’m pretty happy with that, especially given I have ZERO coding skills! The whole process took patience but genuinely felt like I was co-creating with a partner who’s an expert coder. For those with the inclination to learn coding, paying attention to the changes made at every step would be a pretty hands-on way to learn as you go along (definitely beats reading a book or sitting in a boring classroom learning all the ‘theory’ first!).

If any of you want to play the game yourself or play with the code to make further tweaks to the game, you can download the source files here: index.html | style.css | script.js

Till tomorrow…