I “Made” a Computer Game (and So Can You)
I used Bing AI and ChatGPT to create a super simple Javascript game. It was disarmingly easy. Pretty much anyone can now write basic code.
“The hottest new programming language is English”
That’s what OpenAI’s Andrej Karpathy wrote on his Twitter in late January.
If that sounds a bit abstract, it’s not. It’s quite literal.
With ChatGPT and Bing AI, anyone can now code using natural language.
Don’t believe me? Check out this basic arrow-matching game I “built.”
(The goal is to press the arrow key that matches the text in the bottom-right “console” screen. You’ll need to be on a desktop PC.)
Wanna guess how much of that Javascript and HTML code I personally wrote?
Yeah, zero. Zilch. Not a single character.
Remember how in my very first Substack post I said I was a crappy artist?
I’m even less of a coder. I have a very rudimentary understanding of HTML and CSS. Until recently, I thought Python was a type of giant snake. (OK. I just looked it up, and that’s apparently still the case. Shit.)
So believe me when I say: If I can create a functioning game with the help of artificial intelligence, so can you.
LLMs: The last level of coding abstraction?
Large language models like ChatGPT may be the final frontier in our pursuit to raise the level of abstraction in how we talk to computers.
Programming languages are already far removed from the 1’s and 0’s computers actually operate with. But even the most high-level code is still difficult for non-programmers to understand and write.
With LLMs, we’re now the closest we’ve ever been to talking to computers the way we talk to each other.
You’ve likely already seen examples of programmers supercharging their routine with ChatGPT or beginners creating stuff from scratch without any prior knowledge of code.
Let’s take a look at how this might work for you.
How exactly can AI help?
I found both ChatGPT and Bing AI to be great at all stages of working with code. Let me outline them briefly, using my real-world examples.
1. Generating the initial code
You can start by explaining your idea in plain English and asking for the code.
Before creating that award-winning Javascript game above, I actually started with another “game” where I control a dot with arrow keys. Feast your eyes on this:
Take a look at just how vague my request is and how ChatGPT still instantly runs with it:
Because my request was so broad, ChatGPT picked Python on its own. But you can easily specify the programming language and any other details.
For my arrow-matching game, based on some trial and error, I went with the following starting directions:
While my initial directions here are far more detailed, I’m still explaining things just as naturally as I would to another person.
No coding knowledge necessary.
2. Explaining the code
Even without me asking, ChatGPT does two cool things:
It gives each code chunk an explainer text (note the gray “#” parts):
After the code, it summarizes and explains what the code does:
But that’s just the default stuff.
You can proactively ask ChatGPT to explain any part of the code in detail.
This is fantastic if you’re trying to actually learn Python or any other programming language. You basically have a competent, endlessly patient tutor at your fingertips.
3. Showing where and how to run the code
Beyond generating the code, ChatGPT can even tell you exactly how to use it:
Following ChatGPT’s detailed instructions, I could find, download, and install Python on my computer without looking up any additional guides.
4. Troubleshooting the process
If you run into issues while working with the given code, ChatGPT can bail you out. Just copy-paste any error messages you get:
See how politely ChatGPT tells me what an absolute idiot I am for trying to run the command within the Python console? (In case you needed any further proof that I literally have no idea what I’m doing, there it is!)
I’ve used that feature several times to get help with a few more error messages, and ChatGPT delivered in spades.
5. Fixing the code
Because my starting instructions were so vague, the first iteration had the dot react violently to a single button press by flying right the fuck off the screen.
So I asked ChatGPT to fix the game logic:
That did it, and the end result is what you saw in the video above.
6. Building on existing code
Finally, you can actually grab any existing code, start a new chat, and ask ChatGPT to build on it to include new features, change behavior, etc.
In the end, I settled on having the directions spelled out instead of using visual arrows.
Limitations (and how to work around them)
Despite all the coding magic, I did experience hiccups with both ChatGPT and Bing AI (which is powered by GPT-4).
If you run into the same issues, here’s how you can try to work around them.
Limitations of ChatGPT (original GPT-3.5 version)
ChatGPT is infinitely patient and will continue responding no matter how many times you ask it to modify or fix the code. But:
Issue #1: It has a tendency to stop abruptly in the middle of writing the code. When you ask it to continue, it starts rewriting the entire code from scratch only to stop at roughly the same spot.
How to fix it: What I find works best is to be very explicit about the fact that the code is incomplete and that you only want the new parts of the code. So something like this:
Issue #2: The more general issue with the free ChatGPT version is that it’s simply not as competent as GPT-4. At some point, I’ve asked it to rewrite the code multiple times without fixing the issue I wanted resolved.
How to fix it: If you want a more competent coder, you’ll need to either:
Shell out money to get access to GPT-4 within ChatGPT.
Use the GPT-4-powered Bing AI (see how to get access here).
But Bing AI has its own drawbacks, like…
Limitations of Bing AI (runs on GPT-4)
Think of ChatGPT as a loyal but somewhat dumb dog: It’ll keep trying to make you happy forever despite not always knowing how.
Bing AI, on the other hand, is a fickle cat: It knows exactly what you need but whether it chooses to comply depends entirely on its mood.
Here are a few limitations of Bing AI:
Issue #1: You’re limited to 20 interactions per chat.
How to fix it: For the time being, you can’t increase this limit. But you can always start a new chat, paste your latest version of the code, and continue working from there.
Issue #2: You can only paste a maximum of 2,000 characters into the chat box. This is not an issue for most regular chats, but it’s a problem when you need to start by having Bing AI analyze your long code (see above) which will often exceed the character limit.
How to fix it: Explain the issue to Bing AI by saying something like this:
Then you paste your code in multiple input fields. When you say “READY,” Bing AI will put them together and figure it out. It’s pretty great at it!
Issue #3: Moodiness. This is the most frustrating part of working with Bing AI. It has a mind of its own. It’ll write the entire code for me, but as soon as I ask for tweaks, it’ll claim it can’t help me with Javascript and end the chat abruptly.
Sometimes, it’ll do this right off the bat:
I tried restarting the chat and re-pasting that request multiple times with the same “Let’s change the subject” result.
How to fix it: This is my anecdotal evidence, and it’s incredibly silly, but…
…I find that being polite and over-the-top thankful greatly increases the chance of Bing AI honoring your requests.
Check out what happens when I first butter Bing up before asking for the Javascript help:
Note how my request in the third box is exactly the same as the one that made Bing change the topic earlier. But when you’re polite, magic happens!
(I’m not saying Bing AI is intentionally designed to train us humans to be nicer, but I’m also not not saying it.)
Pro tip: Finally, in my experience, Bing AI works best for coding when you set it to the “More Creative” conversation style:
With that said, go ahead and give AI coding a shot!
The world’s your oyster, and ChatGPT is your oyster shucker.
Over to you…
Have you tried coding with ChatGPT or Bing AI? What did you think? If you’re an experienced coder, do you think LLMs can fit into your regular routine and help you boost productivity?
I’d love to hear your opinions. Drop me an email or leave a comment below!
I've actually played with ChatGPT's front end development capabilities quite a bit. It's astonishingly capable for simpler things. It's particularly eerie when you ask it to insert text along with the code. A testimonial or about section for instance.
As an example, here's my request for a simple website for a photographer named "Renee":
I'd like you to create a single page website for a photographer. The business is called "Renee's Photography". The website should use the Bootstrap framework with HTML5 and CSS. It should have a menu bar with the site title on the left and navigation buttons on the right that link to "Gallery", "About", "Prices" and "Contact". Below the menu bar is a hero image with an inspirational quote about photography. Below that is the "Gallery" section of six images in a grid. Below that is the "About" section that describes Renee's love of photography and her qualifications, plus a testimonial from a client. Below that is a "Pricing" table featuring standard industry prices for a photographer. Below that is the "Contact" section with a form for people's name, email and message. The website uses placeholders for all images. The website has light blue elements with sans script fonts.
ChatGPT spat out about 200 lines of code that I simply pasted into JSFiddle. Here's the end result: https://jsfiddle.net/zd3sruL8/
Not a bad little website for one paragraph on my part!