A delightful experience of teaming up with ChatGPT to build a simple game

Playing the falling keys game

Recently, I teamed up with ChatGPT 3.5 to develop a simple stress-relief game that can be played on mobile browsers, and the experience was quite delightful.

It took me about three days to develop this game, mainly working on it during my baby’s nap times or when I had some alone time. It’s been a while since I’ve touched frontend code, and I’m not too familiar with the latest coding practices, though my basic skills are still there. If I had to code this myself, it would take me much longer, and I probably wouldn’t even attempt such a project. Now, I just need to present my requirements to ChatGPT in natural language, and I’ll receive functional code that I can adjust based on my needs – it’s amazing!

I asked ChatGPT to start building the game

ChatGPT turns my requirement description into code

If you’re unfamiliar with ChatGPT, it’s an AI (Artificial Intelligence) chat assistant developed by OpenAI that allows humans to communicate with it using natural language and have it help complete tasks. It has powerful capabilities in many areas, such as writing articles, polishing text, or assisting with code writing.

My simple game has no endings or rankings – it’s just about continually eliminating falling keys. When I don’t want to do anything but still want to keep my hands busy, I can put on some background music or a podcast and just tap away on my phone to clear my mind. To access the game, visit this URL http://yingyingz.com/exp/keys.

In this collaboration, ChatGPT and I had clear roles: I was the decision-maker, and it was the executor. It played the role of a frontend software engineer, generating over 99% of the game code, while I made minor modifications to a small portion of it. I, on the other hand, wore many hats, from design, debugging, and testing to deployment.

Both ChatGPT and I played crucial roles in this project. Without me, the game wouldn’t exist, and without ChatGPT, I couldn’t have completed it. In some ways, ChatGPT acted like a consultant, occasionally providing helpful advice, but the final decision was mine. I could choose to accept or reject its suggestions and have it continuously try new approaches and create new effects, which it would obediently carry out.

Of course, the key is to communicate clearly with ChatGPT so it can understand my ever-changing requirements and produce the correct code. The ChatGPT 3.5 version was surprisingly accurate and fast in understanding my requests and writing code.

Overall, I am extremely satisfied with the outcome and efficiency of this collaboration.

• • •

Here are some questions I pondered while creating the game.

What was the biggest issue I encountered during the collaboration?

The biggest issue was ChatGPT’s limitation on the number of tokens in input/output. Initially, when I made changes to the JavaScript code, ChatGPT would send me the entire code, and I would simply copy and paste it into my local file. However, once the length exceeded the token limit, its response would automatically stop, resulting in incomplete code. Even when I asked it to continue, it couldn’t display the code correctly.

ChatGPT has trouble displaying full code due to token limitation

As a result, I had to tell ChatGPT that I could write code myself and only needed the parts that required modification, so I could manually update my local file. This resolved the token quantity issue.

I asked ChatGPT to not to send me full code to avoid token limit issues

If ChatGPT can write good code, do I still need to know how to code?

I believe it’s possible to complete the task without knowing how to code, but the efficiency would be lower. This game is simple, requiring only one HTML, CSS, and JavaScript file each. ChatGPT writes code quickly, but it can also produce gibberish. For example, it once wrote a new function that implemented a feature I didn’t need at all. This could be because it misunderstood my request. If I didn’t know how to code, I might be led down a dead-end path, taking more time to revert to the previous code. Therefore, it’s best if I have a basic understanding of the programming language ChatGPT uses to promptly stop it when it writes nonsense.

I pointed out ChatGPT’s error in code

On several occasions, I pointed out that ChatGPT’s code didn’t work, and it would apologize, then reevaluate my problem or rewrite the code. I must say, AI is tireless and incredibly patient, showing virtually no resistance to my requests during the process.

ChatGPT tries new approaches after I pointed out the code was not working

What should I pay attention to when communicating with ChatGPT?

Once I clearly defined my role and ChatGPT’s, the communication method became clear. You can think of ChatGPT as a highly intelligent brain capable of accepting and outputting limited information, but unable to hear, see, or perform actions. Every piece of code it sends me is based on its massive information database, which it believes can satisfy my needs. As mentioned earlier, I took on multiple roles, essentially acting as ChatGPT’s eyes, helping it see the results of each run and telling it where modifications were needed. Of course, ChatGPT doesn’t care if I act as its eyes or not; it just answers my questions and nothing more.

The clearer my input, the more accurately ChatGPT can understand me and provide the desired answers. As the one providing requirements, I must first know what I want and then accurately describe it using natural language. When describing, if specific terms are involved (e.g., “display a dialog box”), it’s clearer to use those terms directly instead of describing them (e.g., “display a window that shows text”).

Communicate requirements clearly to ChatGPT

ChatGPT can also give me some good advice, but I have to ask proactively. For example, the game’s initial interface design was unattractive, so I asked it for help with making it look modern and minimalism. It suggested a flat design style, removing unnecessary borders, and recommended colors. I liked the idea and adopted its suggestions. Later, I made several modifications, asking it to help beautify the interface each time. It would modify the CSS to what it thought looked good, and I would then make adjustments.

Ask ChatGPT for suggestions

Additionally, ChatGPT won’t proactively help me identify issues; it’s only responsible for efficiently and effectively executing my requests. Therefore, I must actively notice any problems and communicate which issues I want to address. For example, if I need it to remember the context and notice that it has forgotten the previous code, I need to provide it again. Also, there was an instance where no matter how I changed a particular part, it just didn’t work. ChatGPT provided me with five or six different solutions, but none of them worked. Finally, I sent the entire code and asked it to find the problem, and it told me that there was one function was defined twice, possibly causing one to overwrite the other. After deleting one of the definitions, the problem was resolved. I think that even if there were programming tools that could package ChatGPT into a proactive problem-solving tool, it would still be difficult to cover all situations, as the specific issues would greatly depend on what functionality people want to achieve with their code.

Which is better, ChatGPT 3.5 or ChatGPT 4?

I completed this game using ChatGPT version 3.5.

At of time of making this game, ChatGPT 4 had two limitations: it can only have 25 conversations within 3 hours, and the speed of its responses was extermely slow. I knew ChatGPT 4 was really great at understanding requests and writing code, but due to the limitations, I chose ChatGPT 3.5 to make this game.

As a user experience designer, how can ChatGPT’s programming skills help me?

I believe user experience designers can use ChatGPT to create prototypes for interaction design. In our current work, we use design tools to turn design drawings into clickable interactive prototypes. Some prototypes might be better implemented directly through programming, but we lack the skills or engineers don’t have the time. If we can collaborate with ChatGPT, we won’t have to wait for engineers to become available. Moreover, ChatGPT 4 already supports image input, making it even more convenient.

One of the most interesting aspects of creating this game was that all the design details came to my mind without needing to sketch anything on paper. When working with ChatGPT, I can think, create, and optimize on the fly. If I were programming on my own or collaborating with another programmer, I would need to create a draft first. But since ChatGPT codes extremely fast and has a low cost for trial and error, I can let it write code based on my ideas, and then I can run and adjust it. Of course, in larger projects involving multiple people or multiple people working with AI, this approach may not be practical, and a better process would be needed. Nonetheless, the cost of trial and error would still be significantly reduced. The only limitation might be its inability to send complete code each time due to token limitations.