Skip to content
← Back to Community
Cactus Clicker
Profile icon
h
has Hacker Plan
CodingCactus

Hi, so i recently asked people to submit suggestions for things that I can code and this was the only suggestion :(

It is a clicker game!


How to play

Click the cactus


Features

  • You can click a cactus
  • Saves your scores and upgrades if you leave or refresh the page
  • 'Collects' cacti when you close the page (depending on your cacti per second)

Have fun

Please tell me how to improve, this is my first time using js, so there is probably something i am doing wrong

Please Please Please give me some more suggestions on more things to code so that I can keep learning this language. Submit your suggestions here


Also, apparently it is pride month, so yeah, I have changed my pfp to one that @Codemonkey51 made :)

Voters
Profile icon
leogregory1
Profile icon
axolotlsuwu
Profile icon
ThePeeps191
Profile icon
CorruptedIphone
Profile icon
Brendan23
Profile icon
ninja2k11
Profile icon
dabs364
Profile icon
syflexer
Profile icon
CodingRobot12
Profile icon
ChezTacoz
Comments
hotnewtop
Profile icon
Coder100

nice

Profile icon
studentAlfredAl

!say hi to Coder100 @Coder100

Profile icon
Coder100
Profile icon
studentAlfredAl

lol I was trying to get the bot to come on here, but I forgot the commands xD @Coder100

Profile icon
MrEconomical

im a mean person so I will proceed to brutally critique your code now

  1. NEVER NEVER NEVER NEVER NEVER NEVER NEVER NEVER USE INNERHTML - It directly sets the HTML of elements which means malicious users can insert <script>s into your application if you were making something like a chatroom. use innerText instead
  2. nobody uses localStorage.getItem just use localStorage[item] or localStorage.item also you don't need to check if something === null (btw kudos for you for using === and not ==) just do if (!something). you can take advantage of these truthy and falsy values which evaluate to true and false, as their name suggests and they are very useful for writing neat code in js
  3. instead of having giant if else chains you can use ternary which is useful. your first block from lines 2-6 can be condensed into this: let score = localStorage.score ? + localStorage.score : 0 (you can use + instead of Number() to convert strings to numbers as explained in my post). ternary works a ? (do something if a is true) : (do something if a is false) and you can also use it for assignment x = a ? (assign if a is true) : (assign if a is false) or if you are even bigger brain you can use let score = + localStorage.score || 0 (this works because || will do the first thing, and if the first thing isnt true or truthy it will do the second thing)
  4. please try to put spaces in between brackets everytime I see }else{ I die a little bit inside :(
  5. you should always use let and const for declaring variables its a better practice since 1) they are both block scoped and 2) they provide a very very slight performance advantage. block scoped means that they only apply to the block they are in or the segment of the code between the curly braces. if I were to use var, it would still exist: if (true) { var a = "hi" } // a still exists here! but this wouldn't be the case with let. it's mainly just a good practice since almost nobody uses var anymore, it has a lot of scoping issues and its weird.
  6. never declare variables without let or const it makes them properties of window and immediately global just very weird
  7. dont spam document.getElementById() you can assign a variable or something
  8. when doing string concatonation you should use template literals, they are just much nicer: `hello ${this} is my message` you can insert any valid javascript expression inside ${} its just like templating as the name suggests
    good luck on any future projects you hope to make with javascript!
Profile icon
CodingCactus

@MrEconomical errmmm ok thanks I will try to eventually understand what you just said :)

Profile icon
ChezCoder

@MrEconomical yeah, I like to think of let and const as temporary variables. Its just so much more cleeean

Profile icon
ChezCoder

@CodingCactus can i help you fix up your javascript?

Profile icon
CodingCactus

@ChezCoder well it seems to work

Profile icon
ChezCoder

@CodingCactus lol i mean like do what mreconomical said above.

Profile icon
CodingCactus

@ChezCoder ik, but this project is done, I will consider what he has said in future projects and as this works, there isn't much point changing it

Profile icon
ChezCoder

@CodingCactus lol ok :D

Profile icon
ChezCoder

@CodingCactus also, for the PFP flip click thing, here is the code to flip it:

document.getElementById("cactus").style.transform = `scaleX(${document.getElementById("cactus").style.transform.split("scaleX(")[1].split(")")[0]*-1})`;
Profile icon
CodingCactus

@ChezCoder ermmm didn't work

Profile icon
ChezCoder

@CodingCactus wut... where did u put it?

Profile icon
CodingCactus

@ChezCoder where should i put it?

Profile icon
ChezCoder

@CodingCactus ah, ok i see.
In style.css, add this to the image's style:
transform: scaleX(1);
Then it will work :D

Profile icon
CodingCactus

@ChezCoder it doesn't :(

Profile icon
ChezCoder

@CodingCactus hmm...

beginning of script.js:
document.getElementById("cactus").style.transform = "scaleX(1)";

Profile icon
CodingCactus
Profile icon
ChezCoder
Profile icon
ChezCoder

@CodingCactus lol, also,
if (localStorage.getItem("perSec") === null)
can just be
if (localStorage.getItem("perSec"))
This is because null == false

Profile icon
firefish

@CodingCactus I will just say this: you can make a clicker in 20 lines of JS

Profile icon
CodingCactus

@johnstev111 ok, you do that and show me

Profile icon
firefish

@CodingCactus I've done it already, I just need a hideous amount of items to buy

Profile icon
firefish

@CodingCactus Well It's done, excuse the teeny-weeny amount of items https://Firefish-Clicker--johnstev111.repl.co

Profile icon
CodingCactus

@johnstev111 too bad it doesn't work

Profile icon
firefish

@CodingCactus WHAT? I've been testing that (are you lying?)

Profile icon
firefish

@CodingCactus OOF FIXED IT SORRY... IT WAS A MISSING CLOSING BRACE THAT DID IT

Profile icon
firefish

@CodingCactus wops caps

Profile icon
CodingCactus

erm so it has no per second things or saves your data etc.
@johnstev111

Profile icon
firefish

@CodingCactus It does have per second things... Buy Coral Rocket and C#. And I am noob at JS so I don't know how to save data

Profile icon
firefish
Profile icon
DynamicSquid

Y E S

Profile icon
HahaYes

@DynamicSquid Haha Y E S

Profile icon
DynamicSquid

@HahaYes lol :)

Profile icon
codingduck

code go fish!

Profile icon
ChezCoder

EXPLOIT

Spam click the cacti

setInterval(()=>{document.getElementById("cactus").click() });

Usage:

Just paste it in console ;)


Change cacti per sec

function changePerSec(amount){localStorage.perSec=amount;window.location.reload();}

Usage:

changePerSec(1000000) - This will change per sec to 1 million!


Change cacti per click

function changePerClick(amount){localStorage.perClick=amount;window.location.reload();}

Usage

changePerClick(1000000) - This will change per click to 1 million!


Change cacti amount

function changeCacti(amount){localStorage.score=amount;window.location.reload();}

Usage

changeCacti(1000000) - This will change cacti to 1 million!


All Together

setInterval(()=>{document.getElementById("cactus").click() });function changePerSec(amount){localStorage.perSec=amount;window.location.reload();}function changePerClick(amount){localStorage.perClick=amount;window.location.reload();}function changeCacti(amount){localStorage.score=amount;window.location.reload();}
Profile icon
CodingCactus

@ChezCoder lol, you ruin it for yourself if you cheat, and if you cheat at a clicker game, it just confirms that yourLife == sad

Profile icon
ChezCoder

ok @CodingCactus, so you got one thing wrong and one thing right. Wrong: I hack for fun. Right: my life is sad.

Profile icon
CodingCactus
Profile icon
awesome10

@ChezCoder when you do that, its more how quickly can you buy things than how quickly you click the cactus

Profile icon
ChezCoder
Profile icon
firefish

@ChezCoder All I do is constantly run a 50,000 iteration for loop containing just document.getElementById("cactus").click() and then buy upgardes

image

Profile icon
ChezCoder

hmm... time for an EXPLOIT!!!!

Profile icon
ChezCoder

nahh to lazy :D

Profile icon
DynamicSquid
Profile icon
firefish

@ChezCoder a while true loop did it.... I had to refresh because of the infinite loop... but afterwards I had a magic 85K cacti

