farmer idle game

farmer-idle-game.markdown

farmer idle game

A Pen by gilad on CodePen.

License.

index.html

<div class="upbar-container"><div class="upbar" id=levelbar></div></div>
<br>
<div id="sun"></div>
<center><div id="season"></div></center>

<div id="navbar">
  <ul>
    <li><a href="#unlockTab">Unlockables</a></li>
    <li><a href="#upgradesTab">Upgrades</a></li>
    <li><a href="#settingsTab">Settings</a></li>
    <li><a href="#creditsTab">Credits</a></li>
  </ul>
</div>
<br><br><br>
<div id="contents">
  <menu id=unlockTab></menu>
  <menu id="upgradesTab">
    <code>To quick buy click the button and hold enter.</code><br>
  
    <button id=moreSpaceBtn onclick="buyMoreSpace();"></button>
    <button id=growthSpeedBtn onclick="buyMoreGrowthSpeed();"></button>
    
    <button onclick="buyFill();" id=buyFillBtn>Unlock "fill all" button<br>£1 Million</button>
  </menu>
  <menu id="settingsTab">
    <label for="numberPopUps">Number pop ups</label>
    <input type="checkbox" id=numberPopUps><br>
    <select id=fps>
      <optgroup label="Choose FPS:" id=fpsOption></optgroup>
    </select>
    <p onclick="save();">Save</p>
    <p onclick="load();">Load</p>
  </menu>
  <menu id="creditsTab">
    <ul>
      <u>Credits to:</u>
      <li>Richfest</li>
    </ul>
  </menu>
</div>

<button onclick="fillAll();" disabled id=fillAllBtn>Fill all</button><br>
<div id="money"></div>
<div id="mps"></div>
<select id="plant" style="width: 200px;"></select>
<div id="info"></div>
<div id=log></div>
<div id=map></div>



<div class="ach">
  <div class="icon"><i class="fa fa-bolt" aria-hidden="true"></i></div>
  <div class="text_wrap">
    <div class="title"></div>
    <span class="detail"></span>
  </div>
</div>

script.js

