功能性：
用户在游戏页面中玩基于时间的游戏。将有倒数计时器来跟踪游戏持续时间，因此，当计数器= 0时，它将进行检查并评估用户是否满足游戏条件。
游戏条件如下：
1。）如果计数器等于0且速度超过20ms，它将进入下一页
否则
2。）它将导航到＆＃34; Gameover＆＃34;页面和用户必须确认gameover页面，然后再返回到游戏起始页面
当用户在游戏中失败并重新开始游戏时，计数器会被重置，以便将其视为一个全新的游戏。
我做了什么：
我已经完成了，计数器也记录了速度，它正在游戏页面上显示。 其次，我还设置条件语句来检查条件（counter == 0＆amp;＆amp; speed＆gt; 20），这假设分别将用户导航到正确的页面。
问题：
用户能够在游戏结束后导航到正确的页面，因此已完成的条件检查是正确的。但是，对于游戏失败并且必须重新启动游戏的用户，计时器不会重置为初始值;例如counter = 10。意思是，当前一个游戏尝试的计数器= 0时，它仍然设置在counter = 0，我明白这是因为我将它设置为clearInterval(rollingInterval)，因此它清除了计数器并且速度没有重置到0.00ms，但之前的速度仍在显示。
但是，我想问一下如何将计数器重置为counter = 10以及当用户重启游戏时重置速度= 0.00ms？
我附上了您的细读代码：
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 -->
答案 0 :(得分：1)
尝试在“游戏结束”时重置counter和speed值？
}else if(counter==10&&speed<20){
$("#page2").hide();
$("#GameOver").show();
counter=0; // make counter value equal to 0
speed=0; // speed also
clearInterval(rollingInterval)
}