I’ve worked for many years as a WordPress developer, which means most of my work is done with PHP. While PHP is great for web development, it’s not particularly suitable for browser-based games. I have quite a few game ideas and wanted to develop one, but my understanding of JavaScript is quite basic. So I started thinking – could I use ChatGPT to help me out?
Starting to work with ChatGPT
There was only one to find out – I started a conversation with ChatGPT 3.5. My first prompt outlined the basic premise of the game:
”Can you help me write some code. There would be an interactive element on the playing field. User can drag the element with mouse or touch, and it would return to its place after mouse release.”
ChatGPT’s response was very confident:
”Certainly! To create an interactive element that can be dragged and returns to its original position after the user releases it, you can use HTML, CSS, and JavaScript. Here's a basic example of how you can achieve this:” (example code was then given).
This kind of confidence was always there with the responses I got from ChatGPT, even when it hadn’t understood what I wanted. And getting ChatGPT to understand me was the main challenge. I ended up adjusting some of the game concepts to simplify things as the generated code didn’t work as I had envisioned. By then making a series of prompts to develop the game step by step, ChatGPT produced some workable code in JavaScript for the basic game functionality.
Taking over the coding
From there, I applied my own skills with some refactoring and CSS styling. I did the following to the code provided by ChatGPT:
- Added an SVG background image to make it look like a sports field
- Made the background scroll in sync together with the element
- Made the element look like a finger
- Counted down the distance to go (5000px)
- Added styling
- Added a high score table to localStorage
The end result was Touch Sprint 5000, a simple web-based game where you use your finger to “run” on a touch screen for a distance of 5000 pixels. In the end, I would say ChatGPT wrote about 80% of the code for this.
My thoughts on the process
I’ve used ChatGPT before at work to suggest short snippets of code, but this was the first time where I relied on it to do the bulk of the coding. Getting ChatGPT to understand what I wanted was the main challenge – but as I adjusted the game to make it simpler, eventually I was left with a workable product.
Overall, I was impressed by ChatGPT’s capabilities. Using it as a co-pilot, I was able to produce a game in just a few days even though my knowledge of JavaScript is basic. I’m interested to see how ChatGPT’s capabilities will continue to develop in the future, making it more useful for developers.
Want to try the game?
Use the shortlink https://dy.fi/33 on your touch-screen device to play (redirects to https://mikkosiikaniemi.github.io/touch-sprint-5000/).
Visit https://github.com/mikkosiikaniemi/touch-sprint-5000 to see the code.
