Master the Art of AI Game Development

ChatGPT, zero coding experience, and a video game from scratch

Samuel Sullivan
The Generator

--

Screenshot of “Monkey Bird”

The capabilities of ChatGPT-4 are remarkable, but can this advanced AI language model enable a complete beginner to create a JavaScript video game from the ground up?

ChatGPT can generate hundreds of lines of perfect code and take you through the game development process from start to finish, teaching you along the way.

Reverse Prompt Engineering

ChatGPT knows way more about developing games than me, so I had it help write the prompt. Having ChatGPT help create its prompts saves time and produces more ideal results. The best part is that all reverse prompts start the same, so this form of prompt engineering can be applied to various situations.

Starting prompt:

I want you to become my prompt engineer. Your goal is to help me craft the best possible prompt for my needs. The prompt will be used by you, ChatGPT. You will follow the following process: 1. Your first response will be to ask me what the prompt should be about. I will provide my answer, but we will need to improve it through continual iterations by going through the next steps. 2. Based on my input, you will generate 2 sections. a) Revised prompt (provide your rewritten prompt. It should be clear, concise, and easily understood by you), b) Questions (ask any relevant questions pertaining to what additional information is needed from me to improve the prompt). 3. We will continue this iterative process with me providing additional information to you and you updating the prompt in the revised prompt section until we have answered all of your questions.

ChatGPT responded, and we started engineering the perfect prompt.

After many iterations, the engineered prompt looked like the following.

Develop a hyper-casual, JavaScript-based side-scrolling game app called “Monkey Bird” featuring a winged monkey in a yellow desert landscape. The player must navigate the monkey between grey stone castle pillars with black outlines, without crashing. The monkey should be brown, wear a red vest, and have small white wings. A calming instrumental music should play in the background. The game should display the top score in the top right corner and become slightly more difficult over time. Controls include touching the screen for the monkey to flap its wings, causing it to briefly dip and then propel itself upward. The game should be developed for free and completed within a couple of hours before selling it on the Apple Store. The icon should have a monkey face on a yellow background.

Game Inspiration

The gameplay for “Monkey Bird” came from the infamous “Flappy Bird” game. The game elements were Wizard of Oz themed. The yellow brick road influenced the yellow background, and the monkey with wings was based on the flying monkey characters.

The Monkeys from The Wonderful Wizard of Oz — Wikimedia Commons

Next, ChatGPT gave me its answer through steps to create the game.

The steps might seem obvious if you are an experienced coder, but they helped me get started. I downloaded Visual Studio Code and was off to the races.

Developing the JavaScript Code

I chose JavaScript because I’ve heard it’s not easy for beginners. Anytime I had a question, I asked ChatGPT. I had questions early and often.

ChatGPT gave me the code for the index.html, styles.css, and game.js files. I stored them in a folder on my desktop to test the game in a web browser as it developed.

Creating a working game took a couple of hours, and there was a lot of trial and error. Whenever I encountered a problem, I had to query ChatGPT-4 about fixing it because I had no experience. This often included copying and pasting the whole game.js code into the chat to identify issues.

For example, my code had an error where I could only see the background color. It took rearranging the code so the constants and functions were all in the correct place and each was closed with brackets correctly. ChatGPT often included explanations for the code, which made it easier to understand. With time, I could read the JavaScript code and understand it.

The most significant limitation was the code output maximum. ChatGPT-4 could only output 90 lines of code at a time. This was fine initially, but there were incomplete responses when the code got longer. As a result, I sometimes had to prompt ChatGPT for the rest of the code.

Most impressive was how ChatGPT provided complex code to solve my problems. For example, when I wanted the wings to disappear when they flapped, ChatGPT understood my plain language and quickly adapted it to code. With one instruction, it created an “if” function that achieved my desired result.

A function to draw the monkey, its wings, and how it will flap its wings.

ChatGPT also added gravity to the game.

A function to update the monkey, adding gravity to the game.

The Final Product

The game works! It’s a simple game, but the gameplay is similar to what I imagined. I decided not to develop it to the point of release in the app store, but I might return to the code, add more detail, and continue to improve the game.

Watch the following short video for the complete game.js code and to see the game in action.

Video by the author posted to YouTube.

The monkey is a brown circle with two white circular wings. The monkey appears to flap its wings when the player clicks. The click causes the wings to disappear and propels the monkey upward until gravity takes over. I admit the wings look more like eyes blinking, but it’s an enjoyable detail. To make the game easier, I made the pillars smaller and the gaps between the pillars larger. This allowed me to triple my high score.

New high score!

Conclusion

As a non-coder creating “Monkey Bird” was a thrill and more successful than I thought possible. Of course, it was far from perfect, but with the help of ChatGPT-4, I created a working game in JavaScript from scratch.

This process produced a game in a couple of hours and taught me a lot about JavaScript and game development. Zero coding experience was not a barrier to starting, and hundreds of lines of code later, “Monkey Bird” is fully operational.

What would you like to see ChatGPT code next?

--

--

Samuel Sullivan
The Generator

Student of Life & Teacher by Profession | Creator of the History-centered publication Frame of Reference, Join us!