Learn to Code via Tutorials on Repl.it!

← Back to all posts
How to Make a Responsive Clicker Game in HTML CSS JS 🖱
h
Bookie0 (6407)

Hello everyone!

Hope you are doing well and staying safe! Welcome to a tutorial that will teach you how create your own responsive clicker game in HTML CSS JS. This tutorial will go step by step, and you'll be able to learn some basics of HTML CSS JS if you're new. However, prior basic knowledge is recommended :)

This will be a clicker game called iClick, with the theme of Apple. This is how it looks:

This is how the tutorial shall be structured:

  • Links

  • Gameplay

  • Layout

  • HTML

    • Click button
    • Items layout
    • Individual item
  • CSS

    • Click button
    • Items layout
    • Individual item
    • Responsive design
  • JS

    • Variables
    • Apples per click function
    • Apples per second function
    • Buy item function
  • Final words

Let's start!


Links 🔗

Website ==> iClick.bookie0.repl.co
Spotlight page/code ==> replit.com/@Bookie0/iClick
Tutorial/post ==> replit.com/talk/learn/Title-How-to-Make-a-Responsive-Clicker-Game-in-HTML-CSS-JS/141212


Gameplay 🎮

Clicker games, also called incremental game are fun games where you have to repeatedly click or tap something on the screen. For this tutorial, as it's the theme of Apple, we'll have the big logo of Apple as the button to click.

Players will have to keep on clicking the logo in order to get apples, the 'currency' of the game. There'll be a shop system where you can buy different items (Apple products, of course) that can help you get more apples. There are two categories of items; items that will give you apples per second (let's call it aps), and items that will give you apples per click (apc).

Each item is different and will give you different amounts of apples. Their price will also double each time you purchase one.

The goal is to dominate the world by getting 7,800,000,000 apples (≈world population)!

Layout 📝

Since this is a clicker game, the button that you click should be the biggest element. We will also need to include how many apples the user has, their aps, and apc.

This is how it will look like:

We will also have the store at the bottom, where the user can buy items to increase their number of apples:

Each item will be like this:


HTML 🖥

Some useful things before we start:

  • HTML, which stands for Hyper Text Markup Language, is a sort of "language" for creating websites. It's not really a traditional programming language becaue it doesn't have variables, conditionals, functions, etc.

  • <!-- This is a comment --> Comments, used for explaining your code. Anything inside it won't be executed (run)

  • When I write <!-- ... -->, it means I'm skipping over some code (so that I don't have to keep it in there again which could be confusing).

  • I'll usually say what we're going to do, show a piece of code, with comments, and then explain a bit more in detail.

  • There'll also be a few tips:

Tip: follow along with this tutorial and make the game step by step!

  • This is how the syntax looks like:
<body>
	<div id="myDiv">
		<h1 class="title">Hello World!</h1>

		<button>Click me!</button>
		
		<div id="ending">
			<p>Bye!</p>
		</div>
	</div>
</body>

Click button

Now onto the code! First, you can create a HTML CSS JS repl by clicking '+ New Repl' in the sidebar, then selecting HTML CSS JS, and then by naming it.

You'll have this code in index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <script src="script.js"></script>
  </body>
</html>

Let's break it up. <!DOCTYPE html> sort of tells your browser what this document type is. Then, <html> is for representing the root of a HTML document; it contains all the other HTML elements. Next, in the <head> tag, <meta charset="utf-8"> is for specifying the character encoding. This is so that we can use almost every character and symbol in the world. After that, there's <meta name="viewport" content="width=device-width"> which sets the width to the device width.

<title>repl.it</title> is the title of the page, and <link href="style.css" rel="stylesheet" type="text/css" /> links the CSS. After, there's the <body> tag where we link the JS with <script src="script.js"></script>. We'll get more to those 2 later.

Now let's start adding our own code. First, we'll add initial-scale=1.0 after the device-width. This sets the default zoom level. Next, in the <title> tag, we changed it to iClick, the name of the game. We've also added a favicon, which is a little image on the tab.

