2

私の数字ゲームでは、子供たちは「偶数」のような特定の質問に当てはまる数字のアイコンを 30 秒間撃つことができます。最近、おまけとして 2 つの時計アイコンを追加しました。青いものを撃つと 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指定された時間 (この場合は 1000ms) に基づいて自分自身を呼び出します。

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/pUwKb/1/）そして私はそれを機能させたと思います。if ループを次のように変更し、クロックの 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);
            }
        }
    });
于 2012-10-24T15:07:52.190 に答える
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 に答える