Geek Answers Handbook

The timer does not reset when the "game" restarts

Functionality:

User to play the game based on time on the game page. There will be a countdown timer that will track the duration of the game, therefore, when the counter = 0, it will check the check and evaluate whether the user meets the conditions of the game.

The game conditions are as follows:

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

yet

2.), he will go to the "Gameover" page, and the user will have to transfer the transition page to the game, which will then return to the game’s start page.

And when the user exits the game and restarts the game, the counter is supposed to be reset, so that it will be considered a new game.

What I've done:

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

Question: The user can go to the correct pages after the end of the game, so the conditional checks performed are correct. However, for users who have failed the game and restarted the game, the timer does not equal reset to the original value; for example, counter = 10. The value, when counter = 0 from the previous game tries, it is still set to counter = 0, I understand that this is because I set it as clearInterval(rollingInterval) , therefore, it clears the counter, and the speed is not reset to 0.00 ms, but the previous speed is still displayed.

However, I would like to ask, how can I reset the counter to return to counter = 10, as well as to reset the speed = 0.00ms, when will the user restart the game?

I have attached the code for your reading:

 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 -->
+6
source share
2 answers

very simple, I updated the whole page. Therefore, this is how I did it with a reset counter and all other settings:

 location.reload();

The following line is placed inside: function RevertPage(){..} . so the code will look like this:

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

Did you try resetting the values ​​of counter and speed 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) }
+1
source

More articles:


All Articles