samedi 21 février 2015

Cookie Clicker Saving Mechanic


I have recently finished the JavaScript and HTML tutorials on CodeCademy. To try and further improve my knowledge of both languages, I started to make my own version of "Cookie Clicker" and am stumped. I need a way to save game data when a player leaves the browser. I have seen many ways as to how to go about this, but despite my best efforts, I cannot find out how to use the localSave(); command to save and load my game data. Any suggestions and explanations on how to go about doing this would be appreciated. I intend to try and make more games in the future as I found remaking the basics of Cookie Clicker to be quite fun, so understand how to use localSave will be quite important to me.





<!DOCTYPE html>
<html>
<head>
<title>Cookie Clicker</title>
<link type="stylesheet/css" rel="stylesheet" href="style.css"/>
<script language="javascript">
</script>
</head>
<body>

<h1>Cookie Clickers By: Michael</h1>
<h3>Original Idea By: Orteil</h3>
<br>
<br>
<h1 id="CookieAmount"></h1>
<h2 id="CookiePerSecond"></h2>
<div id="cookie" style="cursor:pointer" onclick="cookieClicked();"><img src="http://ift.tt/1z28JDN"></div>
<!--Tells player how much upgrade Costs-->
<button onclick="getAutoClicker();">Purchase Auto Clicker for <span id="AutoClickCookieCost"></span></button>
<button onclick="getGrandma();">Purchase Grandma for <span id="GrandmaCookieCost"></span></button>
<button onclick="getFarm();">Purchase Farm for <span id="FarmCookieCost"></span></button>
<button onclick="getFactory();">Purchase Factory for <span id="FactoryCookieCost"></span></button>
<button onclick="getMine();">Purchase Mine for <span id="MineCookieCost"></span></button>

<div>
<script language="javascript">
//variables:
var cookieClicks = 0;
var clickValue = 1

var AutoClickers = 0;
var AutoClickerCost = 50;

var Grandmas = 0;
var GrandmaCost= 500;

var Farms = 0;
var FarmCost = 2500

var Factories = 0;
var FactoryCost = 5000;

var Mines = 0;
var MineCost = 10000;
//Processes cookie click and adds it to total.
function cookieClicked() {
cookieClicks++;
}
//Purchases Auto Clicker for Player and removes Cookies.
function getAutoClicker(){
if(cookieClicks >= AutoClickerCost){
AutoClickers++;
cookieClicks -= AutoClickerCost;
AutoClickerCost += Math.floor(AutoClickerCost*.3);
}else{
alert("Oh No! It appears you do not have enough cookies to purchase an Auto Clicker. An Auto Clicker currently costs "+AutoClickerCost+" which is "+(AutoClickerCost-cookieClicks)+" more cookies than you have.")
}
}
//Purchase Grandma and remove Cookie Cost.
function getGrandma(){
if(cookieClicks >= GrandmaCost){
Grandmas++;
cookieClicks -= GrandmaCost;
GrandmaCost += Math.floor(GrandmaCost*.3);
}else{
alert("Oh No! It appears you do not have enough cookies to purchase a Grandma. A Grandma currently costs "+GrandmaCost+" which is "+(GrandmaCost-cookieClicks)+" more cookies than you have.")
}
}
//Purchase Farm and remove Cookie Cost.
function getFarm(){
if(cookieClicks >= FarmCost){
Farms++;
cookieClicks -= FarmCost;
FarmCost += Math.floor(FarmCost*.3);
}else{
alert("Oh No! It appears you do not have enough cookies to purchase a Farm. A Farm currently costs "+FarmCost+" which is "+(FarmCost-cookieClicks)+" more cookies than you have.")
}
}
//Purchase Factory and remove Cookie Cost.
function getFactory(){
if(cookieClicks >= FactoryCost){
Factories++;
cookieClicks -= FactoryCost;
FactoryCost += Math.floor(FactoryCost*.3);
}else{
alert("Oh No! It appears you do not have enough cookies to purchase a Factory. A Factory currently costs "+FactoryCost+" which is "+(FactoryCost-cookieClicks)+" more cookies than you have.")
}
}
//Purchase Mine and remove COokie Cost.
function getMine(){
if(cookieClicks >= MineCost){
Mines++;
cookieClicks -= MineCost;
MineCost += Math.floor(MineCost*.3)
}else{
alert("Oh No! It appears you do not have enough cookies to purchase a Mine. A Mine currently costs "+MineCost+" which is "+(MineCost-cookieClicks)+" more cookies than you have.")
}
}
//Main Game loop updating Cookie Totals from AUTOCLICKER ONLY!
var AutoClickTimer = setInterval(function () {AutoClickCookie()}, 2000);
function AutoClickCookie(){
cookieClicks += AutoClickers;
}
//Main Game loop update Cookie Totals from ALL OTHER STRUCUTERS.
var AllStructureTimer = setInterval(function(){StructureCookie},1000)
function StructureCookie(){
cookieClicks += (Grandmas*5);
cookieClicks += (Farms*20);
cookieClicks += (Factories*60);
cookieClicks += (Mines*100);
}
//Side Loop updating button costs and CPS
var CookieClickTimer = setInterval(function() {updateCookie()}, 100);
function updateCookie(){
//Calculate CPS
var CPS = (AutoClickers*.5)+(Grandmas*5)+(Farms*20)+(Factories*60)+(Mines*100);
document.getElementById("CookieAmount").innerHTML = cookieClicks+" cookies.";
document.getElementById("CookiePerSecond").innerHTML = CPS+" CPS.";
document.getElementById("AutoClickCookieCost").innerHTML = AutoClickerCost;
document.getElementById("GrandmaCookieCost").innerHTML = GrandmaCost;
document.getElementById("FarmCookieCost").innerHTML = FarmCost;
document.getElementById("FactoryCookieCost").innerHTML = FactoryCost;
document.getElementById("MineCookieCost").innerHTML = MineCost;
}
//unfinished loop I will use in future (ignore it)
var CookieClickValueTimer = setInterval(function(){updateCookieValue()},100);

