Share your repls and programming experiences

← Back to all posts
Clicker Game In HTML!
Zexogon (695)

I tried this a few times but now i finally have the hang of javascript (kinda) ill be updating this and add new things/make it look better for now enjoy! :3

-Dart

Commentshotnewtop
MrEconomical (1464)

nice game! its pretty good

some critiques for your javascript (sorry if I sound very critical)
1. += and -= instead of e = e + buttonvalue - its shorter and actually more efficient performance-wise too
2. you should try to use let for defining variables that can change in the future and const for variables that will not - its just a good practice and also looks cool
3. try to use else if instead of sticking a bunch of ifs together, its more efficient and also a good practice
4. use innerText instead of innerHTML - innerHTML makes your sites vulnerable to xss (if somebody inserts malicious scripts and your program puts then directly into the html), innerText interpretes everything as text
5. don't put semicolons - javascript has ASI (automatic semicolon insertion) that will automatically do them for you. I think it looks cleaner, and if I forgot a semicolon somewhere and I never find the missing semicolon, I could never live with myself lol
6. use template literals when "adding" strings together - instead of doing "a" + x you can do `a${x}` I think it looks cleaner

I hope these tips help you improve, and good luck to your future javascript endeavors!

syc1 (20)

@MrEconomical It's a better habit to add semicolons, it helps if you end up trying other languages like Java, C, C++, etc. Of course, it's not my choice, but I'm just stating a point. Other than that I agree with what you said.

MrEconomical (1464)

@syc1 I use c++ and am aware I just don't think its good for js

SilentShadowBla (195)

@MrEconomical Please help me my friend challenged me to make a clicker game with html/js/css and i need help. How do you make a clicks per sec. like how do you make the "cash" automatically go up?
THX in advance :) Btw love your work!

syc1 (20)

@SilentShadowBla Use setInterval(function, ms) to change a localstorage value, then when you display balance, show that localStorage value.

Zavexeon (936)

@MrEconomical Don't forget to mention the scope differences between var and let. var is global, let isn't.

Zexogon (695)

@MrEconomical thanks for the info (especially else if because I couldn’t figure that out :facepalm:) and I will be changing inner html and with the adding functions I’m still used to python and stuff so I just went with that but I will be improving and I love the criticism thanks for the feedback!

mwilki7 (807)

@MrEconomical
I haven't seen any performance bonuses using var1+=var2 vs var1 = var1 + var2
The compiler should be smart enought to detect that.

MrEconomical (1464)

@mwilki7 it actually does make a performance difference with strings
because a += b adds whatever value to the location of the variable a in memory, while a = a + b creates a + b in memory then assigns that to a
it probably won't make much of a difference in js tbh

mwilki7 (807)

@MrEconomical
performance results im getting are not describing a difference

MrEconomical (1464)

@mwilki7 one of my programs ran twice as fast using += rather than a = a + b

in c++

mwilki7 (807)

Would have to look at the program

RohilPatel (414)

Check out my "Grades Clicker". You will have some reference there. @SilentShadowBla

Zexogon (695)

@RohilPatel is this advertising nah jk your game is pretty good I saw it I wish I had dem css skills

RohilPatel (414)

Yea! I wouldn't have a problem teaching you. Sorry if I gave u the impression that I was advertising... @Zexogon

ChungusFam (9)

This was a great attraction. You deserve my vote. Can you also teach me some JS?

RohilPatel (414)

Haha! I wish I could finish learning myself! @ChungusFam

hazelpy (7)

@ChungusFam There are plenty of tutorials on YouTube, that's where I got started. The rest of it is googling and practice 😅

Zexogon (695)

@hazelpy if stack overflow didn’t exist I would die

Altarias (43)

Pretty good. I like it.

Makrayne (38)

You did very well. But I think you should increase the starting price of the autoclicker.

Commodore95 (8)

Nice! I enjoyed this very much.

3465728974563 (46)

@Zexogon This is pretty cool! Would you like to do a collab? I have a clicker game I'm working on right now and it would be cool to have someone helping me out with it. Interested?

LiamDonohue (74)

i suggest using alert("value")
for when somebody does not have enough "money"

(great game btw)

hazelpy (7)

@LiamDonohue I highly advise against this. Using some fancy CSS and some JavaScript for movement, you can make popups that show up in the bottom of the screen when you don't have enough. Just use position: absolute; and the left and top attributes.

Zexogon (695)

@hazelpy i actually like the alert() feature and i think it would be cool to incorporate it (plus im lazy so)

LiamDonohue (74)

lol css is annoying sometimes @Zexogon

Warhawk947 (258)

congrats on 420 cycles

ThePhoenixfish (42)

I think i spent a little too much time on this xD

syc1 (20)

Quick tip: rather than using <div> elements for buttons, use <button>. you can style it with css to look the same using

button {
  border: 2px solid black; 
  border-radius: 4px; 
  background-color: rgba(75, 75, 75);
}

or something like that. Also, for the red button, just set border-radius to half the button width. Works like a charm.

RohilPatel (414)

Yea, i would agree in this case, however I'm most I would use a div though. @syc1

MrEconomical (1464)

@Zexogon oh yes I forgot about this definitely use <button> for buttons (when possible) because of a few reasons
1) its made to be a button bruh
2) tab doesn't work on divs (when somebody uses tab to select inputs)
3) it has a bunch of built-in stuff like disabled that divs don't have
4) easier to style

hazelpy (7)

@Zexogon credit me too, haha I brought it up 😳 I'm just kidding I don't really care

HatKid1 (0)

Hey! It is I, HatKid1.

I don't know why I'm presenting myself like that, I'm not very special.
I remixed YOUR game into something B I G.
An Undertale clicker. With constant updates.
Here's the link if you're interested.

https://underclicker.hatkid1.repl.co/

Sound warning!
See you probably soon!
All credit is due to the original creator and extra asset creators.

nN34398Ff (0)

Leave this on overnight
Clicks: Error

polyp (0)

Not bad! Maybe add an animation of the button clicking, that would be great

kbadrinath_tcsp (1)

I love the idea, but if you are able try making the overall layout more appealing. Other than that, great start in js!

Zexogon (695)

@kbadrinath_tcsp im sory css lord (i do suck at css fr tho TwT)