Tip: always try to have nice looking code; use indents, be consistent with quotes (' vs "), whitespace (empty lines, line breaks), etc. Read more with this Medium article

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- adding zoom level -->
    <title>iClick</title> <!-- adding new title -->
    <link href="style.css" rel="stylesheet" type="text/css"/> 
		<link rel="icon" type="image/png" sizes="32x32" href="Images/favicon.png"> <!-- adding a favicon -->
  </head>
  
	<body>
		<script src="script.js"></script>
	</body>
</html>

Now a few tags and notions that we will use:

<center> Centers everything inside
<img> (Image) For creating an image
<div> (Division) Defines a section of the page
<p> (Paragraph) Defines section of text
<span> Defines section of inline text

You'll also see that we'll have ids, followed by an equal sign (=) and some words in quotes (""). ids are attributes, which provide additional information for tags, for linking a unique element with either the CSS or the JS, which we'll get to later.

After those ids, there's equally classs, following the same format. classs are also attributes. They are similar to ids, but can be used multiple times.

Here's the next bit of code, where we show the top layout with the clicker button and the apples, aps, and apc. It's also where the game over message will show up when you win.

	<body>
		<script src="script.js"></script> 

		<center> <!-- centers everything -->
			<img src="Images/clickButton.png" id="clickButton" onclick="increment()"> <!-- the image you have to click -->

			<div id="info"> <!-- contains the info (view below), in <span> tags -->
				<p id="appleCounter">Apples = <span id="showApples" class="number">0</span></p> <!-- shows number of apples -->

				<p>Apples per second = <span id="showApplesPerSecond" class="number">0</span></p> <!-- shows apples per second -->

				<p>Apples per click = <span id="showApplesPerClick" class="number">1</span></p> <!-- shows apples per click -->

				<p id="gameOver"></p> <!-- for text to appear when you win -->
			</div>
		</center>
	</body>

As you can see, we first wrap everything with <center>. Then, we use the <img> tag to add an image. You can see the attribute src with contains "Images/clickButton.png". This basically gets the image called clickButton.png in the folder Images:

It also has an id, as well as an onclick attribute. This will call a function, which we'll get to later in the JS.

Tip: try to name your ids and class' useful names.

In the <div> with id "info", we have all the useful information about the player's progress in the game. We're using <span> tags with ids and classs for 1) different styling with the CSS, and 2) for changing the numbers (as they will constantly evolve) with the JS.

Items layout

Now that we're done with the top layout, we can move on to the items layout.

Here's how we're going to layout the items.

	<body>
		<script src="script.js"></script> 

		<center>
			<!-- ... -->

			<!-- items that can be bought -->
			<div class="itemContainer"> <!-- contains 4 items per row -->
				<div class="item"> <!-- a first item -->
					
				</div>

				<div class="item"> <!-- a second item -->
					
				</div>

				<div class="item"> <!-- a third item -->
					
				</div>
				
				<div class="item"> <!-- a fourth item -->
					
				</div>
			</div>
		</center>
  </body>

As you can see, we first have the <div> with class "itemContainer" which will be a first column holding 4 rows. Each row is an item.

Now onto an individual item layout.

Items layout

	<body>
		<script src="script.js"></script> 

		<center>
			<!-- ... -->

			<!-- items that can be bought -->
			<div class="itemContainer"> <!-- contains 4 items that you can buy -->
				<div class="item"> <!-- a first item -->
					<div class="containerImage"> <!-- contains image -->
						<img>

						<div class="buyButtonContainer"> <!-- contains button to buy item -->
							<button>
						</div>
					</div>

					<div class="containerText"> <!-- contains stats about item -->
						<p></p>

						<p></p>

						<p></p>
					</div>
				</div>

				<!-- ... -->
				
			</div>
		</center>
  </body>

This is just the layout for a single item. In the "item" div, we have 2 main divs: one is the "containerImage" which contains the image of the item, and also the button to buy it, and "containerText" which will have several information about the item.

<button> defines a clickable button

	<body>
		<script src="script.js"></script> 

		<center>
			<!-- ... -->

			<!-- items that can be bought -->
			<div class="itemContainer"> <!-- contains 4 items that you can buy -->
				<div class="item"> <!-- a first item -->
					<div class="containerImage"> <!-- contains image -->
						<img src="Images/Items/iPhone.webp" class="itemImage" style="width:100px;height:170px;">

						<div class="buyButtonContainer"> <!-- contains button to buy item -->
							<button onclick="buyIPhone()" class="buyButton">Buy</button>
						</div>
					</div>

					<div class="containerText"> <!-- contains stats about item -->
						<p>iPhones: <span id="iPhoneNum">0</span></p>

						<p>iPhone cost: <span id="iPhoneCost">10</span></p>

						<p>+1 Apples per second</p>
					</div>
				</div>

				<!-- ... -->
				
			</div>
		</center>
  </body>

