How I Used ChatGPT to Create a Game
You can build your own games now
I recently had an idea for a web-based game I wanted to build. Unfortunately, I have zero experience with web development, HTML, JavaScript, and CSS. So I thought to ask ChatGPT for help to get started. It worked.
In this post, I’ll share some thoughts on the experience, as well as the more detailed step-by-step process of building the game for those who are curious!
Long Story Short
As you’ll have seen if you clicked above, the ‘game’ I built with ChatGPT is extremely simple: it generates letter tiles based on the frequency of each letter in the English language. As the user types a letter, it appears on the bar at the bottom, and the corresponding tile disappears. The game checks whether the word thus formed is valid in the English language; if it is, and the user hits enter, the word moves to the bar at the top.
Building this took me just a couple of hours. Without ChatGPT, I’d probably be able to do it in a matter of days of concentrated work — and given that I have a full-time job and two kids (i.e. not much time for concentrated work), it would actually take weeks or months. But that’s missing the point: it’s not that with ChatGPT I was able to do this faster — it’s that I did it at all. Without ChatGPT, I just wouldn’t have bothered. I have no interest in learning web development; tweaking code in a new language is fine, writing it from scratch is not.
So, here are my takeaways from this experience:
ChatGPT is remarkably good at understanding what you want and writing 90% of the code to do it. Unfortunately, though, this leaves 10% that you’ll need to do yourself. This means that unless you have at least a basic level of familiarity with coding, you won’t be able to use ChatGPT to create apps from scratch.
This is due to three things: first, ChatGPT makes mistakes. Second, it sometimes leaves blanks in the code for you to fill in. Third, it doesn’t do a great job of being cohesive. Let’s go through these in turn:
ChatGPT makes mistakes
The first iteration of the code ChatGPT produced did not generate letter tiles as instructed: all letters were equally likely to appear, instead of common letters like ‘e’ appearing more often.
What was weird about this is that ChatGPT had understood my instructions: it actually created code that would enable it to refer to each letter’s frequency in the English language it just… didn’t use it for some reason.
Of course, you can have ChatGPT debug its own code. In this case, I told it had it had done wrong, and it updated its code— though, we we’ll see later on, this is where the ‘cohesion’ issue comes up.
It leaves blanks
At times, ChatGPT likes to ask you to do some work yourself, lest your brain atrophies:
As it happened, this function was particularly hard to build, for reasons I expand on in the Long Story Long section, for the geeks among you. Someone without technical knowledge might struggle to do this.
But, you ask, why not tellChatGPT to fill in the missing code? Well…
It’s not always cohesive
If you ask ChatGPT to write the missing code above, it might do it, but the code it produces might not work well with the rest of the code it has written.
For example, when I asked it to update the code for ensuring letter tiles appear in accordance with the letter’s frequency in the English language, it wrote code to do that — but it did not tell me how to use that code to actually make the tiles appear on the screen. In this case, fixing the issue was very easy, literally a 2-second job. But it won’t always so — the second example above (that of the missing code) was harder to address, and certainly couldn’t be done by someone without a coding background.
Obviously, this issue compounds the larger and more complex the program you’re building. The more things you ask GPT to build, the harder it’ll be ensuring they all work together.
Conclusions
I wrote above that ChatGPT wrote about 90% of the code. I’m pretty sure I could have got it to write the remaining 10%, but it was just not worth it: the effort of figuring out the right way to prompt ChatGPT and wrangling with its responses was less than that of writing the remaining 10% myself.
So we’re not at the point yet where complete newbies can use ChatGPT to write apps for them — but we’re so close! You can easily imagine that this will happen in the next one or two GPT iterations.
Does this mean software engineers will become obsolete? I don’t think so. I shared this story with a friend, who responded with this:
This is spot on. Coders won’t disappear, but their main focus will shift to (what I think) is the exciting part of coding anyway — defining the problem, and designing a conceptual solution. I.e. the creative stuff, not the grunt work.
(For now though, I do need grunt work to get this game over the line — if you’re a web developer and want to help get in touch!)
Read on if you want to see my actual prompts and ChatGPT’s responses - but first, please subscribe!
Long Story Long
OK, here’s my journey step-by-step, in case you’re curious!
Version 1
I started with the basics:
I have used Python in the past, so I decided to go with that.
ChatGPT responded with a long preamble, explaining to me how to structure my code — but it didn’t write much code itself, it just gave me this:
I pressed for more:
And ChatGPT obliged (only sharing a portion of the code here):
However, for some reason, it crashed before finishing the code. I asked it to try again, and again it crashed at the same point. I changed tack, and instead of asking it to try again, I told it to resume where it had left off. This worked:
OK, I now had the code. But what do I do with it?
Hm. Getting complicated.
Yep, here ChatGPT lost me. Time for attempt #2.
Version 2
BOOM:
You’ll notice that again ChatGPT stopped abruptly, but that’s easy to fix:
OK, time to test it.
Unfortunately, ChatGPT’s tips didn’t work here. I ended up using W3School’s online HTML editor.
Version 3
Running the code above, I generated this:
Hmmm, doesn’t look right, does it. X, Q, 2 Ys, but no A? Only one E?
Yep. Look at the code for generating the tiles:
Weirdly, though ChatGPT did go through the trouble of generating letter weights, it totally disregarded them when generating tiles, and it picked letters at random.
This looks much better!
But I wanted the interface to do more:
Version 4: manual wrangling
I had one more request for ChatGPT:
Unfortunately, this request kinda pushed ChatGPT to its limits, usefulness-wise.
As you can see above, it didn’t give me the code for isValidWord — and it turns out it’s hard to get that code to work with the rest of this algorithm’s logic. The reason is that to check a word’s validity, we have to ping an outside API, which is an asynchronous call. Long story short, it’s hard to get the API to wait for a response, and return true or false accordingly.
ChatGPT itself helped me debug this:
ChatGPT also neglected to tell me that I had to update my CSS code.
As I mentioned above, I have no experience with web development, but I do know how to code. So, I was able to fix all this manually.
Hosting
OK, I now had my code, but how do I publish it?
I followed these instructions. I registered with Google Domains, created a Bluehost profile from within Google Domains, added two HTML boxes in the homepage Bluehost generated automatically, and copy-pasted the CSS code in one, and the JavaScript code in the other:
All done!