Skip to content

Instantly share code, notes, and snippets.

@Ratstail91

Ratstail91/main.js

Last active July 4, 2019 12:03
Show Gist options
  • Save Ratstail91/694bda017b5bdbfe9c6ae3c8414c2243 to your computer and use it in GitHub Desktop.
Save Ratstail91/694bda017b5bdbfe9c6ae3c8414c2243 to your computer and use it in GitHub Desktop.
Download ZIP
A simple clicker game example written for a friend.
Raw
main.js
//constants
var SAVE_NAME = 'cookieCount.foodfare';
//the gameplay variables
var cookies = 0;
var cursors = 0;
var upgrades = 0;
//the display variables
var cookieNode = document.getElementById('cookies');
var cursorNode = document.getElementById('cursors');
var cursorCostNode = document.getElementById('cursorCost');
var upgradeNode = document.getElementById('upgrades');
var upgradeCostNode = document.getElementById('upgradeCost');
var showCookiesNodes = document.getElementsByClassName('showCookies');
function updateDisplay() {
cookieNode.innerHTML = DOMPurify.sanitize(cookies.toString());
cursorNode.innerHTML = DOMPurify.sanitize(cursors.toString());
cursorCostNode.innerHTML = DOMPurify.sanitize(calcCursorCost(cursors.toString()));
upgradeNode.innerHTML = DOMPurify.sanitize(upgrades.toString());
upgradeCostNode.innerHTML = DOMPurify.sanitize(calcUpgradeCost(upgrades.toString()));
//only show "showCookies" if you have cookies
if (cookies > 0) {
for (var i = 0; i < showCookiesNodes.length; i++) {
showCookiesNodes[i].style.display = 'initial';
}
}
}
function openTab(evt, tabname) {
//zero the contents
var tabcontents = document.getElementsByClassName('tabcontent');
for (var i = 0; i < tabcontents.length; i++) {
tabcontents[i].style.display = 'none';
}
//zero the buttons
var tablinks = document.getElementsByClassName('tablink');
for (var i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(' active', '');
}
//activate
document.getElementById(tabname).style.display = 'block';
evt.currentTarget.className += ' active';
}
function cookieClick(clicks) {
cookies += clicks;
updateDisplay();
}
function buyCursors(count) {
//buy this many cursors
for (var i = 0; i < count; i++) {
var cursorCost = calcCursorCost(cursors);
if (cursorCost <= cookies) {
cursors++;
cookies -= cursorCost;
} else {
break;
}
}
updateDisplay();
}
function buyUpgrades(count) {
for (var i = 0; i < count; i++) {
var upgradeCost = calcUpgradeCost(upgrades);
if (upgradeCost <= cookies) {
upgrades++;
cookies -= upgradeCost;
} else {
break;
}
}
updateDisplay();
}
function calcCursorCost(cursorCount) {
return Math.floor(10 * Math.pow(1.1,cursorCount));
}
function calcUpgradeCost(upgradeCount) {
return Math.floor(100 * Math.pow(2,upgradeCount));
}
function save() {
try {
localStorage.setItem(SAVE_NAME, JSON.stringify( {cookies: cookies, cursors: cursors, upgrades: upgrades} ));
alert('Food Fare Saved!'); //could also use text in the page
} catch(e) {
console.error('Save Error:', e);
}
}
function load() {
try {
var obj = localStorage.getItem(SAVE_NAME);
obj = obj ? JSON.parse(obj) : {cookies: 0, cursors: 0, upgrades: 0}; //if localStorage returned empty, load a zero'd save
cookies = obj.cookies;
cursors = obj.cursors;
upgrades = obj.upgrades;
alert('Food Fare Loaded!'); //could also use text in the page
updateDisplay();
} catch(e) {
console.error('Load Error:', e);
}
}
function reset() {
cookies = 0;
cursors = 0;
upgrades = 0;
updateDisplay();
}
function deleteSave() {
var response = confirm('Are you sure you want to delete your save?');
if (response) {
reset();
localStorage.removeItem(SAVE_NAME);
}
}
function toggleOptions(){
var optionsNode = document.getElementById('optionsWindow');
if (optionsNode.style.display != 'block'){
optionsNode.style.display = 'block';
} else {
optionsNode.style.display = 'none';
}
}
//run the cursors
setInterval(function() {
cookieClick(cursors * (1 + upgrades));
}, 1000);
/*
var messageNode = document.getElementById('message');
var messageTimeoutId;
function setMessage(msg, ms = 2000) {
messageNode.innerHTML = DOMPurify.sanitize(msg.toString());
clearTimeout(messageTimeoutId);
messageTimeoutId = setTimeout(clearMessage, ms);
}
function clearMessage() {
messageNode.innerHTML = DOMPurify.sanitize("");
}*/
Raw
page.html
<html>
<head>
<title>Food Fare</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Food Fare</h1>
<button onclick="toggleOptions()">Options</button>
<div id='optionsWindow' style="display:none">
<p><strong>Food Fare</strong> by Lxgian</p>
<p>version 0.01</p>
<div>
<p>Added options menu and this changelog</p>
<p>Save/Load/Reset function working</p>
<p>Added title: Food Fare</p>
</div>
<button onclick="save()">Save</button>
<button onclick="load()">Load</button>
<button onclick="reset()">Reset</button>
<button onclick="deleteSave()">Delete Save</button>
</div>
<!-- tab links -->
<div class="tab">
<button class="tablink" onclick="openTab(event, 'cookietab')" id="defaultOpen">Cookies</button>
<button class="tablink showCookies" onclick="openTab(event, 'cursortab')">Cursors</button>
<button class="tablink showCookies" onclick="openTab(event, 'upgradetab')">Upgrades</button>
</div>
<div id="cookietab" class="tabcontent">
<p><button onclick="cookieClick(1)">Click Me!</button></p>
<p>Cookies: <span id="cookies">0</span></p>
</div>
<div id="cursortab" class="tabcontent">
<p><button onclick="buyCursors(1)">Buy Cursor</button></p>
<p>Cursors: <span id="cursors">0</span></p>
<p>Cursor Cost: <span id="cursorCost">10</span></p>
</div>
<div id="upgradetab" class="tabcontent">
<p><button onClick="buyUpgrades(1)">Buy Cursor Upgrade</button></p>
<p>Cursor Upgrades: <span id="upgrades">0</span></p>
<p>Cursor Upgrade Cost: <span id="upgradeCost">100</span></p>
</div>
<script type="text/javascript" src="https://combinatronics.com/cure53/DOMPurify/master/dist/purify.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript">
document.getElementById('defaultOpen').click();
</script>
</body>
</html>
Raw
style.css
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
/* custom showing */
.showCookies {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment