A cool game I made


#1

Well, I got trust level 2 now. And to celebrate, I made a game for you all!
Since I wouldn’t put this in GitHub or a website, here’s the 100+ lines of code:

<!DOCTYPE html>
<html>
	<head>
		<title>Clicker Game</title>
		<link rel="stylesheet" href="style.css">
		<script>
			var points = 0;
			var pointsPerClick = 1;
			var upgradeCost = 5;
			var algorithm = 1;
			var nextUpgrade = 1;
			var gotAcheivement1 = false;
			var gotAcheivement2 = false;
			var gotAcheivement3 = false;
			var gotAcheivement4 = false;
			var gotAcheivement5 = false;
			var gotAcheivement6 = false;
			var gotAcheivement7 = false;
			var gotAcheivement8 = false;
			var gotAcheivement9 = false;
			var gotAcheivement10 = false;
			var totalPointsSpent = 0;
			var totalPoints = 0;
			function moreScore() {
				points += pointsPerClick;
				document.getElementById("output").innerHTML = points;
				totalPoints += pointsPerClick;
				document.getElementById("totalpointspent").innerHTML = "";
				document.getElementById("totalpoints").innerHTML = "+" + totalPoints;
				checkForAcheivements();
			}
			function upgradeClicks() {
				if (points - upgradeCost == 0 || points - upgradeCost > 0) {
					points -= upgradeCost;
					upgradeCost += 5;
					document.getElementById("output").innerHTML = points;
					document.getElementById("output5").innerHTML = upgradeCost;
					algorithm += 1;
					pointsPerClick += algorithm;
					document.getElementById("output2").innerHTML = pointsPerClick;
					nextUpgrade = pointsPerClick + algorithm;
					document.getElementById("output3").innerHTML = nextUpgrade;
					totalPointsSpent -= upgradeCost;
					document.getElementById("totalpoints").innerHTML = "";
					document.getElementById("totalpointspent").innerHTML = totalPointsSpent;
					
				} else {
					document.getElementById("output4").innerHTML = "You don't have enough points!";
					setTimeout(function(){document.getElementById("output4").innerHTML = "";}, 1000);
				}
			}
			function checkForAcheivements() {
				if (points == 1 && gotAcheivement1 == false) {
					gotAcheivement1 = true;
					document.getElementById("acheivements").innerHTML = "Acheivement Get! Let's Get Started";
					setTimeout(function(){document.getElementById("acheivements").innerHTML = "";}, 1000);
				}
				if ( ( points == 100 || points > 100) && gotAcheivement2 == false) {
					gotAcheivement2 = true;
					document.getElementById("acheivements").innerHTML = "Acheivement Get! 100 Points";
					setTimeout(function(){document.getElementById("acheivements").innerHTML = "";}, 1000);
				}
				if ( ( points == 1000 || points > 1000) && gotAcheivement3 == false) {
					gotAcheivement3 = true;
					document.getElementById("acheivements").innerHTML = "Acheivement Get! 1,000 Points";
					setTimeout(function(){document.getElementById("acheivements").innerHTML = "";}, 1000);
				}
				if (points > 9000 && gotAcheivement4 == false) {
					gotAcheivement4 = true;
					document.getElementById("acheivements").innerHTML = "Acheivement Get! It's Over 9,000!";
					setTimeout(function(){document.getElementById("acheivements").innerHTML = "";}, 1000);
				}
				if ( ( points == 100000 || points > 100000 ) && gotAcheivement5 == false) {
					gotAcheivement5 = true;
					document.getElementById("acheivements").innerHTML = "Acheivement Get! 100,000 Points";
					setTimeout(function(){document.getElementById("acheivements").innerHTML = "";}, 1000);
				}
				if ( (points == 1000000 || points > 1000000) && !gotAcheivement6 == false) {
					gotAcheivement6 = true;
					document.getElementById("acheivements").innerHTML = "Acheivement Get! 1,000,000 Points";
					setTimeout(function(){document.getElementById("acheivements").innerHTML = "";}, 1000);
				}
				if ( (points == 10000000 || points > 10000000) && !gotAcheivement7 == false) {
					gotAcheivement7 = true;
					document.getElementById("acheivements").innerHTML = "Acheivement Get! 10,000,000 Points";
					setTimeout(function(){document.getElementById("acheivements").innerHTML = "";}, 1000);
				}
				if ( (points == 100000000 || points > 100000000) && !gotAcheivement8 == false) {
					gotAcheivement8 = true;
					document.getElementById("acheivements").innerHTML = "Acheivement Get! 100,000,000 Points";
					setTimeout(function(){document.getElementById("acheivements").innerHTML = "";}, 1000);
				}
				if ( (points == 1000000000 || points > 1000000000) && !gotAcheivement9 == false) {
					gotAcheivement9 = true;
					document.getElementById("acheivements").innerHTML = "Acheivement Get! 1,000,000,000 Points";
					setTimeout(function(){document.getElementById("acheivements").innerHTML = "";}, 1000);
				}
				if ( (points == 10000000000 || points > 10000000000) && !gotAcheivement10 == false) {
					gotAcheivement6 = true;
					document.getElementById("acheivements").innerHTML = "Acheivement Get! 10,000,000,000 Points (The Final Acheivement)";
					setTimeout(function(){document.getElementById("acheivements").innerHTML = "";}, 1000);
				
				}
			}
			function showStats(){
				document.getElementById("stats1").innerHTML = "Total Points: " + totalPoints;
				document.getElementById("stats2").innerHTML = "Total Points Spent: " + totalPointsSpent;
				setTimeout(function(){document.getElementById("stats1").innerHTML = ""; document.getElementById("stats2").innerHTML = "";}, 1000);
			}
		</script>
	</head>
	<body>
		<h1>Clicker Game</h1>
		<p>Points:</p>
		<p id="output">0</p>
		<p>Points Per Click:</p>
		<p id="output2">1</p>
		<button onclick="moreScore();" style="font-size: 50px;">Click Me!</button>
		<p>Next Upgrade:</p>
		<p id="output3">1 (oh wait it already is 1)</p>
		<p>Points Per Click</p>
		<button onclick="upgradeClicks();">Upgrade Clicks!</button>
		<p id="output4"></p>
		<p>Cost:</p>
		<p id="output5"></p>
		<p id="totalpoints"></p>
		<p id="totalpointspent"></p>
		<p id="acheivements"></p>
		<button onclick="showStats();">Stats:</button>
		<p id="stats1"></p>
		<p id="stats2"></p> 
		</footer>
	</body>
