HTML Create a Cookie Clicker Site – Part 4 Multiplier Upgrade
This is the long awaited part 4 to the HTML How to Create a Cookie Clicker Website. Within this episode we will be looking at the multiplier upgrade.
I mention ending the series with the next episode, but after some thinking I’ve got a few more ideas to add mainly relating to its target rewritten below.
Part 3:
Part 5: Not Yet Out
Playlist:
Within this series we will slowly create a cookie clicker styled website with features like unlockables for progression, achievement popups, and some CSS styling to spice the site design up.
Be sure to leave a like if you enjoyed the video, and ask any questions you have below in the comments.
Links:
Brackets – (A modern, open source text editor that understands web design.)
Source code for this episode:
Thank you for this amazing tutorial! 😀
Sorry for delays guys uploads will be back on track now! Feel free to post any questions related to the video or issues you are having with your code.
Okay, One last comment (Sorry for basically filling your comment section) but if you were to do a new series, I have a suggestion. So, if we are staying on coding then a multiplayer .io series would be nice. But, as I have kinda looked into it, Multiplayer is difficult to make, so how about you vs a robot with chess/checkers??? Just in case those are too hard/don't appeal to you, how about a platformer? Still no? Well, how about a city builder game? Okay I'm almost out of ideas, one more, how about a Telltale games type of game where your decision affect things later on? Okay that last one was a stretch but lemme just say City Builder/Chess/Checkers game appeals to me. Like if you agree because so far I think i'm the only one who likes chess/checker bots and city builders. I dunno. Thanks for all the hard work that you do to bring these videos to us! 'Preciate it!
Finally. Time to get your Mcflurry boiiiii
Been waitin for this shit
Tbh could have figured it out myself by the time it took you to upload
Wooohoooo
When is next episode?
Can someone get me the full finished code as of now, because I keep screwing up and I'll have to rewatch the vid a hundred times :/
Can't wait for more!
part 5 lets go
I like how you said "It should take about a week hopefully" for the next episode and its been more than 3 months. I wanna see more!
PLZ PART 5!
for some reason, if you click the multiplier again without the correct amount of money, it goes into the negatives. how do i fix??
Make a new one
Paste bin for the other episodes?
EPISODE 5 PLEASE!
PART 5 WAITING STREAM
Well damn. A year already? I hope you're doing well. Over the last year, I've gotten better at coding by a lot. How I learned was from experimenting around with code and trying new things on my own. I think you should encourage viewers to do this, because well, it's how you learn. I really love the HTML language, and hopefully part 5 will come out eventually and I can keep learning. Or, y'know, any Leeson Reviews… Basically any content. Thanks!
Part 5 please
can somebody please send me the final code i keep failing
Make golden cookies or achievements
Please!!!
awesome
My working version :
<!DOCTYPE html>
<html lang="pl-Pl">
<head>
<title>Cookie Game!</title>
<meta charset="utf-8">
<meta name="author" content="Seweryn Wienke">
<link rel="Shortcut icon" href="Cookie.png">
</head>
<body>
<p> You are gaining per/s: <span id="CookiePerSecond">0</span> </p>
<a href=# onclick="add(1)"><img src="Cookie.png"></a><br><br>
You Got:
<input type="text" id="text" disabled style= "text-align:center"> Cookies.<br>
<p>Mulitiplayer upgrade: x<span id="MulitiplayerCount">1</span></p>
<button onclick="u0_Mulitiplayer()" id="MulitiplayerCountButton">x2</button><br>
<p> Cost of next Multiplayer: <span id="MulitiplayerCost">200</span> </p>
<a href=# onclick="u1_Cursor()"><img src="Cookie.png" width="40px"></a><br>
<p> Cursor is: <span id="CursorCount">0</span> </p>
<p> Cost of next Cursor is: <span id="CursorCost">12</span> </p>
<a href=# onclick="u2_Farm()"><img src="Cookie.png" width="40px"></a><br>
<p> Farm is: <span id="FarmCount">0</span> </p>
<p> Cost of next Farm is: <span id="FarmCost">15</span> </p>
<!–
<a href=# onclick="save()">save</a>
<a href=# onclick="load()">load</a><br>
<button><a href="#" onclick="save()">Save</a></button>
<button><a href="#" onclick="load()">Load</a></button><br>
–>
<button onclick="save()">Save Game</button>
<button onclick="load()">Load Game</button>
<button onclick="reset()">Reset Game</button><br>
<script>
var CookiePerSecond = 0;
var cookiecount = 0;
var MulitiplayerCount = 1;
var MulitiplayerCost = 200;
var CursorCount = 0;
var CursorCost = 12;
var FarmCount = 0;
var FarmCost = 15;
load();
FirstLoadGameErrorNaN();
function add(x)
{
FirstLoadGameErrorNaN();
x *=MulitiplayerCount;
console.log(x);
document.getElementById("CookiePerSecond").innerHTML = CookiePerSecond;
cookiecount += x;
document.getElementById('text').value = cookiecount;
document.title = cookiecount + ' Cookies';
document.getElementById("CursorCount").innerHTML = CursorCount;
document.getElementById("CursorCost").innerHTML = CursorCost;
document.getElementById("FarmCount").innerHTML = FarmCount;
document.getElementById("FarmCost").innerHTML = FarmCost;
}
function u0_Mulitiplayer()
{
if (cookiecount>=MulitiplayerCost)
{
cookiecount = cookiecount – MulitiplayerCost;
MulitiplayerCount++;
document.getElementById("MulitiplayerCount").innerHTML=MulitiplayerCount;
document.getElementById("MulitiplayerCountButton").innerHTML = "x"+ (MulitiplayerCount+1);
MulitiplayerCost = (MulitiplayerCount+1)*100;
document.getElementById("MulitiplayerCost").innerHTML=MulitiplayerCost;
}
}
function u1_Cursor()
{
if (cookiecount>=CursorCost)
{
cookiecount = cookiecount – CursorCost;
CursorCount++;
CursorCost = (CursorCount+1)*12;
//CursorCost = CursorCost+12;
}
}
function u2_Farm()
{
if (cookiecount>=FarmCost)
{
cookiecount = cookiecount – FarmCost;
FarmCount++;
FarmCost = (FarmCount+1)*15;
//FarmCost = FarmCost+15;
}
}
setInterval(function()
{
CookiePerSecond = CursorCount + (FarmCount*2);
CookiePerSecond *= MulitiplayerCount;
add(CookiePerSecond);
//add(CursorCount);
//add(FarmCount*2);
}
, 1000);
function save()
{
localStorage.setItem("cookiecount", cookiecount);
localStorage.setItem("CursorCount", CursorCount);
localStorage.setItem("FarmCount", FarmCount);
localStorage.setItem("MulitiplayerCount", MulitiplayerCount);
console.log("save");
}
function load()
{
cookiecount=localStorage.getItem("cookiecount");
cookiecount=parseInt(cookiecount);
document.getElementById('text').value = cookiecount;
document.title = cookiecount + ' Cookies';
console.log("load");
MulitiplayerCount=localStorage.getItem("MulitiplayerCount");
MulitiplayerCount=parseInt(MulitiplayerCount);
document.getElementById("MulitiplayerCount").innerHTML=MulitiplayerCount;
document.getElementById("MulitiplayerCountButton").innerHTML = "x"+ (MulitiplayerCount+1);
MulitiplayerCost = (MulitiplayerCount+1)*100;
document.getElementById("MulitiplayerCost").innerHTML=MulitiplayerCost;
CursorCount=localStorage.getItem("CursorCount");
CursorCount=parseInt(CursorCount);
document.getElementById("CursorCount").innerHTML = CursorCount;
console.log(CursorCount);
CursorCost = (CursorCount+1)*12;
document.getElementById("CursorCost").innerHTML = CursorCost;
FarmCount=localStorage.getItem("FarmCount");
FarmCount=parseInt(FarmCount);
document.getElementById("FarmCount").innerHTML = FarmCount;
FarmCost = (FarmCount+1)*15;
document.getElementById("FarmCost").innerHTML = FarmCost;
console.log(FarmCount);
//console.log(FarmCost);
}
function FirstLoadGameErrorNaN()
{
if (isNaN(cookiecount))
{
console.log("Nan Eror");
reset();
}
}
function reset()
{
console.log("Reset");
CookiePerSecond = 0;
cookiecount = 0;
MulitiplayerCount = 1;
MulitiplayerCost = 200;
CursorCount = 0;
CursorCost = 12;
FarmCount = 0;
FarmCost = 15;
//save();
localStorage.setItem("cookiecount", 0);
localStorage.setItem("CursorCount", 0);
localStorage.setItem("FarmCount", 0);
localStorage.setItem("MulitiplayerCount", 1);
load();
}
</script>
</body>
</html>
Part 5 or the source code for the finished game
Part 5?
uff fuck i want this multiplier on the click…
1 weeb, it's been 3 and half years xd
could you please keep this series going? i LOVE IT