M1dnight's Ultimate Guide to Clicker Games (GimClicker)

Introduction

Click games have been a staple in game development for as long as the concept of web games to begin with. The reason they grew so much was that you could write a clicker with 30 lines of JavaScript with it being fully functional. One of the first pioneers of the clicker game genre was Orteil, with Cookie Clicker. The game was an absolute success and inspired many of the well-known clicker games we know today.

As I mentioned, a clicker game is super easy to make in JavaScript, which kinda follows into GimKit. It’s quite easy to make a simple yet functional clicker, but with time and effort, you can make something truly beautiful.

Getting Started

To get started, let’s begin building our cookie!
I will be referencing a pixel art method in another guide I wrote some time ago. I will use that method to create a simple cookie at spawn.

Next, Add a button to the center that scales up to the cookie like this:


Please make sure to make this button invisible and with no wait time

Adding A Score Property

A property may be the most important thing in this whole clicker. We will create 2 number properties named score and clickValue. We also add a trigger to contain our clicking code. Make sure to set clickValue’s default value as “1”

Inside our trigger, we will add the following code:
image
Make sure this trigger’s code is run when the button is hit.

Adding a Score Display

Adding a score display is very simple. Connect our score property to our counter text and then make it pulse wire when property changes. This is the code we will put into our textbox to be run on wire pulse:
image

Adding Auto Clickers

To begin building an auto clicker, connect a repeat that pulses every second and never stops to a trigger. We will create a new property for this named clicksPerSecond. Make sure to set it’s default value to 0 and make sure it’s a number value!
We will add this code to our trigger:
image

Why Do We Set The Default Value to 0?

The reason we want to set clicksPerSecond to 0 is so we don’t have add more logic to start the auto clicker code when we unlock auto clickers in shop and rather just have it run in the background without doing anything.

Building the Shop

Lets begin styling our shop! This is what mine looks like:

Currently, I only have 1 item, but we can use this item as a template for the next.
Lets add an invisible button with 1 second hold time. We wire this button to a trigger like this:
image

This is the code we will add to our trigger:


I used variables to make to modular. Basically, you can clone this trigger and only need to tweak the variables at the top.

Conclusion

This game is in no way complete. When I finish it, I will probably update this post.
In this post, we covered:

  • Designing a pixel art cookie
  • Building a shop
  • Adding functionality to the shop and to our cookie
  • Writing block code

What Now?

Now that you have implemented the basic logic of a clicker game, time to expand on your own!
You can create new items by duplicating the store code and tweaking the variables to match. Maybe get creative; Instead of a cookie make something that’s your own. My job here is only to implement complicated logic so that you can use your creativity to fill the rest,

Thank you for reading this guide! It took like 2 hours to write.
M1dnight out

2 Likes

Nice guide! Another use of variables revealed!

2 Likes

Cookie clicker!

2 Likes

Nice guide!

2 Likes

Bump.

Bump.

Bump.

2 Likes

Bump. <VGBHNHGBVBHJHGVFGBHGVFC VGBHYTVFGTFVGTFCRTVGT^YGV>

Bump.

1 Like

Was that gibberish supposed to be hidden? lol. Anyways, nice TUG @M1dnight!

1 Like

No, why would it be hidden?

2 Likes

Ah, you made me go through all that!
Nice guide @M1dnight, this is really cool, I really like the terrain cookie!

Bump.

2 Likes

Bumpy Bumpy Bumpy, I made it out of clay
And when it’s dry and ready,
Then bumpy I shall play
Bump

1 Like

how does this have no likes…

1 Like