How I finished my very first game in 3 days with the help of ChatGPT
A couple of months ago, I was assigned to write a game. It’s a 2D carnival ring toss game. The project is already built with React, and I have no experience writing games at all. The timeline is already tight, so I don’t have time to learn a new game engine or some tools that will make it easy to create a game. So I gathered the tools at my disposal such as HTML’s canvas, Javascript and React to create it.
This article is not about code but about my thought process for creating a game. Let’s begin.
First, as everyone would do, I searched for an example online or a code I could take a reference from, but I had no luck. Then I turn to our friend ChatGPT. Well, I learned that I can’t just ask it to spew out the codes. So I turn to more practical approach. I break down my game into 5 primary sections.
- Generate background. (Day 1)
- Generate cans because my game is for a beverage. (Day 1)
- Generate ring. (Day 1)
- Tossing the ring and run it along the user drag trajectory. (Day 2)
- Ring placed on the can or miss. (Day 3)
First challenge: I was given a png for the background, but it’s just not maintaining the aspect ratio on every mobile screen size. So I asked ChatGPT. It gave me a code snippet that helped me solve it.
Second challenge: It is kind of similar to the first challenge. The can’s png is not holding its shape, so I used the previous code. But another problem is that images are not loading on time. I found out I had to preload it.
Third challenge: Generating the ring is no problem at all now. I used the above solution to maintain the PNG aspect ratio. You may wonder why I am just using the images because I am on a tight timeline.
Fourth challenge: This might be the most challenging one yet. Because this includes math and moving the ring or object around. But with the help of ChatGPT, I asked it to help me drag the object, and when it was done, I asked it to help me go on to the user’s drag trajectory. Now I realise I have to think about speed and making the ring go smaller as it goes by using ChatGPT’s help. I used the screen height for the speed and the ring size reduction. In a way, the ring moves faster on a phone with a larger screen.
Fifth challenge: detecting where cans and rings touch. It took me a while to figure this one out, but the approach I used in the end was to take the centre bottom 10% of the ring and the top size of the can as the hot zone or a hit; otherwise, it’s considered a miss. Of course, with the help of ChatGPT.
In the end, a 2D carnival ring toss game is created using React and HTML’s canvas with the help of ChatGPT. The game ended up having over 20 thousand game plays in a month. This is the method I used in my project, and it worked well. Is this a bad practice? I am not sure. If you know of better ways or suggestions, share them in the comments for everyone to see.