/*

ACHIEVEMENTS

LEVEL SYSTEM

Seasons are special events !?

prestige

I have a suggestion how about having the seasons a little longer. Winter will be a killer at the start but you could add a greenhouse upgrade later in the game. Which allows you to grow in winter faster. This could lead to other unlocks similar. Maybe having certains things only grow in certain areas. Allows the user to feel like you're actually building a farm in the game instead of just getting slightly bigger area to grow. Animals could be Added which generate something all year round but need to be collected now and again. Workers could be added to do certain tasks such as speed processes up or increase profit.

I feel like every 3 minutes would be better, and transitions between them would also be a great future idea so they don't change instantly, but slowly change.
Possibly adding months. Ex. Jan. 0.25x, Feb, 0.33x, March 0.66x, April 1x, May 1.33x, June 1.5x, July 2x, August 2x, September 1.5x, October 1x, November, 0.66x, December 0.33x
Each month takes 1 minute to change.


Eh, I don't know if I like that idea. I feel like then it will end up being wayyy too much management.
Also some more feedback, it gets really repetitive really quick smashing all the buttons back and forth. I feel like every plant should take longer to grow in general, but give more profit, just so you don't have to break your wrist flicking around trying to plant everything fast until you get to $1 million for the fill all.
And I also feel like you can get new plants way too fast. Herbs costed $50 I think to buy and then grass only costed $150 so there's not much of a gap between plants. I feel like there should be a 5x-10x gap between each plants, so grass should cost $250-$500, then the next should cost $2,500-$5,000, etc.

making the boxes wrap every 25 is a little hacky. just make a div in the space before the upgrades tab and make the boxes wrap within that div. playing in the smaller box made my more boxes upgrades go under the upgrades tab.

Unlocked plants gets repurchaseable after refreshing and loading.

Could you make it support touch events, so I can just slide my finger over the squares to plant?
Cool game btw! nice job for a beginner

The game doesn't save. I lost all my progress twice now :o (sometimes it saves half the game, like the slots and stuff but not what you purchased, like my fill all button is gone now)
Fill All did let me choose what to fill the slots with to begin with, but now it just fills it with the most expensive thing to spend all money :o why can't I choose anymore?
Really buggy

Gave it a go. Am giving it another go.
Once I unlocked corn and was planting that, I couldn't change to anything else that I'd unlocked, up or down the chain.
Reloaded the page to see if that might help to find my save hadn't. It's fine, I'm going through it again :)

(income - cost) / growth_speed
If you fix the "profit is actually income" bug then you can just go "profit / growth_speed".
I thought to inject the formula myself, but couldn't be arsed converting "thousands" to "* 1000" so I used the excel to find out when to upgrade to the next plant.
Could you add an option to use normal number "11170000" instead of "11.17 million"? Also, if you add more plants a scientific numbers might be helpful too.

Jasmine costs £NaN
Now the plants gets loaded properly when loading (don't have to rebuy them), but "Fill all" seems to have the same problem now.

Is there anything after cabbage? I got 100m and the only thing I could buy was faster growing.
The game stops doing anything when you don't have it open in a browser window. It would be much better as an idle game if it continued to run.
There doesn't seem to be much point in efficiency upgrades after you graduate to the next big thing. Maybe consider having higher-up efficiency upgrades give bonuses of a cost and effectiveness to make each plant relevant again later.
If cabbages are the last, I want more plants. :)

Nice job. Issue I found though, grow progress stops if the window isn't the active window, but time continues passing.
So I plant corn right when Summer starts, switch to another tab, and come back to 20% finished corn in Winter.

I completely agree with /u/Val3ry. I have all the plants unlocked, and Jasmine grows in the winter.
I wanted to plant all cabbages because it was spring time though, but selecting cabbages and hitting "Fill-all" gave me all Jasmine plants.
Edit: Also I think having a "Net gain" metric is more valuable to the player than a profit metric. I don't care what the sale value is if I spent money on planting it. I care about how much money I'll gain after 20 seconds of growing the plant

As for farmers in the future, you could make it so you specify a thing to plant during each season, and the farmers automatically do it. You could either do each farmer planting a seed on a box every 5 seconds or so, or you upgrade one farmer to plant a seed on a box once every so often and you eventually increase his planting rate.

Alright, since every plant now has a season it's best in I don't think you should call it idle. If we need to try to manage it to keep it moving, more so with this added, then it is not idle. before it looked like it could become idle, but with seasons put in it doesn't appear so.
Also it doesn't seem to stop it compeltely, but I can't tell how much it slows it down. Jasmine says 100 seconds grow time at my speed, but even in Winter it doesn't go 1% per second which I expected. It seems to take 3 second per percent. Is the 1/3 time in Winter still active?
Also add a bar countdown so we can tell when the season's going to change. no point trying to plant something because it's the season only to have season change on you two seconds later.
EDIT: Also let us chose which crops we plant with fill all instead of automatically going to the last one

Could you add a counter that says how many slots we have? So we don't have to count how much money we need for a full harvest and we can just throw the number into a calculator?

Love this game, maybe just hapy the upgrade efficiency show for the plant you have selected? These take up so much space. Love it otherwise!

*/

var i = 0;

for (i = 0; i < 1; i++){
  var element = '<div class=tile id=cell'+i+' onclick=plant(this);></div>';
  $('#map').append(element);
}

var keys = [];

$(document).keydown(function(e) {
  keys[e.keyCode] = true;
});

$(document).keyup(function(e) {
  delete keys[e.keyCode];
});

var FPS = 30;

var money = 0;

var moreSpacePrice = 0.1;
var growthSpeedPrice = 1;

var currentSeason = 0;
var seasons = ["Spring","Summer","Autumn","Winter"];

var growthSpeed = 1;

var holdingMouse = false;

var xp = 0;
var xpN = 1;
var level = 1;

$(document).mousedown(function(){
  holdingMouse = true;
})
$(document).mouseup(function(){
  holdingMouse = false;
})


var wheat = {
  timeToGrow: 2,
  profit: 0.01,
  cost: 0,
  unlocked: true,
  efficiency: 1,
  effPrice: 0.02,
  efficiencyMax: 10,
  unlockPrice: 0,
  growsIn: "summer",
}
var flower = {
  timeToGrow: 10,
  profit: 1.05,
  cost: 1,
  unlocked: false,
  efficiency: 1,
  effPrice: 3,
  efficiencyMax: 10,
  unlockPrice: 5,
  growsIn: "spring",
}
var herb = {
  timeToGrow: 20,
  profit: 26.25,
  cost: 25,
  unlocked: false,
  efficiency: 1,
  effPrice: 30,
  efficiencyMax: 10,
  unlockPrice: 40,
  growsIn: "summer",
}
var grass = {
  timeToGrow: 40,
  profit: 120*1.05,
  cost: 120,
  unlocked: false,
  efficiency: 1,
  effPrice: 130,
  efficiencyMax: 10,
  unlockPrice: 150,
  growsIn: "summer",
}
var sunflower = {
  timeToGrow: 70,
  profit: 480*1.05,
  cost: 480,
  unlocked: false,
  efficiency: 1,
  effPrice: 500,
  efficiencyMax: 10,
  unlockPrice: 550,
  growsIn: "summer",
}

