【发布时间】：2015-11-16 08:36:33
【问题描述】：
功能：
用户在游戏页面中玩基于时间的游戏。将有一个倒计时计时器来跟踪游戏持续时间，因此，当计数器 = 0 时，它将检查并评估用户是否满足游戏条件。
比赛条件如下：
1.)如果计数器等于0且速度大于20ms，则前进到下一页
其他
2.) 它将导航到“游戏结束”页面，用户必须确认游戏结束页面，然后该页面将再次导航回游戏开始页面
当用户游戏失败并重新开始游戏时，计数器会被重置，从而将其视为全新游戏。
我做了什么：
我已经完成了，计数器也记录了速度，它显示在游戏页面上。 其次，我还设置了条件语句来检查条件(counter == 0 && speed>20)，假设分别将用户导航到正确的页面。
问题：
用户能够在游戏结束后导航到正确的页面，因此已完成的条件检查是正确的。但是，对于游戏失败而必须重新开始游戏的用户，计时器不会重置为初始值；例如计数器 = 10。意思是，当上一个游戏中的 counter=0 时，它仍然设置为 counter = 0，我明白这是因为我将它设置为 clearInterval(rollingInterval) ，因此它清除了计数器并且速度没有重置为 0.00 ms，但仍显示之前的速度。
但是，我想问一下，当用户重新开始游戏时，如何将计数器重置回计数器 =10 以及将速度重置为 0.00 毫秒？？
我已附上代码供您阅读：
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 -->【问题讨论】：
-
clearInterval(rollingInterval)在一个抽象函数中被调用，它有自己的作用域。我认为问题在于抽象函数没有返回值，因此调用rollingInterval = setInterval(function() {...})不会更新外部范围内的 rollingInterval。尝试添加return rollingInterval。 -
@noumenal 对不起，你是什么意思？我尝试添加 return rollingInterval，但它似乎也不起作用
-
我已尝试运行您的代码，但似乎无法正常工作。我认为您需要将函数调用分成不同的函数。一个名为 $ 的函数意义不大，通常是为 jQuery 保留的。我建议通过重命名函数来重构代码，以便每个函数都有一个明确的名称 - 一个动词。这意味着不要将函数嵌套在一起，而是将它们逐个编写，例如：
function1(){ } function2(){ function1(); }这样，您将对事件链有更好的理解。 -
@noumenal。我可以知道它是如何不起作用的吗？因为，当我测试它时，倒计时和速度检测的功能正在工作。但是，setInterval 函数仅在用户必须再次导航回游戏页面时才起作用。之所以使用
$(function(){...})，是因为里面的功能只有在文档准备好时才会执行。但是，我会尝试你的建议并再次更新 -
对于初学者，我无权访问图像，但单击提交查询时似乎没有发生任何事情。
标签： javascript timer countdown