2

在我的数字游戏中，孩子们有 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/

4

3 回答 3

3

您需要创建一个独立于动画的计时器事件。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" />
于 2012-10-24T14:52:43.880 回答
1

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

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)

于 2012-10-24T15:01:05.343 回答
1

我玩过你的小提琴（分叉：http: //jsfiddle.net/pUwKb/1/），我想我让它工作了。我将 if 循环更改为以下内容，如果单击其中一个时钟，它会更改全局计数变量。如果没有找到时钟，它只会检查正确或错误。

$(".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);
            }
        }
    });
于 2012-10-24T15:07:52.190 回答