</html>

#2

Nice job getting Trust level 2! I also just earned it =)

However when I put the code in a about:blank it didn’t work. My browser was chrome.


#3

Including results for achievements

and

are opposite one another in their logic.

if (A === false)

is the same as,

if (! A)

and,

if (!A === false)

is the same as,

if (A)

Note the identity operator as opposed to the equality operator. We should only use loose comparisons in special cases that are still under our strict control. Best to use the === at all times. However, in this case, since the variable refers directly to a primitive boolean we can see that no comparison is necessary, at all. We would never write,

if (A === true)

or,

if (A === false)

That is redundant.

There is a lot of what we used to call, spaghetti code in the checkForAchievments function. That deserves another look in the aim of simplifying and reducing repetition. Repeated blocks of code can be abstracted away into a helper function, and repeated calls to getElementById for the same element can be cached at the start of the program.

const achievements = document.querySelector('#achievements');

const timeOut = () = {
  setTimeout(() => {
    acheivements.textContent = '';
  }, 1000);
};

Now let’s see how that improves the readability of the code…

        if (points == 1 && gotAcheivement1 == false) {
          gotAcheivement1 = true;
          document.getElementById("acheivements").innerHTML = "Acheivement Get! Let's Get Started";
          setTimeout(function(){document.getElementById("acheivements").innerHTML = "";}, 1000);
        }
        if (points == 1 && !gotAchievement1) {
          gotAcheivement1 = true;
          acheivements.textContent = "Acheivement Get! Let's Get Started";
          timeOut();
        }

Since none of the if statements contain return the entire thing should be an if..else if..else if..else.


#4

Try using a text editor, and save the file as HTML. Then locate the file and run it ^^


#5

Honestly, I don’t care about the readability of my code. I just make sure I indent properly, and that it works.

However I do agree with you, and I could’ve done a better job at organizing it.

Thanks for the advice though, Roy, and I really appreciate it :grinning:


#6

You should if you ever expect others to read it or maintain it. Verbosity and repetition are motivation killers and the reader will quickly lose interest. Best not to bury the important information in spaghetti. We know there are mushrooms in the sauce, but where?

