timer is not reset when "game" restarts

Question

Functionality:

User to play a time-based game in game page. There will be a countdown timer that will keep track of the game duration, hence, when the counter =0, it will do a check and assess if the user has satisfy the game condition.

The Game conditions are as follows:

1.) if the counter is equal to 0 and the speed is more than 20ms, it will advance to the next page

else

2.) it will navigate to the "Gameover" page and user will have to acknolwedge the the gameover page which will then navigate back again to the game starting page

And when User fails the game and restarts the game, the counter is suppose to be reset such that it will be counted as a brand new game.

What I have done:

I have done, the counter and have also recorded the speed and it is displaying on the game page. Secondly, I have also set the conditional statements to check on the conditions(counter == 0 && speed>20), which is suppose the navigate the user to the correct pages, respectively.

Issue: User is able to navigate to the correct pages after the end of the game, hence the conditional checks that has been done is correct. However, for users who failed the game and has to restart the game, the timer is not reset to the initial value; for e.g counter=10. Meaning, when the counter=0 from the previous game try, it is still set at counter = 0, i do understand that is because I have set it as clearInterval(rollingInterval) , hence it clears the counter and the speed is not reset to 0.00ms but the previous speed is still being displayed.

However, I would like to ask how am I able to reset the counter back to counter =10 as well as to reset the speed = 0.00ms when the user restarts the game??

I have attached the code for your perusal:

function Page2() {
  $("#page1").hide();
  $("#page2").show();
}

//script for div id =page2
function MainGame(){
               var numOfSpin = 0,
                distanceCovered = 0,
                counter = 0,
                timer = 10;
               var rollingInterval;
                
                $("#scrollerDiv").scroll(function() {
                    var height = $("#scrollerDiv").scrollTop();
                    for ( var i = 0; i < 250; i ++ ) {
                        if ( height > i * 10 ) {
                            if ( i >= 0 && i < 10 ) {
                                $("#roller").attr("src", "Image/rolling_pin/Rolling Pin Spin00"+i+".png");
                            }
                            if ( i >= 10 && i < 100 ) {
                                $("#roller").attr("src", "Image/rolling_pin/Rolling Pin Spin0"+i+".png");
                            }
                            if ( i >= 100 && i < 1000 ) {
                                $("#roller").attr("src", "Image/rolling_pin/Rolling Pin Spin"+i+".png");
                               
                                $("#scrollerDiv").scrollTop(0);
                                numOfSpin++;
                                distanceCovered += 0.59;
                                console.log(distanceCovered);
                                console.log(numOfSpin);
                            }
                        }
                    }
			
                })
        
               rollingInterval = setInterval(function() {
                    counter = counter + 1;
                    timer = timer - 1;
                    speed = distanceCovered / counter;
                    speed2dec = speed.toFixed(2);
                    //document.getElementById("speedSpan").innerHTML = speed2dec + "<br/>"+"ms";
                    $('#speedSpan').html(speed2dec+'<br>ms');
                    //document.getElementById("timeSpan").innerHTML = timer + "s"
                    $('#timeSpan').html(timer+'s');
                   
                    //Ernest_Lee 13/11/15: Set Conditional Checks; user satisfy game condition, advance to next page, else navigate to the "GameOver" Page.
                    if ( counter == 10 && speed >20) {
                        console.log("Count");
                        clearInterval(rollingInterval);
                        $("#page2").hide();
                        $("#page3").show();
                    }else if( counter == 10 && speed <20) {
                        clearInterval(rollingInterval);
                        $("#page2").hide();
                        $("#GameOver").show();
                    }
                }, 1000)
               
           }
function RevertPage() {
  $("#GameOver").hide();
  $("#page1").show();
}

  ::-webkit-scrollbar {
    display: none;
  }
  /*CSS styling for fadein counter */
  #content {
    position: fixed;
    top: 850px;
    left: 250px;
    font-family: SFNewRepublic;
    font-size: 250px;
    color: orange;
    opacity: 2;
  }
  .img-wrapper {
    overflow: hidden;
    position: relative;
    display: inline-block;
  }
  .img-wrapper roll {
    width: 400px;
    height: auto;
  }
  .img-wrapper scroller {
    width: 200px;
    height: 500px;
  }
  /*Creating & Centering the gauge*/
  #canvas {
    display: inline-block;
    position: fixed;
    top: 700px;
    left: 200px;
    width: 300px;
    margin: 100px auto;
  }
  #Counter {
    display: inline-block;
    position: fixed;
    top: 700px;
    left: 650px;
    width: 300px;
    margin: 100px auto;
  }
  /*Custom font for numbers*/
  @font-face {
    font-family: SFNewRepublic;
    src: url("font/sfnewrepublic/SF_New_Republic.ttf");
  }
  /*Image set in Scroller & rolling-pin*/
  #scrollerDiv {
    position: fixed;
    top: 1150px;
    left: 200px;
    background-color: transparent;
    height: 650px;
    width: 750px;
    overflow: auto;
    /*                z-index:1;*/
    z-index: 2;
  }
  #invisibleElement {
    height: 2490px;
    width: 1000px;
  }
  /*Function: NEW for Speed and Counter Text*/
  #speedSpan {
    color: #55380b;
    font-family: SFNewRepublic;
    font-size: 50px;
    position: fixed;
    align-content: center;
    top: 900px;
    left: 298px;
  }
  #timeSpan {
    color: #55380b;
    font-family: SFNewRepublic;
    font-size: 80px;
    position: fixed;
    top: 900px;
    left: 760px;
  }
  .container {
    width: 750px;
    height: 300px;
    align-content: center;
    clear: both;
  }
  .container input {
    width: 400px;
    height: 90px;
    clear: both;
  }
  /* Game Page CSS Styling */
  /*Game Page1 CSS Styling*/
  #page1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  /*Game Page2 CSS Styling*/
  #page2 {
    top: 0;
    left: 0;
    z-index: 2;
  }

<div id="page1" align="center" style="background-image: url(Image/Page1.png); width:100%; height:100%;">
  <input style="outline:0;height:90px;width:400px; margin-top:1300px" type="image" id="Point" src="http://atextures.com/paper-scroll-background-five/" onclick="Page2()" />
</div>



<div id="page2" class="img-wrapper" align="center" style=" position: relative; background-image: url(Image/Page2.png); background-repeat: no-repeat; display: none; width: 100%;height: 100%;">

  <span id="speedSpan">0.00 m/s</span>
  <span id="timeSpan">10 s</span>

  <img id="roller" style="position: relative; top:1100px; width: 100%" src="http://atextures.com/paper-scroll-background-five/" />
  <img id="scroll" style="position:absolute; top: 1250px; left: 380px; overflow-y: auto;" src="http://atextures.com/paper-scroll-background-five/">

  <div id="scrollerDiv">
    <p id="invisibleElement"></p>
  </div>
</div>


<div id="GameOver" align="center" style=" background-image: url(Image/GameOver.png);background-repeat: no-repeat;width: 100%;height: 100%;display: none;">
  <input style="outline:0;height:90px;width:400px; margin-top:1300px" type="image" id="OK" src="http://depositphotos.com/1045357/stock-photo-ok-button.html" onclick="RevertPage()" />
</div>

<!-- begin snippet: js hide: false -->

Answer 1

very simply, I did a refresh of the entire page. Hence, this is how I did it to reset the counter and all the other settings:

location.reload();

The following line is placed within: function RevertPage(){..}. therefore, the code will be like:

function RevertPage() { 
//navigate user to game page immediately.
//Refresh entire LaunchPage
location.reload();
console.log("GameFail Navigate");
} 

Answer 2

Tried to reset the counter and speed values when you get "Game over"?

}else if(counter==10&&speed<20){
     $("#page2").hide();
     $("#GameOver").show();
     counter=0; // make counter value equal to 0
     speed=0; // speed also
     clearInterval(rollingInterval)
}