Coding games without any dev knowledge
Overview & setup
Before I get going I need to confess … I don’t know how to code. But I was eager to give it a go with ChatGPT as my coding buddy! Setting up my ‘dev’ environment was pretty easy and involved a few simple steps.
Set up my Mac as a web server with a couple of simple terminal commands
Ask ChatGPT to provide me with the code for the desired outcome
Paste the code into Visual Studio Code
Test the work as I go in a web browser (running http://localhost)
The start…
I started the journey for a bit of fun, eager to see how good/bad/easy/difficult it would be to code a game with ChatGPT.
Let’s go!
The end results…
Fast forward 4+ hours I had my first functioning game, Snake, complete with levels, collision detection and more. It wasn’t straightforward by any means, but seeing as I didn’t really know how to code, it wasn’t exactly difficult either. It just required a bit of persistence and learning through discovery how to deal with ChatGPT’s quirks.
The good news is, my second game Asteroids, took just under half the time to create, complete with collision detection, explosions, thrust graphics and more.
The learnings…
1. Prompt approach: DON’T go all in
In my first couple of attempts, I tried to give ChatGPT a big(ish) prompt and see if it could just get the job done. While ChatGPT jumped straight into the task, its first cut was full of bugs, had poor layout and other issues. Working with ChatGPT to fix so many issues proved to be hard work, as it fixed one thing and broke another. So I gave up on this approach pretty quickly.
Computer says no
2. Prompt approach: DO start small and increment
Realising a big prompt was too much for it to handle (at least for a non coder like me that can’t spot errors!), I got ChatGPT to start small.
🖥️ First get ChatGPT to create the code for the board, work with it to tweak the look and feel until you’re happy.
🐍 Then introduce the snake and the wall collision.
🍉 Then introduce the food and snake growth.
💥 Tweak the collision detection so it detects when it hits itself.
🥇Finally, add a score board and levels.
Bit by bit we build
3. Debugging – remind ChatGPT what it has done
ChatGPT does make mistakes, resulting in bugs, so the above incremental approach is super helpful to catch when it has introduced a bug. But even so, sometimes ChatGPT seems to forget the structure of the code it is incrementally been building for us.
To help ChatGPT, I found it helpful to remind it once in a while of the routines it had created – even pasting the entire script back and asking ChatGPT to detect (its own) error(s).
Helping ChatGPT along
4. Beware the dreaded “I can do it” loop!
ChatGPT can be convincing, even when it’s going down a wrong path. I had a couple of occasions where we got stuck in a loop, with ChatGPT continuosly trying to provide new code to fix a bug (e.g. snake not turning red on collision) and me feeding back that the fix didn’t work. In this example, ChatGPT provided me with over 4 updated versions of the Javascript trying to get the snake to turn red on collision, none of the versions it provided fixed the issue.
ChatGPT stuck in a loop
To solve this, there are a couple of options I found helpful;
⚠️ Ask ChatGPT to debug its own work e.g. introducing little alerts like “snake should turn red now” to try and find out where the code is failing.
🪲 Have a go and see if you can spot any errors. Even as a non coder you end up picking up a few things going through this process e.g. spotting duplicated routines or undeclared variables.
Eventually, I discovered the issue was due to a CSS styling issue, not the Javascript which ChatGPT was working so hard to rewrite in different ways.
ChatGPT needed a bit of help
5. Deprecated code / CSS methods
With a cutoff date of 2021, ChatGPT can sometimes use deprecated code or Javascript libraries. Luckily, I didn’t encounter any critical issues with these games, but I did with some other experiments I’ve run. I haven’t tried to fix this using the “Browsing” plug-in, but given the limitations of the plug-in I won’t hold my breath for that.
What’s next?
Ok, so a lot learnt here about how to work with ChatGPT, not specifically coding but how to dance with it and get it to work for you not against you.
And if that didn’t make you go “wow”, check the vision NVIDIA has for the future of gaming, with hyper realistic 3D worlds and people who, thanks to LLM tech, you can actually converse with.
I’m thinking for my next set of experiments to start using 3D libraries and seeing how creative ChatGPT can get funky in the Metaverse. I’m open to ideas, so give me a shout if you have any.
