Share your repls and programming experiences

← Back to all posts
Cactus Clicker
h
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
CorruptedIphone
Brendan23
ninja2k11
dabs364
syflexer
CodingRobot12
ChezTacoz
dfnk
SilentShadowBla
jaycannariato
Comments
hotnewtop
Coder100

nice

studentAlfredAl

!say hi to Coder100 @Coder100

Coder100
studentAlfredAl

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

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!

CodingCactus

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

ChezCoder

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

ChezCoder

@CodingCactus can i help you fix up your javascript?

CodingCactus

@ChezCoder well it seems to work

ChezCoder

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

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

ChezCoder

@CodingCactus lol ok :D

ChezCoder

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

CodingCactus

@ChezCoder ermmm didn't work

ChezCoder

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

CodingCactus

@ChezCoder where should i put it?

ChezCoder

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

CodingCactus

@ChezCoder it doesn't :(

ChezCoder

@CodingCactus hmm...

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

CodingCactus
ChezCoder
ChezCoder

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

firefish

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

CodingCactus

@johnstev111 ok, you do that and show me

firefish

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

firefish

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

CodingCactus

@johnstev111 too bad it doesn't work

firefish

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

firefish

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

firefish

@CodingCactus wops caps

CodingCactus

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

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

firefish
DynamicSquid

Y E S

HahaYes

@DynamicSquid Haha Y E S

DynamicSquid

@HahaYes lol :)

codingduck

code go fish!

ChezCoder

EXPLOIT

Spam click the cacti

Usage:

Just paste it in console ;)


Change cacti per sec

Usage:

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


Change cacti per click

Usage

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


Change cacti amount

Usage

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


All Together

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

ChezCoder

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

CodingCactus
awesome10

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

ChezCoder
firefish

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

ChezCoder

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

ChezCoder

nahh to lazy :D

DynamicSquid
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

CodingCactus

@johnstev111 85k isn't much in this game

awesome10

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

awesome10

Awesome!

HahaYes

ummmmm are you sure about these upgrade increments?

CodingCactus

@HahaYes ummm i've never played a clicker before

HahaYes

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

CodingCactus

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

HahaYes

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

HahaYes

@CodingCactus or around 1.3x

HahaYes

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

CodingCactus

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

HahaYes

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

epicman702

Hope this becomes as popular as my simple dungeon!

BY THE WAY Chezcoder - It was very easy to hack

CodingCactus

@epicman702 what simple dungeon?

epicman702
CoolJames1610

hehe i have touchscreen pc

studentAlfredAl
ChezCoder

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

CodingCactus

@ChezCoder good idea!

[deleted]

this is op

Muffinlavania

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?

CodingCactus
Muffinlavania

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

Muffinlavania

@CodingCactus like instead of this:

It would be the variable and stuff

CodingCactus
CodingCactus

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

Muffinlavania

@CodingCactus yea lol i guess so, idk

UniverseQueen

Love your game

CodeLongAndPros

xdotool be like:

HENRYMARTIN4

RyanWong12

nice game

ChezTacoz

How do you change the website logo thing

CodingCactus

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

ChezTacoz
coderash

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

KellerWorthen

cacti: 1,170,083,288

Cacti per click: 20,102

Cacti per second: 22,681

DJWang

Like a boss.

[deleted]

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

CodingCactus

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

[deleted]

rlly?. That's even [email protected]

MarblesAndMore

I find this easier than cookie clicker

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

CodingCactus

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

HENRYMARTIN4

oignons

Amazing!!!

Cookiezz

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

Well, time to spam buy stuff...

:O The cactus moves now! Awesome!

DynamicSquid

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

CodingCactus
Wilke000

I love the pfp!

CodingCactus

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

Wilke000

Ya I see that @CodingCactus