Question

在我的数字游戏中，孩子们有30秒的时间来拍摄数字图标，这些图标与“偶数”等特定问题相关。我最近添加了两个时钟图标作为奖励。当他们拍摄蓝色时它会增加3秒，而拍摄红色则会拍摄3秒钟。

目前时钟被认为是错误的，但我是因为下面的if语句。有没有办法将时钟合并到这个点击功能中，还是我必须开始一个新的？另外如何从计时器中添加并花费几秒钟？

    $(".character").click(function() {
    if ($(this).hasClass("wrong")) {
        $(this).effect("bounce", {
            times: 2,
            direction: 'left'
        }, 300, function() {
            $(this).slideUp("fast")
        });
        miss++;
        attempted++;
        $("#miss").html("Wrong: " + miss);
    } else {
        $(this).effect("explode", 300);
        hit++;
        attempted++;
        $("#hit").html("Right: " + hit);
    }
});
});

这是图标列表

<ul id="container">
    <li><div id="char1" class="character right" vaule="1"></div></li>
    <li><div id="char2" class="character right" vaule="2"></div></li>
    <li><div id="char3" class="character right" vaule="3"></div></li>
    <li><div id="char4" class="character right" vaule="4"></div></li>
    <li><div id="char5" class="character right" vaule="5"></div></li>
    <li><div id="char6" class="character right" vaule="6"></div></li>
    <li><div id="char7" class="character right" vaule="7"></div></li>
    <li><div id="char8" class="character right" vaule="8"></div></li>
    <li><div id="char9" class="character right" vaule="9"></div></li>
    <li><div id="char10" class="character right" vaule="0"></div></li>
    <li><div id="char11" class="character clock up"></div></li>
    <li><div id="char12" class="character clock down"></div></li>
</ul>

小提琴：http://jsfiddle.net/cFKHq/13/

Answer 1

您需要创建一个独立于动画的计时器事件。 setInterval将根据指定的时间量调用自身，在本例中为1000毫秒。

var timeLeft = 30;

var timer = setInterval(function() {
    timeLeft--;
    if(timeLeft<1) {
        clearTimeout(timer)        
        alert("finished");
        return;        
    }
    $('#time').html(timeLeft);
},1000)

function adjTime(amt) {
    timeLeft = timeLeft + amt
   if(timeLeft<1) {
        clearTimeout(timer)        
        alert("finished");
        return;
    }
    $('#time').html(timeLeft);
}

测试HTML：

<div id="time"></div>
<input type="button" onclick="adjTime(3)" value="Add 3 sec" />
<input type="button" onclick="adjTime(-3)" value="Subtract 3 sec" />

Answer 2

您可以将计时器计为全局计数器。

http://jsfiddle.net/mdc5X/

而不是计数，我将其声明为

var game = {
    count: 30,
}

并将count的每个实例修改为game.count

然后，你可以简单地做

game.count += 5 // to add time
game.count -+ 5 // to remove time

当然，这不安全（任何拥有控制台的人都可以输入game.count = 1000），但对于孩子的游戏来说应该没问题。

这样做的正确方法是私人会员。你可以在这里阅读更多相关信息：（http://www.crockford.com/javascript/private.html）

Answer 3

我玩过你的小提琴（分叉它：http://jsfiddle.net/pUwKb/1/），我想我已经成功了。如果循环到下面，我改变了它，如果点击其中一个时钟，它会改变全局计数变量。如果没有找到时钟，它只会去检查是对还是错。

$(".character").click(function() {
        if ($(this).hasClass("clock")) {
            if ($(this).hasClass("up")) {
                $(this).effect("explode", 300);
                count += 3;
            } else if ($(this).hasClass("down")) {
                $(this).effect("bounce", {
                    times: 2,
                    direction: 'left'
                }, 300, function() {
                    $(this).slideUp("fast")
                });
                count -= 3;
            }
            $('#timer').text(count);
        } else {
            if ($(this).hasClass("wrong")) {
                $(this).effect("bounce", {
                    times: 2,
                    direction: 'left'
                }, 300, function() {
                    $(this).slideUp("fast")
                });
                miss++;
                attempted++;
                $("#miss").html("Wrong: " + miss);
            } else {
                $(this).effect("explode", 300);
                hit++;
                attempted++;
                $("#hit").html("Right: " + hit);
            }
        }
    });

单击图标时向计时器添加秒

3 个答案: