Share your repls and programming experiences

← Back to all posts
Cactus Clicker
h
CodingCactus (2822)

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 :)

Commentshotnewtop
MrEconomical (2202)

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!

CodingCactus (2822)

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

ChezCoder (1483)

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

ChezCoder (1483)

@CodingCactus can i help you fix up your javascript?

ChezCoder (1483)

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

CodingCactus (2822)

@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

ChezCoder (1483)

@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})`;
ChezCoder (1483)

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

ChezCoder (1483)

@CodingCactus hmm...

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

ChezCoder (1483)

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

firefish (308)

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

CodingCactus (2822)

@johnstev111 ok, you do that and show me

firefish (308)

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

firefish (308)

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

firefish (308)

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

firefish (308)

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

CodingCactus (2822)

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

firefish (308)

@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

studentAlfredAl (451)

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

ChezCoder (1483)

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();}
CodingCactus (2822)

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

ChezCoder (1483)

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

awesome10 (212)

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

firefish (308)

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

ChezCoder (1483)

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

firefish (308)

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

awesome10 (212)

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

ChezCoder (1483)

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

HahaYes (1048)

ummmmm are you sure about these upgrade increments?

CodingCactus (2822)

@HahaYes ummm i've never played a clicker before

HahaYes (1048)

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

CodingCactus (2822)

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

HahaYes (1048)

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

HahaYes (1048)

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

CodingCactus (2822)

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

HahaYes (1048)

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

Muffinlavania (727)

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?

Muffinlavania (727)

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

Muffinlavania (727)

@CodingCactus like instead of this:

<title>Cactus Clicker</title>

It would be the variable and stuff

CodingCactus (2822)

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

ChezTacoz (274)

How do you change the website logo thing

coderash (270)

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

KellerWorthen (39)

cacti: 1,170,083,288

Cacti per click: 20,102

Cacti per second: 22,681

[deleted]

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

CodingCactus (2822)

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

[deleted]

rlly?. That's even [email protected]

MarblesAndMore (43)

I find this easier than cookie clicker

epicman702 (187)

Hope this becomes as popular as my simple dungeon!

BY THE WAY Chezcoder - It was very easy to hack

BobTheTomatoPie (1052)

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

CodingCactus (2822)

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

Cookiezz (65)

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

Well, time to spam buy stuff...

:O The cactus moves now! Awesome!

DynamicSquid (2666)

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

CodingCactus (2822)

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