Building a short game with ChatGPT

Blog AI Code
If you'd like to discuss this, join the thread on Twitter.

The new 3.5 version of GPT from OpenAi dropped recently, and I've been amazed with everything I've seen so far. I'm particularly impressed that GPT is now able to understand and generate code. Code that works.

In less than an hour I was able to generate a small game from scratch, with zero coding , entirely driving the ChatGPT interface.

You can play the game too.

Using nothing but GPT prompts, I was able to get instructions and code for the following:

  • Brainstorm game names that spelled "GPT" (resulting in a theme of digging up graves for gems).
  • Initialize a new Elixir Phoenix project (a non-mainstream language that GPT won't have had special training on).
  • Set up LiveView (a specific library for building server-side interactive UIs).
  • Create a basic game system (random chance, points accumuluation).
  • Add some visual styling.
  • Add a footnote with author details.
  • Give feedback to change the functionality and correct bugs.

The game is a silly prototype, but this process was remarkable. It felt like pair programming with a colleague, and I even started to be polite in my prompts; it felt like the right thing to do.

At no point did I do anything except copy and paste. At the end of this post I list a few ways I see this tool evolving to become either a replacement for common dev tasks, or a kind of super-powered assistant.

The prompts

Here follows a list of every prompt I used, and you can see the code that was generated in this github repo. I've tidied up some of the boilerplate responses (every GPT response has some explanatory text) but otherwise I did nothing to the output. If there was a problem, I spoke to GPT about it and the chatbot fixed it themselves.

You can also skip ahead to my observations and next steps if you don't want to read a bunch of code.

Brainstorm 5 names for a game about digging up treasure, where the name spells the initialism GPT.

Gold Pit Treasure, Great Pit Treasure, Grand Pit Treasure, Graveyard Pit Treasure, Glittering Pit Treasure

I'd like to start an elixir phoenix project called gpt so we can build a game together. I'd like it to use liveview, and to not use ecto. What's the command I should use?

mix phx.new gpt --no-ecto --live

I have an elixir phoenix app called called "Gpt". We're going to make a game. Write a liveview module for this app that has 3 elements:

- A header element that says "GPT: Graveyards, Pits & Treasure".
- A "Gems" counter that starts at 0.
- A button that says "Dig up the next grave?".

When I click the button, there is a 50/50 chance that either I gain 10 gems, or I fall into a pit and die. If I die, the gem counter changes to say "You fell into a pit. You are dead".

[Code omitted] - See the github project - But the output was a valid Elixir module with logic that behaves as requested.

But! First problem, it looks like GPT was using some old docs, as there was a deprecated function being used. Not to worry, let's tell the bot!

I get a warning for random_bool/0: `:random.uniform/0 is deprecated."

Here is an updated version of the liveview module that uses the `:rand` module instead of `:random` to generate a random number.

[Code omitted, but it works]

Change the random chance of death to be 10%

Here is an updated version of the liveview module that uses a 10% chance of death when the button is clicked:

[Code omitted, it works]

Excellent. Now, when I die, the button should become disabled.

[Code omitted, it works]

Perfect! The game works now. Here's my root.html.heex, change the tailwind style so the background is black and the text is white. [I pasted the existing html template into the chat]

[Code omitted, GPT successfully understood the HTML, understood the tailwind styles with no prompting from me, and updated the styles as requested]

Wonderful. Now wrap the inner content with a border, and add some spacing around the text.

[Done]

Great, now give that inner element a maximum width and center it. And give the parent element some spacing too.

[Done]

Great, now back to the liveview. Make the title bold, add some button styles to the dig button, and add spacing above and below the gem counter.

[Done - Whaaat?!]

Looks beautiful, thanks. Can you make the button have a lower opacity when it is disabled.

[Done!]

The final result

By this point I am stunned. The code wasn't automatically perfect, I had to help the program and explain what I wanted. But this is the start of a completely new age of human-computer interaction. With no coding, I have built a simple piece of software with a generic tool, using niche libraries and languages.

Play the game.

What's next?

This feels like the starting point for something huge, even though there were a lot of rough edges. Here's where I think this can go.

  • Use an interactive coding model. Easy win - get this integrated into a coding environment.
  • Take hidden priorities seriously. Accessibility in particular. GPT chose colors that were tought to see, and I expect a host of problems around other accessibility basics.
  • Voice input. This felt like a conversation, now I want to actually talk to this agent.
  • Integrate error feedback, test feedback, and get GPT to automatically run and recognise it's own errors. This is trivial, just output any errors back at least once.
  • Support for outlining, structural editing, and the ability for human operator to gradually provide more context.

The next few months and years of GPT are going to be incredibly exciting. And I don't think I'm being hyperbolic when I say this is going to change everything.