HHS Programming - Cookie Clicker Guide

Cookie Clicker is a game in which the player clicks a cookie to gain more cookies.

1.) Setup

Begin by creating the basic files needed:

index.html - where all the html will go to define the structure of the game
script.js - for JavaScript
style.css - css will make your game look nice

2.) Basic html

In index.html, put the basic tags of any webpage:

<!DOCTYPE>
<html>
	<head></head>
	<body></body>
</html>

Additionally, add script.js and style.css, with the <script< and <link< tags respectively, to load the files into the page. Put the link tag in the head tag and the javascript at the very bottom of the page.

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

3.) Cookie Button

The most basic element the game needs is the main cookie button. Find a picture of your favorite type of cookie online, and copy the image url. Insert the image in the body tags. To easily keep track of this cookie in javascript, add an id to the image.

<img src="cookie.png" id="cookie">

4.) Clicking the Cookie

Something should happen each time the cookie is clicked. Create a variable in javascript to keep track of how many times the cookie has been clicked.

var cookieCount = 0;

The corresponding javascript event for a click is onclick. To specify what happens onclick for a specific element, in this case, the cookie, use the document.getElementById() function to get the cookie and store it in a variable.

var cookie = document.getElementByGetElementById("cookie");

What happens on the onclick event is a property of the cookie element, and is a function. The function is called every time the onclick event fires, which is every time the cookie is clicked. You can read more about the onclick event here.

cookie.onclick = function() {

}

What should happen every time the cookie is clicked? The variable clicks that was defined earlier should be increased by one. For testing purposes, also alert the variable to make sure the code is working.

cookie.onclick = function() {
	cookieCount++;
	alert(cookieCount);
}

At this point, make sure you understand everything done so far.

5.) Displaying counts

Create an element in index.html to display how many cookies the player currently has.

<p>
    <span id="count">0</span> cookies
</p>

The text inside an html element is also a property of an html element in javascript. Again, first get the element with document.getElementById() and store it in a variable.

var countElement = document.getElementById("count");
    cookie.onclick = function() {
	cookieCount++;
}


    	The property is called innerHTML. Set the property to the value of the count variable every time the cookie is clicked.

cookie.onclick = function() {
	cookieCount++;
	countElement.innerHTML = cookieCount;
}

Be sure to test your code!

6.) Cookies per second

In Cookie Clicker, items can be bought to passively gain cookies per second. The first type of item that can be bought is a cursor. Add some markup for this functionality:

<div class="item" id="cursor">
	Cursors: <span id="cursorCount">0</span><br>
	Cursor Cost: <span id="cursorCost">10</span><br>
	<input type="button" id="buyCursorBtn" value="Buy Cursor">
</div>

Store the values of cookies per second (cps), cursorCount, and cursorCost in variables:

var cps = 0;
var cursorCount = 0;
var cursorCost = 0;

Just like adding an onclick function to the cookie, add an onclick function to the button to buy a cursor:

document.getElementById("buyCursorBtn").onclick = function() {
	
}

When the button is clicked, the cost of the cursor, which is 10 cookies, should be subtracted from the total cookies, and cursorCount should be increased by one. Additionally, cookies per second should increase.

document.getElementById("buyCursorBtn").onclick = function() {
	if (cookieCount >= cursorCost) {
		cookieCount -= cursorCost;
		cursorCount++;
		cps++;
	}
}

To passively add cookies per second to the total cookie count, use the setInterval() function. This function takes two arguments, the first one being a function, and the second being time in milliseconds of how often the function should run. In this case, every second, which is 1000 milliseconds, the value of cps should be added to cookieCount. Write this code outside of the onclick function, because cookies should be added continuously and not just onclick.

setInterval(function() {
	cookieCount += cps;
},1000);

So far, all of the variables are being updated in javascript, but the values on the html page have not been updated. Update the values displayed in the html elements by setting the innerHTML property.

cursorCountElement = document.getElementById("cursorCount");
setInterval(function() {
	cookieCount += cps;
	countElement.innerHTML = cookieCount;
},1000);
document.getElementById("buyCursorBtn").onclick = function() {
	cookieCount -= cursorCost;
	countElement.innerHTML = cookieCount;
	cursorCount++;
	cursorCountElement.innerHTML = cursorCount;
	cps++;
}

Test your code and make sure you understand everything.

7.) CSS

So far, the game has been looking incredibly plain, for the exception of the picture of a delicious cookie. Add css to style.css to make everything look more legit, and add html if you need to.