As you can see, there's the containerImage div which contains an image with the src, class, and a new attribute called style. We can use it to specify a width and height of the image. Below, there's the buyButtonContainer div which holds the button to buy the item.

In the containerText div, we have the <p> tags with, in this item, how many iPhones you have, the cost to buy an iPhone, and how many Apples per second it'll give.

Now that's about all for the HTML. If you want to add more items, just use the same format as everything in the div with class "item. And when you get to 4, you'll have to make a new <div class="itemContainer">.


CSS 🎨

Like the HTML part, some useful things to know:

  • CSS stands for Cascading Style Sheets, and is used to style a website's page(s). This means adding colors, fonts, sizes, animations, shadows, backgrounds, etc.

  • /* This is a comment */

  • This is how the syntax looks like:

p { /* styles for a tag */
	font-family: cursive;
	fonr-size: 20px;
}

#myDiv { /* styles for an id */
	background-color: red;
	border: 2px outset yellow;
	border-radius: 20px;
}

.mySecondDiv { /* styles for a class */
	width: 300px;
	height: 400px;
	margin-top: 50px;
}

.mySecondDiv:hover { /* styles for that same class but when user hovers */
	width: 100px;
	height: 150px;
}

First, we have an identifier which can be a tag (p, h1, button, etc.) or an id (starting with #) or a class (starting with .). Inside the curly braquets, we have the rules to apply to that identifier, for example the color, size, margins, border, etc.

You can also add pseudo-classes like active (when the element is being activated or clicked), hover (when the user uses their mouse to hover), etc.

So let's start with the actual CSS of the game.

body, html {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* font family */
	background-color: #eeeeee;
}

* {
  box-sizing: border-box; 
}

We first specified in the identifier tags (body and html) the main font-family of all the text. We'll also add the background-color of the page. Then, we have the * identifier which selects all the elements on the page. We make the box-sizing to border-box which includes the padding and border in an element's total width and height.

Click button

Now, let's style the click button.

/* big apple logo to click */
#clickButton {
	width: 300px;
	height: 350px;
	margin-top: 60px;
	box-shadow: 0 4px 8px 0 #3188cc;
	border-radius: 8px;
	transition-duration: 0.3s;
	cursor: pointer; 
}

We applied the styles to the element with id #clickButton. Remember in our HTML, this is how that image looks like:

<img src="Images/clickButton.png" id="clickButton" onclick="increment()"> 

So because it has clickButton as id, the styles will be applied to the image.

Back to the CSS, we specified a width and height. There's a margin-top to make it further from the top of page. We also have a box-shadow to make it look cool and kind of hover. The border-radius is to make it a bit round, the transition-duration is to make it change not too abruptly. Finally, cursor: pointer; makes the cursor change.

Now, we want some of the styles to change when you hover over the image and click on it:

/* when you hover over it, box shadow color will change, and it'll be rounder */
#clickButton:hover {
	box-shadow: 0 4px 8px 0 #979797;
	border-radius: 15px;
	transition-duration: 0.5s;
}

/* when you click it, box shadow color will change again, it'll be even more rounder, and will go a bit bigger */
#clickButton:active {
	box-shadow: 0 4px 8px 0 #666666;
	border-radius: 20px;
	-ms-transform: scale(1.1);
  -webkit-transform: scale(1.1); 
  transform: scale(1.1); 
}

As you can see, in both cases when you hover and click the image, the box-shadow color has changed, and the border-radius as well. When you hover, like from the previous step, the transition-duration is 0.3s, but here it is 0.5s. This is so that when you start to hover, it takes 0.3 seconds to change, but will take 0.5 seconds to change back when you remove your cursor.

And when you click the image, the apple's width and height shall become 1.1 times bigger. We specify it several times for compatibility.

Now, let's style the information below the click button.

/* div with all the information (apples, apples per second, apples per click) */
#info {
	margin-top: 30px;
	margin-bottom: 50px;
	font-size: 20px;
}

#appleCounter {
	font-size: 25px;
	font-weight: bold;
}

.number {
	color: #3188cc;
}

#gameOver {
	font-size: 30px;
	color: #3188cc;
	font-style: italic;
}

#info is the div that contains al that information. We added some margin-top and margin-bottom to space it from the other elements, as well as the font-size. For the #appleCounter, we made it in bold to difference it from the others, as it's the most useful information. For all the numbers, with the class .number, we have a nice blue color with #3188cc. And finally, #gameOver styles the div containing the sentence saying you have won the game.