var algae = {
  timeToGrow: 120,
  profit: 2000*1.05,
  cost: 2000,
  unlocked: false,
  efficiency: 1,
  effPrice: 2050,
  efficiencyMax: 25,
  unlockPrice: 2500,
  growsIn: "autumn",
}

var corn = {
  timeToGrow: 200,
  profit: 8000*1.05,
  cost: 8000,
  unlocked: false,
  efficiency: 1,
  effPrice: 8200,
  efficiencyMax: 25,
  unlockPrice: 10000,
  growsIn: "summer",
}

var cabbage = {
  timeToGrow: 300,
  profit: 32000*1.05,
  cost: 32000,
  unlocked: false,
  efficiency: 1,
  effPrice: 33000,
  efficiencyMax: 25,
  unlockPrice: 40000,
  growsIn: "spring",
}

var jasmine = {
  timeToGrow: 500,
  profit: 128000*1.05,
  cost: 128000,
  unlocked: false,
  efficiency: 1,
  effPrice: 130000,
  efficiencyMax: 25,
  unlockPrice: 145000,
  growsIn: "winter",
}

var plants = ["wheat","flower","herb","grass","sunflower","algae","corn","cabbage","jasmine"];

for (var i = 1; i <= 60; i++){
  if (i == 60){
    $('#fpsOption').append("<option value="+i+" selected>"+i+" FPS</option>");
    break;
  }
  $('#fpsOption').append("<option value="+i+">"+i+" FPS</option>");
}

for (var i = 0; i < plants.length; i++){
  var elem1 = '<button id='+plants[i]+'EffBtn onclick=upEff("'+plants[i]+'")>'+plants[i]+' profits</button>';
  var elem2 = '<div class="upbar-container"><div class="upbar" id='+plants[i]+'EffBar></div></div>';
  $('#upgradesTab').append(elem1,elem2);
  var price = window[plants[i]].cost;
  var elem3 = '<option value="'+plants[i]+'" id='+plants[i]+'>'+plants[i]+' £'+price+'</option>';
  $('#plant').append(elem3);
  var elem4 = '<button onclick=unlock("'+plants[i]+'"); id='+plants[i]+'UnlockBtn></button>';
  $('#unlockTab').append(elem4);
}

function plant(obj,type){
  var item = type;
  if (!type) var item = $('#plant').val();
  
  var profit = window[item].profit;
  var timeToGrow = window[item].timeToGrow;
  var efficiency = window[item].efficiency;
  
  if (money < window[item].cost) return;
  if (obj.innerHTML !== "") return;
  money -= window[item].cost;
  var time = $(obj).attr('data-time');
  if (time > 0) return;
  $(obj).attr('data-time',200);
  var id = obj.id;
  var price = window[item].cost;
  add ("<span style='color: red;'>"+"-£"+simplify(price)+"</span>","log",0,100);
  var element = "<div class=plant data-time="+timeToGrow+" data-timeMax="+timeToGrow+" data-profit="+profit+" data-type="+item+" data-efficiency="+efficiency+"></div>";
  $(obj).html(element);
}

