如果用户赢得游戏，则停止倒计时

Question

我正在开发一款涉及倒数计时器的儿童游戏。如果用户在计时器用完之前匹配所有元素，则“你赢了！”弹出窗口出现。如果在计时器归零之前它们没有匹配所有元素，则会出现“对不起，你输了”弹出窗口。

我遇到的问题是，在用户赢得游戏并且“你赢了！”之后，时钟不会停止倒计时。弹出窗口出现，所以一旦计时器达到零，“对不起，你输了”弹出窗口仍然出现。

这是我的代码：

$("#startClock").click( function(){
   var timer;
   var counter = 4;
   var winner = 0;
   var done = true;

   $("#boat").draggable({
    revert: "invalid", containment: "#wrapper",
    start: function(event, ui){
        if(!done) return false;
    },
    stop: function(event, ui){
        if($(".correct").length == $(".drop").length){
            setTimeout(function(){
                $("<div title='You did it!'>You won!</div>").dialog();
            },500);
            var winner = 1;
        }
    }
    });

    if(!timer){
      timer = setInterval(function() {
         counter--;
         if (counter >= 0) {
           span = document.getElementById("count");
           span.innerHTML = counter;
         }
         if (counter === 0 && winner === 0) {
           $("<div title='Game Over'>Sorry, game over!</div>").dialog();
           clearInterval(counter);
         }
       }, 1000);
    }
});

View my demo game here.（点击右上角的“开始计时”。）感谢您的帮助。谢谢！

劳伦

Answer 1

您需要在 setTimeout 的引用上调用 clearInterval()。

var timer;
    $("#startClock").click( function(){
       var counter = 60;
       if(!timer){
          timer = setInterval(function() {
         counter--;
          if (counter >= 0) {
             span = document.getElementById("count");
             span.innerHTML = counter;
          }
          if (counter === 0) {
             $("Sorry, you lost!").dialog();
             clearInterval(timer);
           }
         }, 1000);
       }
    });

当用户赢得游戏时，还添加对 clearInterval(timer) 的调用，但首先检查是否定义了计时器。

Answer 2

我没有看到玩家获胜时的代码，但您需要在付款人获胜时明确停止计数器。 else if 可以解决这个问题。

Answer 3

完成此操作的最简单方法可能只是在您的第二个条件中添加&& 以检查玩家是否赢得了比赛。编辑 - 如果玩家赢了，还添加一个 else 来清除计时器。

if (counter === 0 && /*check if player has not won*/) {
  $("Sorry, you lost!").dialog();
  clearInterval(counter);
}
else if (/*if player has won*/) {
  clearInterval(counter);

这样，“对不起，你输了”消息只会在计时器用完并且他们还没有获胜时才会出现。如果您还没有这样做，您可以创建一个在玩家获胜时会发生变化的变量，并在上述条件的后半部分检查该变量的值。