Items layout

Now onto the items' layout. We'll use display: flex; to align the items horizontally. flex-wrap: wrap; is to force the items on multiple lines if there isn't enough space.

/* contains all the items that can be bought */
.itemContainer {
  display: flex; /* using flexbox to align items */
  flex-wrap: wrap; /* to force items on multiple lines */
}

Individual item

Now for each item. Remember in the HTML, we had several divs for the whole item, the image of the item, the text (description of image) and button (buy the item):

/* each individual item */
.item {
  padding: 10px; /* some spacing around */
  flex: 25%; /* to put 4 items on each line (100/4 = 25) */
}

/* each item image */
.itemImage {
	height: 20%;
	width: 20%;
}

/* contains information about each item */
.containerText {
	font-size: 16px;
  text-align: center;
}

/* contains buy button */
.buyButtonContainer {
	margin-top: 20px;
}

padding: 10px; adds spacing all round the item so that it doesn't get too clumped up together; it can also be written like this, on several lines:

padding-top: 10px;
padding-right: 10px;
padding-button: 10px;
padding-left: 10px;

As you can see, we put 10px for each 4 directions, which is kind of long, so the first method is much easier and faster.

Next, let's specify the rules to style the .buyButton selector. It'll look pretty similar to the buy button on Apple's site!

/* button to buy item */
.buyButton {
	cursor: pointer;
	text-align: center;
	background: #0071e3;
	color: #fff;
	font-size: 17px;
	font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
	padding-left: 11px;
	padding-right: 11px;
	padding-top: 4px;
	padding-bottom: 4px;
	border-radius: 12px;
	border: none;
}

/* on hover, makes button a bit lighter */
.buyButton:hover {
	opacity: 0.7;
}

We've already gone through most of the rules, but basically the text is aligned, background color is a nice blue, color a nice white, size of font is 17px, has "SF Pro Text" for font family, some padding, a border radius of 12px, and no border.

When you hover over the button, with opacity : 0.7;, the button will go a bit lighter.

Responsive design

Finally, to make this site responsive, we'll change the width of the flex so that instead of 4 items on each line (25%), it'll be 1 item on each line (100%).

Tip: always try to make your websites as responsive as possible to make them accessible on every platform (computer, tablet, phone, etc.)

/* for smaller screens (eg: phones) */
@media (max-width: 800px) { 
  .item {
    flex: 100%; /* makes one item on each line */
  }
}

With max-width: 800px, the folowing rules will apply if the width of the user's screen is less than 800px.

Now we're finished with the styling! If you're followed well, you should have something that looks like the repl below.


JS ⚙️

Some useful things to know:

  • JS stands for Java Script, and allows webpages to be interactive.

  • // This is a comment

/* This is a 

multi line

comment (same as CSS) */
  • This is how the syntax looks like, as well as a very quick and basic intro to JS:
console.log("Hello World!"); // outputting

var x = 10; // declaring a variable

x *= 10; // setting that variable to 10 times its original value

// conditionals
if (x >= 200) { // if the variable is greater than 200
	console.log("Variable x is bigger than 200!"); // outputs message
}

else { // if not
	document.getElementById("myId").innerText = x; // gets element with id "myId" and sets it to x
}

So JS is a bit different than HTML or CSS. It's more like as a traditional programming language as it has variables, functions, conditionals, and more, whereas the latter are more markup languages to structure content.

Variable

The clicker game that we're making is all about clicking to get Apples, the data, as well buying upgrades that will help you get more Apples/data. This data needs to be stored somewhere, so we'll use variables. You can think of them as "boxes" to hold data.

First, we'll have the variables related to having and receiving Apples:

var apples = 0; 

var applesPerSecond = 0;

var applesPerClick = 1;

apples contains, well, the number of apples the user have. applesPerSecond is the number of apples the user gets per click; and it's set to 0 as in the beginning you don't have any. Finally applesPerClick is the number of applers per click, set to 1.

Next, let's define the cost of the items:

// costs of items
var iPhoneCost = 10;

var iPadCost = 10;

// ...

var steveJobsCost = 1000000000;

And lastly, how many of an item you have:

// how many items you have
var iPhones = 0;

var iPads = 0;

// ...

var steveJobs = 0;

Tip: like ids and class', name you variables with useful names.

Apples per click function

Every time the user clicks the apple logo, we want their number of Apples to increase. This will be in a function. We will be using the operator += to add applesPerClick (originally set to 1) to the total number of apples. We'll then need to update the HTML to show the current number of apples, which we'll do using DOM.

