How to move an element back to its original place without "location.reload" in JavaScript?

user_15021785 0
Viewed 36

I'm making a game with a ball and when it touches the top of the screen you're out. I also have a system that calculates a score and a high score. I want the ball to be brought to its original position when you press OK on the confirm window.

Here's what I have so far:

The score-calculating function:

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

When you get out:

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

I've tried resetting the Game with location.reload, but it resets the high score as well, ruining the point.

Any help would be greatly appreciated.

Thanks so much in advance :)

javascript
1 Answers

A simple solution would be to store your high score in localStorage, as from your description, only high score is the value needed to be persisted. The rest of your program can be reset through page refresh, as what you're trying now.

You only need to add 'read high score from localStorage' when the game is loaded, and 'save high score into localStorage' if a new high score is obtained. Should be quite straightforward following the example below.

user_36005100
Related