javascript - 当 "game"重新启动时定时器没有重置

Question

功能:

用户在游戏页面中玩基于时间的游戏。将有一个倒数计时器来跟踪游戏持续时间，因此，当计数器 =0 时，它将检查并评估用户是否满足游戏条件。

比赛条件如下:

1.) 如果计数器等于0且速度大于20ms，则前进到下一页

其他

2.) 它将导航到“游戏结束”页面，用户必须确认游戏结束页面，然后该页面将再次导航回游戏起始页面

并且当用户游戏失败并重新开始游戏时，计数器应该被重置，这样它将被视为一个全新的游戏。

我做了什么:

我已经完成了，计数器也记录了速度，它显示在游戏页面上。其次，我还设置了条件语句来检查条件 (counter == 0 && speed>20)，这是假设分别将用户导航到正确的页面。

问题:用户能够在游戏结束后导航到正确的页面，因此已完成的条件检查是正确的。但是，对于游戏失败需要重新开始游戏的用户，定时器不会重置为初始值；例如计数器=10。意思是，当上一个游戏的 counter=0 尝试时，它仍然设置为 counter = 0，我明白这是因为我将它设置为 clearInterval(rollingInterval) ，因此它清除了计数器并且速度没有重置为0.00ms，但仍然显示之前的速度。

但是，我想问一下，当用户重新启动游戏时，我如何才能将计数器重置为 counter =10 以及将 speed = 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 -->

Answer 1

尝试在“游戏结束”时重置计数器 和速度 值？

}else if(counter==10&&speed<20){
     $("#page2").hide();
     $("#GameOver").show();
     counter=0; // make counter value equal to 0
     speed=0; // speed also
     clearInterval(rollingInterval)
}