初学者在这里 - Clicker 游戏计时器重置答案

【问题标题】：Beginner here - Clicker game timers reset初学者在这里 - Clicker 游戏计时器重置
【发布时间】：2016-08-01 15:04:19
【问题描述】：

好的，所以我正在尝试制作一个非常简单的点击游戏，以学习一些基本的 JavaScript。到目前为止，一切都很好......我有多家企业随着时间的推移而赚钱（我为每家企业都有计时器）。问题是，如果你刷新商家页面，生产就会停止，你必须重新开始。例如，我有一个“咖啡店”，每 y 秒产生 x$。通过单击按钮触发生产。我尝试做的是..如果您开始生产并刷新页面，刷新后的生产应该会自动触发之前的剩余时间。

这就是我想要做的：

- 这是咖啡店的计时器：

     // ========== 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;

- 这是开始制作的按钮：

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";
    } }
}

- 我还有一个计时器进度条：

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

-这是我尝试在 cafeTimer 声明下添加的内容：

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和上面onclick中使用的功能是一样的）除了上面的代码，我添加了timeLeft = secs3; 并且每次上面的计时器执行“dispWaitCafe.innerHTML = secs3;”时我都会放入 localStorage

我不知道，我在这里错过了什么吗？看来我只是把我的补充搞砸了。有什么建议吗？谢谢！

【问题讨论】：

好的，我在我说我添加的代码中放了“ice”而不是“cafe”。就当是“cafeTimeLeft、cafeTimer等”看吧
您可以编辑自己的问题以更正拼写错误。

标签： javascript html

【解决方案1】：

您要做的是创建一个 onbeforeunload 处理程序，在其中存储所有业务的剩余计时器长度：

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

然后在 window.Load 上，用剩余时间实例化计时器。

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

注意：这会暂停计时器。如果您希望您的用户能够在窗口关闭的情况下空闲（就像许多点击器一样），您必须在window.onbeforeunload() 期间存储确切的系统时间，然后计算从那时起在window.load() 上可以运行多少个计时器。

【讨论】：