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（计时器）的调用，但首先检查是否定义了计时器。

Answer 2

我没有看到玩家获胜的代码，但是当付款人获胜时你需要明确地停止计数器。如果其他的话就可以了。

Answer 3

实现此目的的最简单方法可能只是在第二个条件中添加&&来检查玩家是否赢得了比赛。编辑 - 如果玩家获胜，还可以添加其他清除计时器。

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

这样，只有在计时器用完且尚未获胜的情况下，才会显示“抱歉丢失”消息。如果你还没有这样做，你可以创建一个变量，如果玩家获胜则会改变，并在上述条件的后半部分检查该变量的值。

如果用户赢了游戏，则停止倒数计时器

3 个答案: