timer is not reset when "game" restarts

6
votes

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 -->
2
javascripttimercountdown
clearInterval(rollingInterval) is called in an abstract function, which has its own scope. I think the issue is that the abstract function has no return value, so calling rollingInterval = setInterval(function() {...}) does not update rollingInterval in the outer scope. Try adding return rollingInterval. – noumenal
@noumenal sorry but what do you mean?? I tried adding return rollingInterval and it doesn't seem to be working too – Luke
I have tried running your code, but it seems not to work. I think you need to separate the function calls into different functions. A function named $ is not very meaningful and is most often reserved for jQuery. I would suggest refactoring the code by renaming the functions, so that each function has a clear name - a verb. This means that instead of nesting the functions they should be written after each other, for example: function1(){ } function2(){ function1(); } By doing so, you will have a better understanding of the chain of events. – noumenal
@noumenal. May I know how is it not working?? cause, when I tested it, the function of the countdown and detection of speed were working. However, the setInterval function is not working only when users have to navigate back to the game page a second time. Reason why is used $(function(){...}), is so that the function within will only be implemented when document is ready.But, I will try out your suggestion and update again – Luke
For starters, I don't have access to the images, but nothing seems to be happening when clicking Submit Query. – noumenal

2 Answers

2
votes

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");
}
1
votes

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)
}