function engine(){
  FPS = $('#fps').val();
  $('#season').html(seasons[currentSeason]);
  $('#money').html("Money: £"+simplify(money));
  $('#moreSpaceBtn').html("+1 plot ("+$('.tile').length+")<br>£"+simplify(moreSpacePrice));
  $('#growthSpeedBtn').html("Faster growth<br>£"+simplify(growthSpeedPrice));
  // spring
  if (currentSeason == 0){
    Math.random() < 0.5 ? add("|","log",0,$(window).width() - 100,true) : add(".","log",0,$(window).width() - 100,true);
  }
  // winter
  if (currentSeason == 3){
    if (Math.random() < 1){
      add("❄","log",0,$(window).width() - 100,true)
    }
  }
  
  $('#moreSpaceBtn').css({
    backgroundColor: "grey",
  })
  if (money >= moreSpacePrice){
    $("#moreSpaceBtn").css({
      backgroundColor: "#4CAF50",
    })
  }
  
  $('#growthSpeedBtn').css({
    backgroundColor: "grey",
  })
  if (money >= growthSpeedPrice){
    $("#growthSpeedBtn").css({
      backgroundColor: "#4CAF50",
    })
  }
  
  var length = $('.tile').length;
  
  var mps = 0;
  
  for (var i = 0; i < length; i++){
    $('#cell'+i).removeAttr("data-time");
    var element = $('#cell'+i).find(".plant");
    
    var time = parseFloat($(element).attr("data-time"));
    
    if (time <= 0) continue;
    var type = $(element).attr('data-type');
    
    if (type){
      var canGrowIn = window[type].growsIn;
      canGrowIn = canGrowIn.toLowerCase();
      
      var thisSeason = seasons[currentSeason].toLowerCase();
      if (canGrowIn == thisSeason){
        var newTime = parseFloat(time) - growthSpeed/FPS * 3;
      }
      else {
        var newTime = parseFloat(time) - growthSpeed/FPS;
      }
      var object = window[type];
      var profit = object.profit*object.efficiency - object.cost
      var speed = (object.timeToGrow/growthSpeed);
      mps += ((profit) / speed);
    }
    $('#mps').html(simplify(mps)+" / sec");
    // summer
    if (currentSeason == 1){
      $('#sun').css({
        opacity: 1,
      })
    }
    // winter
    if (currentSeason == 3){
      $('#sun').css({
        opacity: 0.5,
      })
    }
    
    
    
    $(element).attr('data-time',newTime);
    var maxTime = $(element).attr('data-timeMax');
    var perc = 100 - (newTime/maxTime)*100;
    
    var plantt = $(element).attr('data-type');
    plantt = String(plantt);
    
    plantt = "<span style='font-size: 10px;'>"+plantt+"</span>"
    
    $(element).html(plantt+"<br>"+Math.ceil(perc)+"%");
    
    var color = "rgb("+Math.floor(255 - (2.55*perc))+","+Math.round(2.55*perc)+",0)";
    if (perc > 99){
      $(element).remove();
      $(element).css({
        backgroundColor: "white",
      })
      var profit = $(element).attr('data-profit');
      var efficiency = $(element).attr('data-efficiency');
      
      add ("<span style='color: green;'>"+"+£"+simplify(profit*efficiency)+"</span>","log",0,100);
      
      money += parseFloat(profit) * parseFloat(efficiency);
      xp += parseFloat(profit*efficiency*10);
      continue;
    }
    $(element).css({
      backgroundColor: color,
      width: perc+"%",
    })
  }
  
  
  
  for (var s = 0; s < plants.length; s++){
    var p = window[plants[s]];
    $('#'+plants[s]).css("display","none");
    if (p.unlocked){
      $('#'+plants[s]).css("display","initial");
    }
    var info = plants[s]+" efficiency<br>£"+simplify(window[plants[s]].effPrice);
    
    $('#'+plants[s]+"EffBtn").html(info);
    $('#'+plants[s]+"UnlockBtn").html("Unlock "+plants[s]+"<br>£"+simplify(window[plants[s]].unlockPrice))
    if (p.unlocked){
      $('#'+plants[s]+"UnlockBtn").css({display: "none"})
    }
    var price = p.effPrice;
    $('#'+plants[s]+"EffBtn").css({backgroundColor: "grey"})
    if (money >= price){
      $('#'+plants[s]+"EffBtn").css({backgroundColor: "#4CAF50"})
    }
    $('#'+plants[s]+"UnlockBtn").css({
        backgroundColor: "grey",
      })
    if (money >= p.unlockPrice){
      $('#'+plants[s]+"UnlockBtn").css({
        backgroundColor: "#4CAF50",
      })
    }
    if (window[plants[s]].unlocked){
      $('#'+plants[s]+"EffBtn").show();
      $('#'+plants[s]+"EffBar").parent().show();
    } 
    if (window[plants[s]].unlocked == false){
      $('#'+plants[s]+"EffBtn").hide();
      $('#'+plants[s]+"EffBar").parent().hide();
    }
    
    if (window[plants[s]].unlocked){
      $('#'+plants[s + 1]+"UnlockBtn").show();
    }
    else {
      $('#'+plants[s + 1]+"UnlockBtn").hide();
    }
    
    if (money >= p.cost){
      $('#'+plants[s]).css({backgroundColor: "#4CAF50"})
    } else {
      $('#'+plants[s]).css({backgroundColor: "grey"})
    }
    
    
  }
  
  if (money >= 1e6){
    $('#buyFillBtn').css({backgroundColor: "#4CAF50"})
  }
  if (money < 1e6){
    $('#buyFillBtn').css({backgroundColor: "grey"})
  }
  
  var selected = $('#plant').val();
  var object = window[selected];
  info = "<ul>";
  info += "<li>Profit: £"+simplify(object.profit*object.efficiency - object.cost)+"</li><li>Cost: £"+simplify(object.cost)+"</li><li>Growth speed: "+Math.floor(object.timeToGrow/growthSpeed*100)/100+"s<li>Grows in: "+object.growsIn+"</li>";
  document.getElementById("info").innerHTML = info+"</ul>";
  
  var perc = xp/xpN * 100;
  
  $('#levelbar').css({
    width: perc+"%",
  })
  $('#levelbar').html(simplify(xp)+"/"+simplify(xpN)+" Level "+level)
  
  if (xp >= xpN){
    level++;
    xp -= xpN;
    xpN *= Math.PI;
  }
  
  setTimeout(engine,1000/FPS);
}
engine();

