javascript - loop - el temporizador no se reinicia cuando se reinicia el "juego"
timer javascript ejemplo (2)
¿Intentó restablecer el counter y los valores de speed cuando obtiene "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)
}
Funcionalidad
Usuario para jugar un juego basado en el tiempo en la página del juego. Habrá un temporizador de cuenta regresiva que hará un seguimiento de la duración del juego, por lo tanto, cuando el contador sea igual a 0, hará un control y evaluará si el usuario ha cumplido la condición del juego.
Las condiciones del juego son las siguientes:
1.) si el contador es igual a 0 y la velocidad es más de 20ms, avanzará a la siguiente página
más
2.) navegará a la página "Gameover" y el usuario tendrá que reconocer la página de gameover que luego navegará de nuevo a la página de inicio del juego.
Y cuando el usuario falla el juego y reinicia el juego, se supone que el contador debe restablecerse de manera que se cuente como un juego completamente nuevo.
Que he hecho:
He hecho, el contador y también he grabado la velocidad y se muestra en la página del juego. En segundo lugar, también he establecido los enunciados condicionales para verificar las condiciones (contador == 0 && velocidad> 20), lo que se supone es navegar el usuario a las páginas correctas, respectivamente.
Problema: el usuario puede navegar a las páginas correctas después del final del juego, por lo tanto, las verificaciones condicionales que se han realizado son correctas. Sin embargo, para los usuarios que fallaron en el juego y tienen que reiniciar el juego, el temporizador no se restablece al valor inicial; por ejemplo, contador = 10. Es decir, cuando el contador = 0 del intento anterior prueba, todavía está configurado en el contador = 0, entiendo que es porque lo he configurado como clearInterval(rollingInterval) , por lo tanto, borra el contador y la velocidad no se restablece a 0.00ms pero la velocidad anterior aún se muestra.
Sin embargo, me gustaría preguntar cómo puedo restablecer el contador de vuelta a counter = 10 así como restablecer la velocidad = 0.00ms cuando el usuario reinicia el juego ??
He adjuntado el código para su lectura:
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 -->
muy simple, hice una actualización de toda la página. Por lo tanto, así es como lo hice para reiniciar el contador y todas las demás configuraciones:
location.reload();
La siguiente línea se ubica dentro de: function RevertPage(){..} . por lo tanto, el código será como:
function RevertPage() {
//navigate user to game page immediately.
//Refresh entire LaunchPage
location.reload();
console.log("GameFail Navigate");
}