如何在 JavaScript 中將元素移回其原始位置而無需“location.reload”？

Question

我正在用一個球做游戲，當它碰到屏幕頂部時，你就出局了。 我還有一個計算分數和高分的系統。 當您在確認 window 上按 OK 時，我希望將球帶到原來的 position。

這是我到目前為止所擁有的：

得分計算 function：

var score = 0;
setInterval(function() {
    if(!paused)
        score++;
    diplayScore.innerHTML = "Score:\n" + score;
     var getHigh = displayHighScore.innerHTML = "High Score:" + highScore;
},1000);

出門時：

if (characterTop <= 0) {
        if(score > highScore) {
            highScore = score;
         }
        if(confirm("Game over. Do you want to play again?") === true) {
            // Reset Game...
        }
        else {
           // Do Nothing...
        }           
    }

我嘗試使用location.reload重置游戲，但它也重置了高分，破壞了這一點。

任何幫助將不勝感激。

提前非常感謝:)

Answer 1

一個簡單的解決方案是將您的高分存儲在localStorage中，根據您的描述，只有高分才是需要持久化的值。 您的程序的 rest 可以通過頁面刷新來重置，就像您現在正在嘗試的那樣。

您只需在游戲加載時添加“從 localStorage 讀取高分”，如果獲得新的高分，則“將高分保存到 localStorage”。 按照下面的示例應該非常簡單。

• localStorage讀寫示例代碼。
• 本地存儲文件