jjzjj

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

coder 2025-01-06 原文

功能:

用户在游戏页面中玩基于时间的游戏。将有一个倒数计时器来跟踪游戏持续时间，因此，当计数器 =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 -->

最佳答案

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

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

关于javascript - 当 "game"重新启动时定时器没有重置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33731165/

javascriptamp34pxcountertimercountdown

有关javascript - 当 "game"重新启动时定时器没有重置的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  2. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  3. ruby - 难道Lua没有和Ruby的method_missing相媲美的东西吗？ - 2

    我好像记得Lua有类似Ruby的method_missing的东西。还是我记错了？ 最佳答案 表的metatable的__index和__newindex可以用于与Ruby的method_missing相同的效果。 关于ruby-难道Lua没有和Ruby的method_missing相媲美的东西吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/7732154/

  4. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  5. ruby-on-rails - rails 目前在重启后没有安装 - 2

    我有一个奇怪的问题:我在rvm上安装了ruby​​onrails。一切正常，我可以创建项目。但是在我输入“railsnew”时重新启动后，我有“程序'rails'当前未安装。”。SystemUbuntu12.04ruby-v"1.9.3p194"gemlistactionmailer(3.2.5)actionpack(3.2.5)activemodel(3.2.5)activerecord(3.2.5)activeresource(3.2.5)activesupport(3.2.5)arel(3.0.2)builder(3.0.0)bundler(1.1.4)coffee-rails(

  6. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  7. ruby-on-rails - active_admin 目录中的常量警告重新声明 - 2

    我正在使用active_admin，我在Rails3应用程序的应用程序中有一个目录管理，其中包含模型和页面的声明。时不时地我也有一个类，当那个类有一个常量时，就像这样:classFooBAR="bar"end然后，我在每个必须在我的Rails应用程序中重新加载一些代码的请求中收到此警告:/Users/pupeno/helloworld/app/admin/billing.rb:12:warning:alreadyinitializedconstantBAR知道发生了什么以及如何避免这些警告吗？ 最佳答案 在纯Ruby中:classA

  8. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  9. ruby-on-rails - 启动 Rails 服务器时 ImageMagick 的警告 - 2

    最近，当我启动我的Rails服务器时，我收到了一长串警告。虽然它不影响我的应用程序，但我想知道如何解决这些警告。我的估计是imagemagick以某种方式被调用了两次？当我在警告前后检查我的git日志时。我想知道如何解决这个问题。-bcrypt-ruby(3.1.2)-better_errors(1.0.1)+bcrypt(3.1.7)+bcrypt-ruby(3.1.5)-bcrypt(>=3.1.3)+better_errors(1.1.0)bcrypt和imagemagick有关系吗？/Users/rbchris/.rbenv/versions/2.0.0-p247/lib/ru

  10. ruby-on-rails - 迷你测试错误 : "NameError: uninitialized constant" - 2

    我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test

随机推荐