function roundTo(number,dp){
  if (!dp) dp = 2;
  dp = Math.pow(10,dp);
  return Math.floor((number*dp))/dp;
}


function buyMoreSpace(){
  i = $('.tile').length;
  var element = '<div class=tile id=cell'+i+' onclick=plant(this);></div>';
  if (money >= moreSpacePrice){
    money -= moreSpacePrice;
    add ("<span style='color: red;'>"+"-£"+simplify(moreSpacePrice)+"</span>","log",0,100);
    moreSpacePrice *= 1.35;
    $('#map').append(element);
  }
}

function buyMoreGrowthSpeed(){
  if (money >= growthSpeedPrice){
    money -= growthSpeedPrice;
    add ("<span style='color: red;'>"+"-£"+simplify(growthSpeedPrice)+"</span>","log",0,100);
    growthSpeedPrice *= 10;
    growthSpeed += 0.5;
  }
}



function simplify(number) {
  var show = number;
  
  var numberNames = ["","thousand","million","billion","trillion","quadrillion","quintillion","sextillion","septillion","octillion","nonillion","decillion","undecillion","duodecillion","tredecillion","quattuordecillion","quindecillion","sexdecillion","septendecillion","octodecillion","novemdecillion","vigintillion","unvigintillion","duovigintillion","tresvigintillion","quattuorvigintillion","quinvigintillion","sesvigintillion","septemvigintillion","Octovigintillion","Novemvigintillion","Trigintillion","Untrigintillion","Duotrigintillion","Trestrigintillion","Quattuortrigintillion","Quintrigintillion","Sestrigintillion","Septentrigintillion","Octotrigintillion","Noventrigintillion","Quadragintillion","Unquadragintillion","Duoquadragintillion","Tresquadragintillion","Quattuorquadragintillion","Quindragintillion","Sesquadragintillion","Septenquadragintillion","Octoquadragintillion","Novenquadragintillion","Quinquagintillion","Unquinquagintillion","Duoquinquagintillion","Tresquinquagintillion","Quattuorquinquagintillion","Quinquinquagintillion","Sesquinquagintillion","Septenquinquagintillion","Octoquinquagintillion","Novenquinquagintillion","Sexagintillion","Unsexagintillion","Duosexagintillion","Tresexagintillion","Quattuorsexagintillion","Quinsexagintillion","Sesexagintillion","Septensexagintillion","Octosexagintillion","Novensexagintillion","Septuagintillion","Unseptuagintillion","Duoseptuagintillion","Treseptuagintillion","Quattuorseptuagintillion","Quinseptuagintillion","Seseptuagintillion","Septenseptuagintillion","Octoseptuagintillion","Novenseptuagintillion","Octogintillion","Unoctogintillion","Duooctogintillion","Tresoctogintillion","Quattuoroctogintillion","Quinoctogintillion","Sexoctogintillion","Septemoctogintillion","Octooctogintillion","Novemoctogintillion","Nonagintillion","Unnonagintillion","Duononagintillion","Trenonagintillion","Quattuornonagintillion","Quinnonagintillion","Sexnonagintillion","Septenonagintillion","Octononagintillion","Novenonagintillion","Centillion","Uncentillion","Duocentillion","Trescentillion"]
  
  for (var g = 1; g < numberNames.length; g++){
    if (number >= Math.pow(10,g*3) && number < Math.pow(10,(g*3)+3)){
      return Math.floor(show / Math.pow(10,(g*3)-2)) / 100 +" "+numberNames[g];
      break;
    }
    if (g == numberNames.length - 1) {
      return Math.floor(show * 100) / 100;
    }
  }
}