In that function, with a conditional, we'll also check if the number of apples is greater than 7800000000, and if so, display a message of congratulations on the website:

// function that gets called when you click the apple logo
function increment() {
	apples += applesPerClick; // adds the number of apples per click to your total apples
	document.getElementById("showApples").innerText = apples; // uses DOM to change the number of apples in the HTMl
}

As you can see, with apples += applesPerClick;, this adds the number of apples you get per click to the total number of apples. It's the equivalent of apples = apples + applesPerClick.

With document.getElementById("showApples").innerText = apples;, we get the element with id "showApples" in the HTML:

<p id="appleCounter">Apples = <span id="showApples" class="number">0</span></p> <!-- shows number of apples -->

And we set it to the number of apples the user has.

Now for the conditional, with if:

function increment() {
	
	// ...

	if (apples >= 7800000000) // if it's higher than the world population
	{
		document.getElementById("gameOver").innerText = "You won the game! Apple dominates the Earth!"
	}
}

Tip: .innerText will make the HTML element contain the text we give it. However, there's also something called .innerHtml, which basically functions the same way but will return all the text, including HTML tags. This can create security risks, as users could inject malicious code.

Apples per second function

Now we shall make the function for apples per second. We'll be using setInterval() so that every 1 second (or 1000 milliseconds), the total number of apples increments by the number of applesPerSecond, using the operator that we used above; +=.

Here's how it looks like:

// function that happens every second
setInterval(function() {
	apples += applesPerSecond; // adds the number of apples per second to your total apples
	
	document.getElementById("showApples").innerText = apples; // uses DOM to change the number of apples in the HTML
}, 1000) // every 1000 milliseconds (1 second)

Buy item function

Now, our last function for the JS. This will be the last part of our clicker game.

We'll be exploring 2 functions, one which will be the buyIPhone() function which will give you +1 Apples per second, and the buyIPad() function which will give you +1 apples per click. These functions will be called when the user clicks the buy button.

In each of those functions, we'll first check with an if statement if the user has enough apples to buy the item, next we'll subtract the price from the total number of apples, and then increment the number of products the user just bought. We'll also double the cost of the item, and add what you get from buying the item (so for example, if you buy the iPhone, you'll get +1 Apples per second). Finally, we'll have an else to tell the user that they don't have enough Apples, if that's the case.

Let's make the first function:

// will be called when user pressed buy button
function buyIPhone() { 

	if (apples >= iPhoneCost) { // checks if you have enough apples
		
		apples -= iPhoneCost; // subtracts cost apples 

		document.getElementById("showApples").innerText = apples; // "updates" the HTML

		iPhones++; // increments number of that item 

		document.getElementById("iPhoneNum").innerText = iPhones;	

Now for the price doubling and increasing of apples per second:

function buyIPhone() {
	
	// ...

	iPhoneCost *=2; // doubles price of that item 

	document.getElementById("iPhoneCost").innerText = iPhoneCost;

	applesPerSecond += 1; // increases number of apples per second

	document.getElementById("showApplesPerSecond").innerText = applesPerSecond;	

	}	else { // if there enough apples
		alert("You don't have enough Apples!") 
	}
}

As you can see, in the else statement, there's an alert() which will display a popup if the user doesn't have enough Apples to buy the item.

Now for the buyIPad() function, essentially the same:

function buyIPad() {

	if (apples >= iPadCost) {
		
		apples -= iPadCost; 

		document.getElementById("showApples").innerText = apples;

		iPads++; 

		document.getElementById("iPadNum").innerText = iPads;
	
		iPadCost *=2; 

		document.getElementById("iPadCost").innerText = iPadCost;

		applesPerClick += 1; // increases number of apples per click

		document.getElementById("showApplesPerClick").innerText = applesPerClick;
	
	} else { 
		alert("You don't have enough Apples!")
	}
}

The only different thing is the line with a comment; applesPerClick +=1 ; which will now give you + apples per click when you buy the iPad.

I won't be showing the rest of the functions (buyPen(), buyAirPods(), etc.) as they really are the same thing as the two mentioned above.


Final words 🚪

Wow, you've completed your first HTML CSS JS clicker game!!! Now that you've come so far, you can start changing things to your preferences and add/remove features.

Some ideas:

  • Add new items
  • Change prices/what you get when you buy an item
  • Add new ways to get apples (not only apples per click/per second)
  • Experiment with different layouts
  • Change the whole theme (make the clicker game not about Apple, but perhaps about coding or food or anything!)
  • And many more!

Feel free to ask any questions in the comments and I'll try my best to answer them! :)

Have a super day and summer break, for those of you that are already released!

Comments
hotnewtop
Nayoar (581)

Why two separate flexboxes?

Bookie0 (6407)

@Nayoar one for each row of items

Nayoar (581)

@Bookie0 the whole point of flexbox is that you can have a single one with all your items and then decide how they will be distributed across rows. With two separate ones, if I make the screen a certain width, the rows would be 3-1-3-1, which is just stupid. Having only a single flexbox would give you 3-3-2 in this case, which is what you want.

Nayoar (581)

@Whippingdot no, flexbox is suitable here

JBloves27 (1905)

haha, bookie loves apple xD

Nice tutorial! :)

