Skip to content

Instantly share code, notes, and snippets.

@Richienb

Richienb/cookie-clicker.markdown

Created March 27, 2018 01:18
Show Gist options
  • Save Richienb/ccb3308b9768d5e402802f02b3e80d8d to your computer and use it in GitHub Desktop.
Save Richienb/ccb3308b9768d5e402802f02b3e80d8d to your computer and use it in GitHub Desktop.
Download ZIP
Cookie Clicker
Raw
index.html
<html>
<body>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--1-col">
<div id="cookie">
<div id="chip"></div>
<div id="chip2"></div>
<div id="chip3"></div>
<div id="chip4"></div>
</div>
</div>
<div class="mdl-cell mdl-cell--1-col">
<div id="space"></div>
</div>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--3-col">
<!-- Textfield with Floating Label -->
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" name="message" id="sample3">
<label class="mdl-textfield__label" for="sample3">Your Bakery Name</label>
</div>
</form>
</div>
<div class="mdl-cell mdl-cell--1-col">
<!-- Colored mini FAB button -->
<button id="sub" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button">
<i class="material-icons">send</i>
</button></div>
</div>
<table class="mdl-data-table mdl-js-data-table mdl-data-table mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Name</th>
<th>Cookies/Press</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Granny</td>
<td>×2 More</td>
<td>30 Cookies</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Factory</td>
<td>×10 More</td>
<td>500 Cookies</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plant</td>
<td>×30 More</td>
<td>1000 Cookies</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Time Machine</td>
<td>1000× More</td>
<td>100000 Cookies</td>
</tr>
</tbody>
</table>
<p>Intructions: Click the cookie, to create more cookies. You upgrade automatically when you have a specifc amount of cookies (see upgrade table)</p>
<div id="numbers"></div>
<!-- <svg width = "400" height="900">
<line x1 ="100" y1 = "200" x2 = "400" y2 = "300" stroke= "red"/>
</svg>-->
</body>
</html>
Raw
script.js
var num = 0;
$(document).ready(function(){
$("#sub").click(function(){
var name = $("input[name=message]").val();
$("#space").append("<h1>"+name+"'s bakery</h1>")
})
$("#cookie").on('click',function(){
num+=1;
$('#numbers').append("<p class = nm> " + num + " <p>");
if(num >= 10 ){
num += 2;
}
if(num >= 500) {
num += 4;
}
if(num >= 3000) {
num += 10;
}
if(num >= 10000) {
num += 40;
}
if(num >= 40000) {
num += 100;
}
if(num >= 200000) {
num += 400;
}
});
$("#cookie").draggable();
$("#cookie").mouseenter(function(){
$("#cookie").animate({
width: '+= 5',
height: '+= 5'
});
});
//$("#cookie").mouseleave(function(){
/*$("#cookie").animate({
width: '-= 5',
height: '-= 5'
});*/
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
Raw
style.css
body {
font-family: "Noto Sans", sans-serif;
background-color: rgb(244, 244, 244);
color: rgb(33, 33, 33);
}
#cookie {
text-align: center;
background-color: rgb(115, 63, 0);
height: 100px;
width: 100px;
border-radius: 100%;
}
#chip {
position: absolute;
top: 20px;
margin: 50px;
padding: 0px;
background-color: rgb(61, 61, 61);
height: 8px;
width: 8px;
border-radius: 100%;
}
#chip2 {
position: absolute;
top: 40px;
left: -16px;
margin: 50px;
padding: 0px;
background-color: rgb(61, 61, 61);
height: 8px;
width: 8px;
border-radius: 100%;
}
#chip3 {
position: absolute;
top: 2px;
left: -22px;
margin: 50px;
padding: 0px;
background-color: rgb(61, 61, 61);
height: 8px;
width: 8px;
border-radius: 100%;
}
#chip4 {
position: absolute;
top: -17px;
left: 23px;
margin: 50px;
padding: 0px;
background-color: rgb(61, 61, 61);
height: 8px;
width: 8px;
border-radius: 100%;
border-radius: 100%;
}
p {
color: rgb(33, 33, 33);
z-index: 1;
display: inline-block;
margin: 5px;
}
#space {
text-align: center;
border: 3px solid;
border-radius: 3px;
position: absolute;
left: 122px;
top: 20px;
background-color: rgb(238,238,238);
width: 389px;
height: 78px;
}
table {
border: 1px solid;
}
td {
border: 1px solid;
}
Raw
styles
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment