logo标签列表

有没有一种方法可以修改正在运行的倒计时？

javascriptjqueryhtmlcss
5
我正在使用html、css、javascript和jQuery为学校组织的游戏Jam创建一个游戏。在这个游戏中，我正在使用一个倒计时（它运行良好），但是当我的角色被敌人攻击时，我想让它减少2秒钟。当倒计时达到0时，玩家就输了游戏。为此，我正在使用“jChavannes”的GitHub（链接在这里），它非常完整，但是即使“jchavannes”提供了很多工具来使用他的工作，我也找不到在运行时修改倒计时的方法。这里是我想让其正常工作的HTML代码，其中包含需要修改倒计时的按钮以及我用来使整个事情工作的JavaScript代码（有一个库缺失，但它太大了无法放在这里，你可以在Github上找到它）。是否有一种简单的方法来修改剩余时间，或者说它根本没有设计成可以在不停止和重置它的情况下进行修改？ 

var Example2 = new (function() {
    var $countdown,
        $form, // Form used to change the countdown time
        incrementTime = 70,
        currentTime = 30000,
        updateTimer = function() {
            $countdown.html(formatTime(currentTime));
            if (currentTime == 0) {
                Example2.Timer.stop();
                timerComplete();
                Example2.resetCountdown();
                return;
            }
            currentTime -= incrementTime / 10;
            if (currentTime < 0) currentTime = 0;
        },
        timerComplete = function() {
            alert('Example 2: Countdown timer complete!');
        },
        init = function() {
            $countdown = $('#countdown');
            Example2.Timer = $.timer(updateTimer, incrementTime, true);
            $form = $('#example2form');
            $form.bind('submit', function() {
                Example2.resetCountdown();
                return false;
            });
        };
    this.resetCountdown = function() {
        var newTime = parseInt($form.find('input[type=text]').val()) * 100;
        if (newTime > 0) {currentTime = newTime;}
        this.Timer.stop().once();
    };
    $(init);
});
//I tried to trigger some commands, in vain
$("#timerOnce5000").click(function(){
console.log("euh ouais ?");
$("#countdown").timer.once(5000);
});
$("#timerSetTime1000").click(function(){
    console.log("allô ?");
    $("#countdown").timer.set({time:1000});
});
$("#timerSetTime5000").click(function(){
    console.log("bonjour ?");
    $("#countdown").timer.set({time:5000});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Jason Chavannes" />
    <title>jQuery Timer Demo</title>

    <link rel="stylesheet" href="res/style.css" />
    <script type="text/javascript" src="res/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.timer.js"></script>
    <script type="text/javascript" src="res/demo.js"></script>
    </head> 
    <body>
    <h3>Example 2 - Countdown Timer</h3>
    <span id="countdown">05:00:00</span>
    <form id="example2form">
        <input type='button' value='Play/Pause' onclick='Example2.Timer.toggle();' />
        <input type='button' value='Stop/Reset' onclick='Example2.resetCountdown();' />
        <input type='text' name='startTime' value='300' style='width:30px;' />
    </form>

    <div class='example-four'>
        <input type='button' value='timer.reset()' onclick='timer.reset();' /><br/>
        <input type='button' value='timer.once()' onclick='timer.once();' /><br/>
        <input type='button' value='timer.once(5000)' id="timerOnce5000" onclick='timer.once(5000);' /><br/>
        <input type='button' value='timer.set({time:1000})' id ="timerSetTime1000" onclick='timer.set({time:1000});' /><br/>
        <input type='button' value='timer.set({time:5000})' id="timerSetTime5000" onclick='timer.set({time:5000});' />
    </div>
    <br/>

将 currentTime 从 var 移动到 this 上，或提供一些修改 currentTime 的方法。 - Paul S.
2个回答
3

如果您正在模拟“被敌人攻击”，请尝试以下方法：

var Example2 = new (function() {
...

...
  this.hitByEnemy() = function {
    currentTime = currentTime - 2000; //assuming milliseconds is units
  });
});

HTML:

<div class='example-four'>
   ...
   <input type='button' value='hit by enemy' onclick='Example2.hitByEnemy();' /><br/>
</div>
我没有想过在Example2函数内使用this.hitbyenemy，但我尝试了一下，它可以工作！非常感谢！！ - Jaeger
2
关于 Javascript 的一个很酷的事情（尽管有时可能有点危险）是，通常很容易修改共享变量/资源以影响代码的其他部分的行为。有些人不喜欢这样做，因为如果您的函数太过纠结会使调试变得困难。我个人认为，这在像你这样的有限场景中非常有用。 所以，我的方法就是编写一个函数，在您的玩家被击中时修改currentTime。 就像这样：
var $countdown,
    $form,
    // ... the other stuff you had in your provided code
    hitHandler = function() { // you'll need to call this when your player gets hit
      currentTime -= 2 * incrementTime;
      if (currentTime < 0) currentTime = 0;
    }

话虽如此，你也可以添加一个新变量来记录命中次数，并在定期间隔更新计时器时使用它。这将是“更清晰”的解决方案，但也有点啰嗦，如果您不想等待增量函数减少计时器，则可能不是您想要的。话虽如此，它看起来像：

  var $countdown,
      $form,
      // ...
      hits = 0
      hitHandler = function() {
        hits++;
      }
      updateTimer = function() {
        $countdown.html(formatTime(currentTime));
        if (currentTime == 0) {
            Example2.Timer.stop();
            timerComplete();
            Example2.resetCountdown();
            return;
        }
        currentTime -= incrementTime / 10;
        currentTime -= hits * (2 * incrementTime);
        hits = 0;
        if (currentTime < 0) currentTime = 0;
      }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接