初心者はここです - クリッカーゲームタイマーリセット

Question

私はかなり基本的なJavaScriptを学ぶために、かなりシンプルなクリッカーゲームを作ろうとしています。 これまでのところ、すべてがALMOSTで正常に機能しています...私は時間の経過とともにお金を生み出す複数のビジネスを持っています（私はすべてのビジネスのためのタイマーを持っています）。 問題は、企業のページを更新すると、プロダクションが停止し、再度開始する必要があることです。 たとえば、私は「コーヒーショップ」を持っています。これは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;を追加し、私はlocalstorage eve上記のタイマーでは "dispWaitCafe.innerHTML = secs3;"

私はここで何かを逃しているのですか？私はちょうど私の追加で物事を台無しにしたようです。何かアドバイス？ありがとうございました！

Answer 1

あなたはすべてのあなたのビジネスのための残りのタイマの長さを格納しonbeforeunloadハンドラ作成されて何をすべきか：window.Loadに続いて

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

を、あなたは残りの時間でタイマーをインスタンス化します。

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

注：これはタイマーを一時停止します。ユーザーがウィンドウを閉じた状態でアイドルできるようにするには、window.onbeforeunload()の間に正確なシステム時間を保存してから、その後に実行できるタイマーの数をwindow.load()で計算する必要があります。