功能：
用户在游戏页面上玩基于时间的游戏。会有一个倒计时计时器，可以跟踪游戏的持续时间，因此，当计数器= 0时，它将进行检查并评估用户是否满足游戏条件。
游戏条件如下：
1.）如果计数器等于0并且速度大于20ms，它将前进到下一页
其他
2.）它将导航到“ Gameover”页面，用户必须确认游戏结束页面，然后该页面将再次导航回到游戏开始页面
并且当用户使游戏失败并重新启动游戏时，计数器应重置为将其计为全新游戏。
我做了什么：
我已经做了，计数器，还记录了速度，它显示在游戏页面上。其次，我还设置了条件语句以检查条件（counter == 0 && speed> 20），这假定分别将用户导航到正确的页面。
问题：游戏结束后，用户能够导航到正确的页面，因此已执行的条件检查是正确的。但是，对于游戏失败并必须重新启动游戏的用户，计时器不会重置为初始值。例如，counter = 10。意思是，当上一次游戏尝试的counter = 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 -->很简单，我刷新了整个页面。因此，这就是我如何重置计数器和所有其他设置的方法：
location.reload();
以下行位于：中function RevertPage(){..}。因此，代码将类似于：
function RevertPage() {
//navigate user to game page immediately.
//Refresh entire LaunchPage
location.reload();
console.log("GameFail Navigate");
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句