Profile icon
CodingCactus

@johnstev111 85k isn't much in this game

Profile icon
awesome10

@johnstev111 yeah 85k is what i get in less than 40 clicks

Profile icon
awesome10

Awesome!

Profile icon
HahaYes

ummmmm are you sure about these upgrade increments?

Profile icon
CodingCactus

@HahaYes ummm i've never played a clicker before

Profile icon
HahaYes

@CodingCactus uhhhh please go to cookie clicker and see their increments

Profile icon
CodingCactus

@HahaYes is it by a set amount, or by a multiplication?

Profile icon
HahaYes

@CodingCactus it is multiplacation, so it would be approximately a 1.3x + 3

Profile icon
HahaYes

@CodingCactus or around 1.3x

Profile icon
HahaYes

@CodingCactus nvm the count for 1 click is around 1.3x + 15

Profile icon
CodingCactus

@HahaYes 1 click was 3x
they are now 1.3x

Profile icon
HahaYes

@CodingCactus cookie clicker seems to be around 1.15x to 1.3x I'm not sure

Profile icon
YeetMstr

Hope this becomes as popular as my simple dungeon!

BY THE WAY Chezcoder - It was very easy to hack

Profile icon
CodingCactus

@epicman702 what simple dungeon?

Profile icon
YeetMstr
Profile icon
CoolJames1610

hehe i have touchscreen pc

Profile icon
studentAlfredAl
Profile icon
ChezCoder

make it so that everytime you click the cactus, it moves its arm like your pfp

Profile icon
CodingCactus

@ChezCoder good idea!

Profile icon
Muffinlavania
Profile icon
Muffinlavania

Just a suggestion, my friend made a cookie clicker thing, and one good thing about it was that if you opened it in another tab, the tab would show how many Cookies you had, maybe add it?

Profile icon
CodingCactus
Profile icon
Muffinlavania

@CodingCactus so like if you have 15 cacti, it would say 15 cacti here

image

Profile icon
Muffinlavania

@CodingCactus like instead of this:

<title>Cactus Clicker</title>

It would be the variable and stuff

Profile icon
CodingCactus
Profile icon
CodingCactus

@CodingCactus won't be too good when i have like 111110000000000000000000000000 cacti

Profile icon
Muffinlavania

@CodingCactus yea lol i guess so, idk

Profile icon
UniverseQueen

Love your game

Profile icon
CodeLongAndPros

xdotool be like:

image

Profile icon
N3rdL0rd
Profile icon
RyanWong12

nice game

Profile icon
ChezTacoz

How do you change the website logo thing

Profile icon
CodingCactus

@ChezTacoz <link href="Cactus.png" rel="icon"/>

Profile icon
ChezTacoz
Profile icon
coderash

Amazing! Much quicker with an autoclicker at 2500 clicks per second ;-;

Profile icon
KellerWorthen

cacti: 1,170,083,288

Cacti per click: 20,102

Cacti per second: 22,681

Profile icon
DJWang
Profile icon
[deleted]

this is great!!!
I realized I left my tabs open overnight so when I woke up, I had 3 billion+ cacti. :)

Profile icon
CodingCactus

@Twitchmmanikan it collects even if you close the tab (read the description)

Profile icon
[deleted]

rlly?. That's even [email protected]

Profile icon
MarblesAndMore

I find this easier than cookie clicker

Profile icon
BobTheTomatoPie

This is cool! I got to 10,000,000 and then gave up, I would love to see some more options in the store

Profile icon
CodingCactus

@BobTheTomatoPie this project is finished, it was just to learn stuff and I have learnt that stuff now

Profile icon
N3rdL0rd
Profile icon
oignons

Amazing!!!

Profile icon
Cookiezz

WOAH, I left yesterday.. and now....
image

Well, time to spam buy stuff...

:O The cactus moves now! Awesome!

Profile icon
DynamicSquid

I just got on after some sleep, and I now have a billion cacti :)

Screenshot (69)

Profile icon
CodingCactus
Profile icon
Wilke000

I love the pfp!

Profile icon
CodingCactus

@IndyCarter the bowl is a bit dodgy for some reason lol

Profile icon
Wilke000

Ya I see that @CodingCactus