HTML & JS – How to make an incremental/clicker game – #2 CSS
Tanktot Games
Views: 4232
Like: 94
In this tutorial I show you how to improve the look of your incremental or clicker game using solely CSS.
I also dive into the fundamentals of setting up an HTML with CSS to start styling the page. I also go over some transitions on making the clicker object bigger as you hover over it and click on it. This tutorial mainly revolves around improving the look of your incremental game using CSS, but the tutorial does use some JS to improve some things.
Watch part 1:
Official Website:
26.02.2022
Hi i did follow all of you steps but when I try to buy cursor i can buy it even if my score is zero so what is the mistake?
Wait, was cookie clicker made because the save data is stored in your cookies?
Hey, I followed you tutorial i love them they are fantastic for beginners like myself but. when i code the entire script and i open my game it shows up as NaN and i can't click the object anymore do you have any tips to solve this.
Bro, really helped me out on the way to become a software developer, hope you stay well in life and get the chance to help millions and billions of people. Thanks from the bottom of my heart!
i have just a problem when i click the button with 0 to 14 works to buy too not only when i have 15 or more. how can i fix?
Thanks 🙂
The Salsa per Second doesnt seem to work for me
For some reason, the ease-in-out and resize does not work for me at line 30-31 and 41-43. Can somebody please tell me how to fix this issue?
3:11
6:46
20:52
the onclick="addToScore(clickingpower)" is not working for me
25:53
Thank you very much for this tutorial, used it to make my very first game !
yo thanks im making an orange clicker rn
16:00
I'm a self-taught HTML/JS/CSS coder and I gotta say "Thank you!"
Your series is great and could teach anybody with a basic grasp of programming how to make their first incremental game. The difficulty curve is a bit steep, but that's mainly because of the matter at hand, and because the three languages are so utterly different from each other. Since you're not a "live" teacher, that's only a mild issue; it's easy to rewind a bit when we lost you. 😉
But there's one thing I'd like to address: DRY a.k.a. "Don't repeat yourself". It's neither hard nor easy to follow (I've fallen for it more often than I'd want to admit), and it saves a lot of work further down the road. Long story short, if you copy and paste some lines of code, the first thought should usually be, "How to do it without two copies of essentially the same code?" .
For example, 27:01 . Take note everybody that the code isn't wrong – and it's not too bad either. It's just a potential source of future bugs, and not in the Swarm Simulator kind.
What we see there is that the function updateScorePerSecond computes the nomber of resources to be added each second, but the unnamed function a few lines below doesn't use that. If you did score = score + scorePerSecond instead, you wouldn't have to add a multiple of ovens in both functions; no matter what value of scorePerSecond was current, that value would both be visible in the GUI and actually applied each second. As it is, a simple typo or oversight can cause your code to display one figure and apply a different one. And since those "resource per second" figures get very complicated in later stages of incrementals, that's a huge minefierd which should be defused as soon as possible.
Another (minor) DRY issue is the instructions which are basically var1 = var1 + something. There's a shorter way to write these, namely var1 += something, with the added benefit that the runtime environment doesn't have to compute/lookup where to put the result; it goes into the first operand, which has already been looked up. And it saves you from bugs of the form "ovens = grandmas + 1", where one instance of a variable was replaced after copy-pasting but the other was not.
There's also the issue that the functions buyGrandma (which looks wrong, but sounds wrong for an entirely different reason) and buyOven are copies of buyCursor . That's an issue which is harder to attack; to attack it properly, one has to change the data structure. But it'll be worth it in the long run.
One could use arrays instead; a generatorPrice array could replace all of cursorCost, grandmaCost, ovenCost, etc. A generatorCount array would replace cursors, grandmas, ovens, etc. And a generatorTag array, which contains the strings "cursor", "grandma", etc. would keep track of the different names. That would allow us to write the following universal function:
function buyGenerator(i) {
if (score >= generatorPrice[i] {
score -= generatorPrice[i];
generatorCount[i] += 1;
generatorPrice[i] = Math.round(1.15 * generatorPrice[i]);
document.getElementById("score").innerHTML = score;
document.getElementById(generatorTag[i]+"cost").innerHTML = generatorPrice[i];
document.getElementById(generatorTag[i]+"s").innerHTML = generatorCount[i];
// (1)
updateScorePerSecond();
}
}
That's a function that takes a single number to select which generator to buy. 0 would be a cursor, 1 a grandma, etc.
(1) Take note that the ID tags generated in that line are not always English words; if you add "factory", "child", and "grandma in space" later, that would reference the tags "factorys", "childs", and "grandma in spaces" – IMO a small price to get the "buy" functions done once and for all.
Again, this tutorial is good as it is; I just thought this would be the stage where one should start thinking of the DRY concept, as it is a thing to keep in mind to avoid tripping yourself later. And I realize that you will introduce some of these changes yourself in the next part. (The opposite of DRY is WET-WET and usually explained as "Write Everything Twice – Wasting Everyone's Time" in a professional environment.)
Hello in the time line 18:30 your curser image has that box thing around it how does yours have it and i copy exactly and mine doesn't. Is there a line of code i might of done wrong or whats up?
im done with the second episode and i gotta say its amazing! my game is already not looking bad and is actually playable! thank you so much for making these man
I loved this! But one problem is that the score per second stays at 0. Idk how I can fix it, but it doesn't work. ;-;
Also the title doesn't change.
very good video. Better than most coding lessons and i seen a lot