setInterval(function(){
  $('.animation').each(function(){
    $(this).animate({
      top: $(window).height() - 50,
      opacity: 0.2,
    },1000,"easeOutBounce",function(){
      $(this).remove();
    })
  });
  
},100);

function add(value,id,min,max,enabled){
  var popups = document.getElementById("numberPopUps").checked;
  if (!popups && !enabled) return;
  var rand = Math.floor((Math.random()*max)+min);
  var element = '<div class=animation style="left: RANDpx; top: -20px;">'+value+'</div>';
  element = element.replace(/RAND/gi,rand);
  $("#"+id).append(element);
}

// $('select').selectmenu();

function fillAll(){
  var tileLength = $('.tile').length;
  var reversed = [];
  for (var l = 0; l < plants.length; l++){
    reversed[l] = plants[plants.length - 1 - l]
  }
  
  for (var f = 0; f < tileLength; f++){
    for (var g = 0; g < plants.length; g++){
      var tile = $('#cell'+f);
      var unlocked = window[reversed[g]].unlocked;
      var price = window[reversed[g]].cost;
      if (tile.html() == "" && unlocked && money >= price){
        plant(tile[0],reversed[g]);
        break;
      }
      
    }
  }
}

function upEff(obj){
  var price = window[obj].effPrice;
  if (money >= price && window[obj].efficiency < window[obj].efficiencyMax){
    money -= price;
    window[obj].effPrice *= 1.1;
    window[obj].efficiency += 0.05;
    
    var perc = window[obj].efficiency/window[obj].efficiencyMax*100;
    $('#'+obj+"EffBar").html("x"+(Math.round(window[obj].efficiency*100))/100);
    $('#'+obj+"EffBar").css({
      width: perc+"%",
    })
  }
}

function unlock(obj){
  var price = window[obj].unlockPrice;
  if (money >= price){
    money -= price;
    $('#'+obj+"UnlockBtn").remove();
    window[obj].unlocked = true;
    var name = "£"+window[obj].cost+" "+obj;
  }
}

function buyFill(){
  if (money >= 1e6){
    money -= 1e6;
    $('#fillAllBtn').prop("disabled",false);
    $('#buyFillBtn').remove();
  }
}

setInterval(function(){
  
  currentSeason++;
  if (currentSeason >= seasons.length){
    currentSeason = 0;
  }
  
  achievementUnlocked("<code style=font-size:20px;>"+seasons[currentSeason]+" has started!</code>",false)
  
},60000);


function achievementUnlocked(text,title){
  var hasClass = $('.ach').hasClass('achieved');
  if (hasClass) return;
  if (!title) title = false;
  if (title) $('.title').html("Achievement unlocked!");
  $('.detail').html(text);
  $('.ach').addClass("achieved");
  setTimeout(function(){
    $('.ach').removeClass("achieved");
  },5000)
}


window.onmouseover=function(e) {
  if (!holdingMouse) return;
  if (e.target.innerHTML){
    return;
  }
  if (e.target.innerHTML == "" && e.target.className == "tile"){
    plant(e.target);
  }
};


function save(){
  achievementUnlocked("<code style=font-size:20px;>Game has been saved!</code>");
  var tiles = "";
  var length = $('.tile').length;
  for (var a = 0; a < length; a++){
    tiles += $('#cell'+a).html()+"|";
  }
  
  localStorage["money"] = money;
  localStorage["FPS"] = FPS;
  localStorage["moreSpacePrice"] = moreSpacePrice;
  localStorage["growthSpeedPrice"] = growthSpeedPrice;
  localStorage["currentSeason"] = currentSeason;
  localStorage["growthSpeed"] = growthSpeed;
  
  localStorage["tiles"] = tiles;
  
  for (var a = 0; a < plants.length; a++){
    localStorage[plants[a]+".timeToGrow"] = window[plants[a]].timeToGrow;
    localStorage[plants[a]+".profit"] = window[plants[a]].profit;
    localStorage[plants[a]+".cost"] = window[plants[a]].cost;
    localStorage[plants[a]+".unlocked"] = window[plants[a]].unlocked;
    localStorage[plants[a]+".efficiency"] = window[plants[a]].efficiency;
    localStorage[plants[a]+".effPrice"] = window[plants[a]].effPrice;
    localStorage[plants[a]+".efficiencyMax"] = window[plants[a]].efficiencyMax;
    localStorage[plants[a]+".unlockPrice"] = window[plants[a]].unlockPrice;
  }
  
  localStorage["level"] = level;
  localStorage["xp"] = xp;
  localStorage["xpN"] = xpN;
  
}
function load(){
  if (!localStorage["money"]) return;
  achievementUnlocked("<code style=font-size:20px;>Game has been loaded!</code>");
  for (var a = 0; a < plants.length; a++){
    if (isNaN(localStorage[plants[a]+".cost"])){
      continue;
    }
    window[plants[a]].timeToGrow = parseFloat(localStorage[plants[a]+".timeToGrow"]);
    window[plants[a]].profit = parseFloat(localStorage[plants[a]+".profit"]);
    window[plants[a]].cost = parseFloat(localStorage[plants[a]+".cost"]);
    window[plants[a]].unlocked = (localStorage[plants[a]+".unlocked"] == "true");
    window[plants[a]].efficiency = parseFloat(localStorage[plants[a]+".efficiency"]);
    window[plants[a]].effPrice = parseFloat(localStorage[plants[a]+".effPrice"]);
    window[plants[a]].efficiencyMax = parseFloat(localStorage[plants[a]+".efficiencyMax"]);
    window[plants[a]].unlockPrice = parseFloat(localStorage[plants[a]+".unlockPrice"]);
  }
  
  money = parseFloat(localStorage["money"]);
  moreSpacePrice = parseFloat(localStorage["moreSpacePrice"]);
  growthSpeedPrice = parseFloat(localStorage["growthSpeedPrice"]);
  currentSeason = parseInt(localStorage["currentSeason"]);
  growthSpeed = parseFloat(localStorage["growthSpeed"]);
  
  var tiles = localStorage["tiles"];
  
  xp = parseFloat(localStorage["xp"]);
  xpN = parseFloat(localStorage["xpN"]);
  level = parseInt(localStorage["level"]);
  
  tiles = tiles.split("|");
  $('.tile').remove();
  for (var a = 0; a < tiles.length - 1; a++){
    
    var element = '<div class=tile id=cell'+(a)+' onclick=plant(this);></div>';
    $('#map').append(element);
    
    if (tiles[a] == "") continue;
    $('#cell'+a).html(tiles[a]);
  }
  
  if (isNaN(money)) money = 0;
  
}

setInterval(save,30000);

load();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>

style.css

body {
  background-color: #2EB5E5;
}

#contents menu {
  display: none;
}

#contents menu:target {
  display: block;
}

.tile {
  float: left;
  border: 2px solid black;
  width: 40px;
  height: 40px;
  cursor: default;
}
.tile:hover {
  transform: scale(1.1);
  cursor: pointer;
  z-index: 99;
  background-color: inherit;
}


.plant {
  width: 100%;
  height: 100%;
  text-align: center;
}

p {
  background-color: lightblue;
  float: left;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 900;
  border: 2px solid black;
  border-radius: 10px;
}

* {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
  outline: none;
  transition: all 0.4s cubic-bezier(0,0,1,0);
}

.animation {
  position: absolute;
  font-size: 24px;
  z-index: -1;
}
#console {
  position: absolute;
  right: 10px;
  top: 10px;
  resize: none;
  overflow: auto;
  border: 2px solid black;
  width: 250px;
  height: calc(100% - 100px);
}

.upbar-container {
  width: calc(100% - 4px);
  height: 15px;
  float: right;
  background-color: white;
  border: 2px solid black;
  clear: both;
}

.upbar {
  background-color: #167ac6;
  height: 100%;
  line-height: inherit;
  transition: all 0.5s cubic-bezier(.24, .07, 0, 1);
  text-align: center;
  font-size: 14px;
  width: 0%;
}
img {
  width: 35px;
  height: 35px;
  float: left;
}
button:disabled {
  background-color: grey;
  cursor: not-allowed;
}
#money {
  font-size: 24px;
  font-family: monospace;
}
#season {
  font-size: 24px;
}
select {
  border: 1px solid #111;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}
#plant {
  background: url(http://www.freeiconspng.com/uploads/plant-icon-21.png) 96% / 15% no-repeat white;
  text-transform:capitalize;
}
#fps 
{background: url(http://board.4players.pl/uploads/monthly_2016_10/icon175x175.png.ebedf77abfe6da9c05d149bbd6612aa4.png) 96% / 15% no-repeat white;
}

#sun { 
  position: absolute;
  top: 50px;
  left: calc(50% + 80px);
	width:70px;
	height:70px;
	border-radius:50%;
	background:white;
	opacity:0.6;
	box-shadow: 0px 0px 40px 15px white;
  transition: opacity 2s linear;
}

#map {
  float: left;
  width: calc(100% - 300px);
}

