Cactus Clicker
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 :)
im a mean person so I will proceed to brutally critique your code now
- 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. useinnerText
instead - 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 doif (!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 - 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 ofNumber()
to convert strings to numbers as explained in my post). ternary worksa ? (do something if a is true) : (do something if a is false)
and you can also use it for assignmentx = a ? (assign if a is true) : (assign if a is false)
or if you are even bigger brain you can uselet 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) - please try to put spaces in between brackets everytime I see
}else{
I die a little bit inside :( - you should always use
let
andconst
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 usesvar
anymore, it has a lot of scoping issues and its weird. - never declare variables without
let
orconst
it makes them properties ofwindow
and immediately global just very weird - dont spam
document.getElementById()
you can assign a variable or something - 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!
@MrEconomical errmmm ok thanks I will try to eventually understand what you just said :)
@MrEconomical yeah, I like to think of let
and const
as temporary variables. Its just so much more cleeean
@CodingCactus can i help you fix up your javascript?
@ChezCoder well it seems to work
@CodingCactus lol i mean like do what mreconomical said above.
@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
@CodingCactus lol ok :D
@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 ermmm didn't work
@CodingCactus wut... where did u put it?
@ChezCoder where should i put it?
@CodingCactus ah, ok i see.
In style.css, add this to the image's style:
transform: scaleX(1);
Then it will work :D
@ChezCoder it doesn't :(
@CodingCactus hmm...
beginning of script.js:
document.getElementById("cactus").style.transform = "scaleX(1)";
@CodingCactus lol, also,
if (localStorage.getItem("perSec") === null)
can just be
if (localStorage.getItem("perSec"))
This is because null == false
@CodingCactus I will just say this: you can make a clicker in 20 lines of JS
@johnstev111 ok, you do that and show me
@CodingCactus I've done it already, I just need a hideous amount of items to buy
@CodingCactus Well It's done, excuse the teeny-weeny amount of items https://Firefish-Clicker--johnstev111.repl.co
@johnstev111 too bad it doesn't work
@CodingCactus WHAT? I've been testing that (are you lying?)
@CodingCactus OOF FIXED IT SORRY... IT WAS A MISSING CLOSING BRACE THAT DID IT
@CodingCactus wops caps
erm so it has no per second things or saves your data etc.
@johnstev111
@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
Y E S
@DynamicSquid Haha Y E S
@HahaYes lol :)
code go fish!
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();}
@ChezCoder lol, you ruin it for yourself if you cheat, and if you cheat at a clicker game, it just confirms that yourLife == sad
ok @CodingCactus, so you got one thing wrong and one thing right. Wrong: I hack for fun. Right: my life is sad.
@ChezCoder when you do that, its more how quickly can you buy things than how quickly you click the cactus
@ChezCoder All I do is constantly run a 50,000 iteration for loop containing just document.getElementById("cactus").click()
and then buy upgardes
hmm... time for an EXPLOIT!!!!
nahh to lazy :D
@ChezCoder a while true loop did it.... I had to refresh because of the infinite loop... but afterwards I had a magic 85K cacti
@johnstev111 85k isn't much in this game
@johnstev111 yeah 85k is what i get in less than 40 clicks
Awesome!
ummmmm are you sure about these upgrade increments?
@HahaYes ummm i've never played a clicker before
@CodingCactus uhhhh please go to cookie clicker and see their increments
@HahaYes is it by a set amount, or by a multiplication?
@CodingCactus it is multiplacation, so it would be approximately a 1.3x + 3
@CodingCactus or around 1.3x
@CodingCactus nvm the count for 1 click is around 1.3x + 15
@HahaYes 1 click was 3x
they are now 1.3x
@CodingCactus cookie clicker seems to be around 1.15x to 1.3x I'm not sure
Hope this becomes as popular as my simple dungeon!
BY THE WAY Chezcoder - It was very easy to hack
@epicman702 what simple dungeon?
@CodingCactus Its a game I made
It hit 82 upvotes
https://repl.it/talk/share/A-simple-dungeon-game/33406
hehe i have touchscreen pc
make it so that everytime you click the cactus, it moves its arm like your pfp
@ChezCoder good idea!
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?
@CodingCactus so like if you have 15 cacti, it would say 15 cacti here
@CodingCactus like instead of this:
<title>Cactus Clicker</title>
It would be the variable and stuff
@CodingCactus won't be too good when i have like 111110000000000000000000000000 cacti
@CodingCactus yea lol i guess so, idk
Love your game
nice game
How do you change the website logo thing
@ChezTacoz <link href="Cactus.png" rel="icon"/>
@CodingCactus OK thx
Amazing! Much quicker with an autoclicker at 2500 clicks per second ;-;
cacti: 1,170,083,288
Cacti per click: 20,102
Cacti per second: 22,681
this is great!!!
I realized I left my tabs open overnight so when I woke up, I had 3 billion+ cacti. :)
@Twitchmmanikan it collects even if you close the tab (read the description)
rlly?. That's even [email protected]
I find this easier than cookie clicker
This is cool! I got to 10,000,000 and then gave up, I would love to see some more options in the store
@BobTheTomatoPie this project is finished, it was just to learn stuff and I have learnt that stuff now
Amazing!!!
I love the pfp!
@IndyCarter the bowl is a bit dodgy for some reason lol
Ya I see that @CodingCactus
nice
!say hi to Coder100 @Coder100
lol wut @studentAlfredAl
lol I was trying to get the bot to come on here, but I forgot the commands xD @Coder100