</script>
</div>
</body>
</html>



I apologize if any of the code is hard to follow. I am new to this, so everything could definitely be done a lot better.


EDIT Here is one of my attempts at using localStorage to save. Unfortunately, it does not work. If someone could explain why this does not work or what I could do to fix it, I'd appreciate it.





if(localStorage.cookieClicks === null || " "){
//If no variables are defined, the variables are defined and given a default value.
var cookieClicks = 0;
var clickValue = 1

var AutoClickers = 0;
var AutoClickerCost = 50;

var Grandmas = 0;
var GrandmaCost = 500;

var Farms = 0;
var FarmCost = 2500

var Factories = 0;
var FactoryCost = 5000;

var Mines = 0;
var MineCost = 10000;
confirm("New Variables Created");
} else if(localStorage.cookieClicks >= 0){
var cookieClicks = localStorage.cookieClicks;
var clickValue = localStorage.clickValue;

var AutoClickers = localStorage.AutoClickers;
var AutoClickerCost = localStorage.AutoClickerCost;

var Grandmas = localStorage.Grandmas;
var GrandmaCost = localStorage.GrandmaCost;

var Farms = localStorage.Farms;
var FarmCost = localStorage.FarmCost;

var Factories = localStorage.Factories;
var FactoryCost = localStorage.FactoryCost;

var Mines = localStorage.Mines;
var MineCost = localStorage.MineCost;
confirm("Old Progress loaded!");
}else
alert("Something is broken!")
}

//-----------------------------------------------------------------------------------------------------------
//The two main save/loading scripts
var saveGameLoop = setInterval(function(){saveGame()}, 100);
function saveGame(){
localStorage.cookieClicks = cookieClicks;
localStorage.clickValue = clickValue;

localStorage.AutoClickers = AutoClickers;
localStorage.AutoClickerCost = AutoClickerCost;

localStorage.Grandmas = Grandmas;
localStorage.GrandmaCost = GrandmaCost;

localStorage.Farms = Farms;
localStorage.FarmCost = FarmCost;

localStorage.Factories = Factories;
localStorage.FactoryCost = FactoryCost;

localStorage.Mines = Mines;
localStorage.MineCost = MineCost;



Thank you, Michael





Aucun commentaire:

Enregistrer un commentaire