Which in JS is not a requirement, just an aid to readability. All the indents in the world won’t cure code that is overly repetitive and goes on forever on the horizontal scrollbar.

Most important, yes, but just because it works doesn’t mean it will not fail at some point. Brief, concise, modularized code is what we should endeavor to reduce any code bloat to. It’s easier to spot errors in both typing and logic, and simpler to maintain and revise.


#7

I don’t want people to read my code, I just want people to see the output of it. And if they do read it, it should be fine because the code itself is at a moderate degree of complexity.

I know it is a pain to just see the ifs, and document.getElementByIds and all of that stuff. But it pays off for me anyways. Is there even a plural for code snippets?

My code can be ugly and generic in the inside, but the output is okay. And I can handle repetitive code myself, I just copy and paste it and edit it.

Roy, you might not be a fan of how I write my code, but I appreciate the fact you’re detailing my work and improvising it in your way. It helps me a lot. So thanks :slight_smile:


#8

Ok! I’ll try it! Thanks =)


#9

I tried one text editor and it didn’t work. I’m going to try another one…

I’ll tell you if any of them work.


#10

Math Quiz-Let the user set the minimum value and maximum value of the random numbers

Locate the link to the original HTML and script, and compare. Perfect comparison to what we are now discussing.

Are we only showing people code that works, or are we teaching them to be responsible coders? Just because it works does not make it worth using. There are stricter paradigms that we must aspire toward so our thinking gets wrapped around them. In the end, our code speaks to the amount of thought that went into it.

Only so far as you might follow the same path. Never accept anything as a done deal until you’ve proven it so. Eventually you will come to appreciate why I insist upon consolidation and simplicity. It is the key to scalability. Free one’s self of the bonds. Write scalable code.


#11

Oops, I think I forgot to make the style sheet public… If one text editor doesn’t work, then it’s pretty much the same thing for the other text editors.

I will edit the code soon enough, and I’ll tell you when I’ll get it fixed :slight_smile:


#12

When I read that, I think I should try harder to make my code look better, even though I don’t feel so. But I know you shouldn’t judge something by its start, but by its end.

People can learn through good sources like this site, but they don’t have to learn from me. They can learn from tutors, or other people.

Well, I think I will soon. If I learn more.


#13

Ok! Thanks @_markviii!


#14

Overall, your code still is pretty clean and orderly I must say in my opinion. However, a few of mtf’s suggestions could make it cleaner.


#15

Code can look good and still be misleading, or flat out wrong. It’s not the look, but the flow of the code that leads a reader on. When I looked at your code, admittedly I did not even run it. In fact I still don’t know what it does.

Share your code on any site and expect criticism. My only goad here is to demonstrate that there is room to simplify and reduce, and that’s where my focus is. I don’t think in terms of ‘good’ or ‘better’, but in terms of simplicity and readability. Can I deduce what the code is doing and follow the flow. If there is too much repetition I stop and move on to something else that can occupy my time.

At any length, this is not an argument of my points. I’ve shared some insight and that’s enough for me. Maybe one day I’ll actually try the code you wrote, or rewrite it my way and see what it does.


#16

Not very nice but i agree.
A programmer should know what a program does just by looking at the code. Its a very good habit to keep the most commen guidelines.

Simple but i liked it. Thankyou for this.


#17

Okay, in fairness I did run the code and see what it does. Lacking any sort of synopsis, though, I am still scratching my head as to how this is a game.

My one question still remains, why are the first five,

 && gotAcheivement2

and the remaining five,

 && !gotAcheivement6

???

Once that logic is sorted out I’m pretty sure this program can be reduced and simplified considerably.

Version with the spelling error corrected:

Clicker Game


#18

How should we interpret this? We are reading your code like a novel, and find the plot being twisted in a strange way, the ! in the latter five notwithstanding?


#19

Well yes, I see your point supporting both cases. I can see what it does by looking at the code, but its better to play it.

PS: You spelled common wrong


#20

Well i figure it is one of his first games. Faults in logic are to be expected in the first try’s.
Besides i tried to simplify it and and fix the logic errors and you would be surprised about how close it is to perfect. You could probably make it way shorter but the readability would probably go down if you do.

And i guess you never played cookie clicker ^^
check out this link and i am sure you can see the resemblances Cookie clicker