Bookie0 (6407)

haha thanks!

and yes indeed xD @JBloves27

Whippingdot (681)

you will soon love windows with new windows coming soon @Bookie0

Whippingdot (681)

yes new windows is coming soon and you mac user might loike it. the only reason i am saying this is because most people already know that a new windows is coming...JUNE 24 watch the event or whatever (i don't know where it is) @Bookie0

JWZ6 (715)

i created a clicker game too. Remember me commenting on iclick? Anyways, pogger (love the steve jobs thingy) :)

Bookie0 (6407)

@JWZ6 Ah yes, I remember your comment! Glad you like the Steve Jobs! :)

BostonDadBod (1)

@Bookie0 Awesome tutorial! I had a blast putting it all together. I'm still very new to programming so it was cool to see how HTML, JS, and CSS all tie together.

Bookie0 (6407)

@BostonDadBod Thanks, glad you liked it! Good luck in future projects! :)

QuickV (132)

Shouldst I credit thee if't be true i useth this? (Should I credit you if I used this?) I probably will anyways lol.

Bookie0 (6407)

@QuickV If you use this without changing the code, yeah you should give credit. However, if you remix it and change/add features, you can just say where the inspiration is from lol. :)

QuickV (132)

lol I have a ton of feature ideas xD... @Bookie0

GalvinHenry (1)

i created a clicker game too.

Of course I still can only set up on PC, the game is not really perfect on the phone
This is my game: https://cookie-clicker.co/

Bookie0 (6407)

@GalvinHenry woah that’s really nice!

It does look pretty nice on phone too lol

Kingq23 (41)

this is a good tutorial

Bookie0 (6407)

Thanks, glad you like it! :) @qadams2008

JakeHu2020 (34)

Can you disable autoclicker?

JakeHu2020 (34)

@Bookie0 I mean stopping any autoclicker that's enabled, like setting an interval to see if it is getting clicked faster than 100ms per click

JakeHu2020 (34)

@Bookie0 also why do people keep upvoting my comments

Adanmai (0)

@Bookie0 He means disable autoclickers so people don't cheat

Whippingdot (681)

THANKS FOR MAKING THE COMMUNTIY STUFFED WITH CLICKER GAMES AGAIN

I HATE YOU

i still updooted though cause I know the tutorial is awesome even before reading it cause u r an awesome coder lul

maxina (65)

Also this is kind of unrelated, but boy your code looks neat.

Bookie0 (6407)

haha thanks, clean is code is great for your eyes and makes it easier to find things! :) @maxina

QuickV (132)

Basically like when you first switch to replit dark mode lol. @Bookie0

maxina (65)

Really nice! Maybe you should work as a designer for apple ;)
One thing though, shouldn't the phone and iPad be more expensive than the Airpods and pencil?

Bookie0 (6407)

@maxina Lmao thanks! :D
Also yeah that's true, but those were the first items I thought of so ¯\_(ツ)_/¯

codingjlu (484)

lol nice just go to the console and paste:

applesPerSecond = 999999999999;
applesPerClick = 999999999999;

Bookie0 (6407)

@codingjlu yeah, but cheating is :(

codingjlu (484)

@Bookie0 cheating? lol let's call it hacking... stupid hacking xD

OldWizard209 (1643)

steve jobs doesnt have a price. he was priceless........

Bookie0 (6407)

@programmeruser I actually am first cuz I posted it, but you can get second. :)

Bookie0 (6407)

@Bookie0 if i reply to this comment, I won't see it appear.

Bookie0 (6407)

@Bookie0 I have to reload the page to be able to see it =/