Save A Clicker Game Progress With Cookies? (HTML5, JS)

Question

How do I make my clicker game save by using cookies? I have done some research but I have difficulty understanding how to implement it. I have sourced 2 files, the HTML file and the JS file. I have the final result at www.cornclicker.tk thanks for any help I really appreciate it.

HTML FILE:



  
     



    
    
    Corn Clicker
    
    
    
    
  
  
    
      
        
          Corn Clicker!
          It has the juice!
          By Kai S
        
          
          YouTube
      
    
        0 corn
    
      
    
      
        
          Clicker
            .5 corn every 5 seconds
            Cost: 20 Corn
        
      
        
        
          Farmer
            1 corn every 2 seconds
            Cost: 150 Corn
        
      
      
        
        Corn Reserve
          2 corn a second
          Cost: 350 Corn
        
      
      
        
        Corn Generator
          10 corn a second
          Cost: 700 Corn
        
      
      
        
        Master Corn Grower
          20 corn a second
          Cost: 1000 Corn
        
      
      
        
        Corn Printer
          50 corn a second
          Cost: 1500 Corn
        
      
      
        
        Alien Corn
          100 corn a second
          Cost: 20000 Corn
        
      
      
        
        B U T T E R
          50000 corn a second
          Cost: 100000 Corn

And here is the javascript file:

var lemon = document.getElementById('lemonImg')
lemon.addEventListener("click", clickLemon);
var showNumbers = document.getElementById('output');
var total = 0;
var sound = new Audio("ItsCorns.mp3");
var sound1 = new Audio("Corn3_01.mp3");
var sound2 = new Audio("corntastic.mp3");
var sound3 = new Audio("TheGrease.mp3");

document.addEventListener("load", function(){
    sound3.currentTime = 0;
    sound3.play();
});


document.cookie = total;

function toggleMute() {
  var myAudio = document.getElementById('audio_playo24');
  myAudio.muted = !myAudio.muted;
}

function clickLemon() {
  total ++;
  showNumbers.innerHTML = total;
  sound.currentTime = 0;
    sound.play();
  sleep(2);
}


var reset = document.getElementById('btn-reset')
reset.addEventListener("click", resetScore);
function resetScore() {
  total = 0;
  showNumbers.innerHTML = total;
  sound2.currentTime = 0;
  sound2.play();
  for(i=0; i<100; i++) {
    window.clearInterval(i); 
  }
}

/*
power up 1 function
*/
var power1 = document.getElementById('powerUp1');
power1.addEventListener("click", powerUp1);

function powerUp1() {
  if (total >= 20) {
    total = total - 20;
    clickPower("power");
    power1.onclick = setInterval('clickPower("power")', 5000);
    sound1.currentTime = 0;
    sound1.play();
  }
}
/*
power up 2 function
*/
var power2 = document.getElementById('powerUp2');
power2.addEventListener("click", powerUp2);

function powerUp2() {
  if (total >= 150) {
    total = total - 150;
    clickPower("power2");
    power2.onclick = setInterval('clickPower("power2")', 2000);
    sound1.currentTime = 0;
    sound1.play();
  }
}
/*
power up 3 function
*/
var power3 = document.getElementById('powerUp3');
power3.addEventListener("click", powerUp3);

function powerUp3() {
  if (total >= 350) {
    total = total - 350;
    clickPower("power3");
    power3.onclick = setInterval('clickPower("power3")', 1000);
    sound1.currentTime = 0;
    sound1.play();
  }
}
/*
power up 4 function
*/
var power4 = document.getElementById('powerUp4');
power4.addEventListener("click", powerUp4);

function powerUp4() {
  if (total >= 700) {
    total = total - 700;
    clickPower("power4");
    power4.onclick = setInterval('clickPower("power4")', 1000);
    sound1.currentTime = 0;
    sound1.play();
  }
}
/*
power up 5 function
*/
var power5 = document.getElementById('powerUp5');
power5.addEventListener("click", powerUp5);

function powerUp5() {
  if (total >= 1000) {
    total = total - 1000;
    clickPower("power5");
    power5.onclick = setInterval('clickPower("power5")', 1000);
    sound1.currentTime = 0;
    sound1.play();
  }
}
/*
power up 6 function
*/
var power6 = document.getElementById('powerUp6');
power6.addEventListener("click", powerUp6);

function powerUp6() {
  if (total >= 1500) {
    total = total - 1500;
    clickPower("power6");
    power6.onclick = setInterval('clickPower("power6")', 1000);
    sound1.currentTime = 0;
    sound1.play();
  }
}
/*
power up 7 function
*/
var power7 = document.getElementById('powerUp7');
power7.addEventListener("click", powerUp7);

function powerUp7() {
  if (total >= 20000) {
    total = total - 20000;
    clickPower("power7");
    power7.onclick = setInterval('clickPower("power7")', 1000);
    sound1.currentTime = 0;
    sound1.play();
  }
}
/*
power up 8 function
*/
var power8 = document.getElementById('powerUp8');
power8.addEventListener("click", powerUp8);

function powerUp8() {
  if (total >= 100000) {
    total = total - 100000;
    clickPower("power8");
    power8.onclick = setInterval('clickPower("power8")', 1000);
    sound1.currentTime = 0;
    sound1.play();
  }
}


function clickPower(power) {
  switch (power) {
    case "power":
      total = total + .5;
      showNumbers.innerHTML = total;
      break;
    case "power2":
      total = total + 1;
      showNumbers.innerHTML = total;
      break;
    case "power3":
      total = total + 2;
      showNumbers.innerHTML = total;
      break;
    case "power4":
      total = total + 10;
      showNumbers.innerHTML = total;
      break;
    case "power5":
      total = total + 20;
      showNumbers.innerHTML = total;
      break;
    case "power6":
      total = total + 50;
      showNumbers.innerHTML = total;
      break;
    case "power7":
      total = total + 100;
      showNumbers.innerHTML = total;
      break;
    case "power8":
      total = total + 50000;
      showNumbers.innerHTML = total;
      break;
    default:
      return;
  }
}

Thanks for your help :)

Save A Clicker Game Progress With Cookies? (HTML5, JS)

0 Answers