Anfänger hier - Clicker Spiel Timer zurückgesetzt

Question

Ok, also versuche ich ein ziemlich einfaches Clicker-Spiel zu machen, um einige grundlegende Javascript zu lernen. Alles funktioniert soweit sehr gut ... Ich habe mehrere Unternehmen, die Geld im Laufe der Zeit produzieren (ich habe Timer für jedes Geschäft). Problem ist, wenn Sie die Unternehmensseite aktualisieren, stoppt die Produktion und Sie müssen es erneut starten. Zum Beispiel habe ich einen "Coffee Shop", der alle Y Sekunden x $ produziert. Die Produktion wird durch Anklicken einer Schaltfläche ausgelöst. Was ich versuche zu tun, ist .. Wenn Sie die Produktion starten und die Seite aktualisieren, sollte die Produktion nach der Aktualisierung automatisch mit der vorherigen verbleibenden Zeit ausgelöst werden.

Das ist, was ich versuche zu tun: Dies ist die Taste, die beginnt -: -

 // ========== Coffee shops timer ================ // 
    var cafeTimer = 10; 
    if(localStorage.cafeTimer) {cafeTimer = localStorage.cafeTimer} 
    document.getElementById("dispWaitCafe").innerHTML = cafeTimer; 

    function startTimer3(secs3) { 
     timeInSecs3 = parseInt(secs3)-1; 
     ticker3 = setInterval("tick3()",1000); 
     waitingC = 1; 
    } 
    function tick3() { 
     var secs3 = timeInSecs3; 
     if (secs3 > 0) { 
     timeInSecs3--; 
     } 
     else { 
     clearInterval(ticker3); 
     secs3 = +cafeTimer; 
     waitingC = 0; 
     cafeButton.style.backgroundColor = ""; 
     } 
     dispWaitCafe.innerHTML = secs3; 

Hier ist der Timer für die Coffee Shop Produktion:

cafeButton.onclick = function() { if(cafeLevel > 0) { if(waitingC < 1) { 
    setTimeout(function() { money = +money + +cafeProd; 
    displayCash.innerHTML = numberWithDots(Math.round(money*100)/100); 
    checkupcolors(); 
    localStorage.money = money; 
    clearInterval(cafeFrame); 
    cafeBar.value = 0; }, +cafeTimer*1000); 
    startTimer3(+cafeTimer); 
    var cafeFrame = setInterval("cafeframe()",10); 
    cafeButton.style.backgroundColor = "#FF6666"; 
    } } 
} 

- Ich habe auch einen Fortschrittsbalken für den Timer:

var cafeBar = document.getElementById("cafeBar"); 
cafeBar.max = +cafeTimer; 
function cafeframe() { 
    cafeBar.value += 0.01; 
} 

-Dies ist das, was ich unter der cafeTimer Erklärung hinzuzufügen versucht:

if(localStorage.cafeTimeleft) { cafeTimer = localStorage.cafeTimeleft; 
    if(cafeLevel > 0) { if(waitingC < 1) { 
    setTimeout(produceCafe, +cafeTimer*1000); 
    startTimer3(+cafeTimer); 
    var cafeFrame = setInterval("cafeframe()",10); 
    cafeButton.style.backgroundColor = "#FF6666"; 
    } } 
    if(localStorage.cafeTimer) { cafeTimer = localStorage.cafeTimer } 
    localStorage.removeItem("cafeTimeleft"); 
} 

(produceCafe ist die gleiche Funktion wie die, die im onclick oben benutzt wurde) Außer dem Code oben, fügte ich timeLeft = secs3; hinzu und ich setzte mich in localStorage eve ein rytime der Timer oben tut "dispWaitCafe.innerHTML = secs3;"

Ich weiß nicht, fehle ich hier etwas? Es scheint, dass ich gerade Dinge mit meinen Ergänzungen vermasselt habe. Irgendein Rat? Vielen Dank!

Answer 1

Was Sie tun, ist, dass Sie einen onbeforeunload Handler erstellen, in dem Sie die verbleibende Timer Länge speichern für alle Unternehmen:

window.onbeforeunload += function(e) { 
    //store the remaining timer length 
}; 

Dann auf window.Load, instanziieren Sie die Timer mit der verbleibenden Zeit.

window.onload += function(e){ 
    //restart the timers with the remaining time. 
} 

Hinweis: Dies Pausiert die Timer. Wenn Sie möchten, dass Ihr Benutzer bei geschlossenem Fenster inaktiv sein kann (wie bei vielen Klickern), müssen Sie die genaue Systemzeit während speichern und dann berechnen, wie viele Timer seither unter window.load() ausgeführt werden konnten.