Tuesday 18 April 2023

Dev Diary // Using ChatGPT to make an Idle Clicker Game

There is an idle clicker game called Cookie Clicker. It's amazing, you click a giant cookie, to make more cookies, to buy buildings and upgrades that will make cookies. There is a grandma apocalypse, a dragon called krumblor and ascensions. Kittens can give you milk multipliers which boosts your cookies per second. The entire goal is to make as many cookies as possible per second. It is utterly addictive and completely free:

Cookie Clicker was first released back in 2013 and I started playing around 2015. Soon after release, the creator made a website: Idle Game Maker, which turned the cookie clicker code into an engine and allowed users to make their own idle game. It's really intuitive and easy to use; and you can host your game for free using their website.

Whilst messing around with that engine recently; I realised a lot is hidden away from the user. Being an engine programmer, I wanted to know more about how clicker games actually function but I have next to no knowledge of web development; enter ChatGPT.


The above video is me sitting down with Chat and trying to get it to create the bare bones of an idle clicker with as little coding from me as possible and I'm amazed at the results. I filmed for 50 minutes and by the end of that I had a clicker game with 2 buildings and a lucky button that appears randomly. I edited about 3 lines of code in total but used ChatGPT to generate everything for me. Even asking it to move CSS elements to different places.

I don't think I would continue trying to get it to create the entire game as that would get a bit tedious; but now I've got the bare bones, I've got a solid starting point to tinker with. I would probably start making it look prettier first before adding anything else.

HTML, CSS and Javascript are completely outside my zone of knowledge but having looked through the generated code; the html and JS is actually pretty readable and easy to add to. The CSS on the other hand will require some more thought.

You can find all the code generated in this session here:

No comments:

Post a Comment