#contents {
  float: right;
  width: 250px;
  overflow-y: auto;
  max-height: 500px;
}
menu > button {
  width: 100%;
}

#navbar {
  float: right;
}


#navbar > ul > li {
  list-style-type: none;
  display: block;
  float: left;
  padding: 10px;
  background-color: #333;
}
#navbar > ul > li > a {
  text-decoration: none;
  color: white;
}
#navbar > ul > li:hover {
  background-color: #111;
}

.ach {
  background: green;
  display: block;
  position: fixed;
  bottom: -5em;
  left: 50%;
  margin-left: -175px;
  width: 350px;
  height: 65px;
  color: #fff;
  font-size: 16px;
  padding: 0 0 0 0;
}

.ach .icon {
  float: left;
  font-size: 2.2em;
  width: 65px;
  padding: 0.1em 0 0;
  text-align: center;
}

.ach .text_wrap {
  position: absolute;
  left: 65px;
  width: 250px;
  top: 0.7em;
  overflow: hidden;
}

.ach .title {
  font-size: 0.9em;
  width: 260px;
  margin: 0 0 -0.2em;
  padding: 0;
}

.ach .detail {
  font-size: 0.7em;
  width: 260px;
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
}

.ach {
  -webkit-transition: all .1s ease-out;
  -moz-transition: all .1s ease-out;
  -o-transition: all .1s ease-out;
  transition: all .1s ease-out;
}

@keyframes ach_in_anim {
  0% {
    bottom: -5em;
    width: 65px;
    margin-left: -32.5px;
    border-radius: 50%;
  }
  15% {
    bottom: 2.2em;
    width: 65px;
    margin-left: -32.5px;
  }
  25% {
    bottom: 1em;
    width: 65px;
    margin-left: -32.5px;
  }
  75% {
    bottom: 1em;
    width: 65px;
    margin-left: -32.5px;
  }
  85% {
    bottom: 1em;
    width: 65px;
    margin-left: -32.5px;
    border-radius: 50%;
  }
  92% {
    bottom: 1em;
    width: 380px;
    margin-left: -190px;
    border-radius: 0;
  }
  100% {
    bottom: 1em;
    width: 350px;
    margin-left: -175px;
    border-radius: 0;
  }
}

@keyframes ach_current {
  0% {
    bottom: 1em;
    width: 350px;
    margin-left: -175px;
  }
  100% {
    bottom: 1em;
    width: 350px;
    margin-left: -175px;
  }
}

@keyframes ach_out_anim {
  0% {
    bottom: 1em;
    width: 350px;
    margin-left: -175px;
    border-radius: 50%;
  }
  16% {
    bottom: 1em;
    width: 65px;
    margin-left: -32.5px;
    border-radius: 50%;
  }
  20% {
    bottom: 1em;
    width: 50px;
    margin-left: -25px;
  }
  34% {
    bottom: 1em;
    width: 65px;
    margin-left: -32.5px;
  }
  70% {
    bottom: 1em;
    width: 65px;
    margin-left: -32.5px;
  }
  100% {
    bottom: -5em;
    width: 65px;
    margin-left: -32.5px;
    border-radius: 50%;
  }
}

.achieved {
  animation: ach_in_anim 1.4s, ach_current 3s, ach_out_anim 0.8s;
  animation-delay: 0s, 1.4s, 4.4s;
}

@keyframes i_in_anim {
  0% {
    transform: scale(0);
  }
  45% {
    transform: scale(0)
  }
  46% {
    transform: scale(0.4)
  }
  50% {
    transform: scale(1);
  }
  55% {
    transform: scale(1.2);
  }
  60% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes i_current {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes i_out_anim {
  0% {
    transform: scale(1);
  }
  46% {
    transform: scale(1);
  }
  47% {
    transform: scale(1.2);
  }
  56% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.4)
  }
  65% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}

.achieved .icon i {
  animation: i_in_anim 1.4s, i_current 3s, i_out_anim 0.8s;
  animation-delay: 0s, 1.4s, 4.4s;
}

@keyframes text_in_anim {
  0% {
    width: 0;
  }
  85% {
    width: 0;
  }
  100% {
    width: 260px;
  }
}

@keyframes text_out_anim {
  0% {
    width: 260px;
  }
  12% {
    width: 0;
  }
  100% {
    width: 0;
  }
}

.achieved .text_wrap {
  animation: text_in_anim 1.4s, text_out_anim 0.8s;
  animation-delay: 0s, 4.4s;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/blitzer/jquery-ui.css" rel="stylesheet" />