12

私は、子供たちが質問に従って正しい数字を打たなければならない新しい「もぐらたたき」スタイルのゲームを作成しています。タイマーがあり、正解と不正解を数え、ゲームが開始されると、設定された時間にコンテナにランダムに表示される「キャラクター」と呼ばれる多数の div があります。

「再生」ボタンをなくし、「かんたん」「中」「むずかしい」に置き換えました。モードをクリックすると、速度が変わります。3 つのボタンは、クラス「game_settings」を共有します

アニメーションを扱うコードは次のとおりです

function randomFromTo(from, to) {
    return Math.floor(Math.random() * (to - from + 1) + from);
}

function scramble() {
    var children = $('#container').children();
    var randomId = randomFromTo(1, children.length);
    moveRandom("char" + randomId);
}

var currentMoving = [];

function moveRandom(id) {
    // If this one's already animating, skip it
    if ($.inArray(id, currentMoving) !== -1) {
        return;
    }

    // Mark this one as animating
    currentMoving.push(id);

    var cPos = $('#container').offset();
    var cHeight = $('#container').height();
    var cWidth = $('#container').width();
    var bWidth = $('#' + id).width();

    var bHeight = $('#' + id).css('top', '395px').fadeIn(100).animate({
        'top': '-55px'
    }, 6000).fadeOut(100);

    maxWidth = cPos.left + cWidth - bWidth;
    minWidth = cPos.left;
    newWidth = randomFromTo(minWidth, maxWidth);

    $('#' + id).css({
        left: newWidth
    }).fadeIn(1000, function () {
        setTimeout(function () {
            $('#' + id).fadeOut(1000);

            // Mark this as no longer animating                
            var ix = $.inArray(id, currentMoving);
            if (ix !== -1) {
                currentMoving.splice(ix, 1);
            }
            window.cont++;
        }, 1000);
    });
}

最初に押された難易度に応じてこれらの設定が変化するようにするにはどうすればよいですか?

フィドル: http://jsfiddle.net/pUwKb/53/

4

3 に答える 3

1

あなたがやりたいと思うのは、ゲームの難易度に応じて timeInterval を設定することです。これは、あなたがそれを機能させることができると私が思う方法です。

行うべき変更:

html:

//Change
<div class="game_settings">
    <div><input class="easy" type="button" value="Easy"></div>
    <div><input class="medium" type="button" value="Medium"></div>
    <div><input class="hard" type="button" value="Hard"></div>
</div>

//To
<div class="game_settings">
    <div><input class="game-speed" id="easy" type="button" value="Easy"></div>
    <div><input class="game-speed" id="medium" type="button" value="Medium"></div>
    <div><input class="game-speed" id="hard" type="button" value="Hard"></div>
</div>

スリップ:

//Change
$(".game_settings").click(function () {
    startplay();
});

//To
$(".game-speed").click(function () {
    startplay($(this).attr('id'));
});


//Change in startPlay()
   startPlay()

   play = setInterval(function () {
        if (window.cont) {
            window.cont--;
            scramble();
        }
    }, 500);



//To
    startplay(speed_check)  // As it is now expecting a variable

    if(speed_check == 'easy'){
        play = setInterval(function () {
            if (window.cont) {
                window.cont--;
                scramble();
            }
        }, 2000);
    }
    else if(speed_check == 'medium'){
        play = setInterval(function () {
            if (window.cont) {
                window.cont--;
                scramble();
            }
        }, 1000);
    }
    else if(speed_check == 'hard'){
        play = setInterval(function () {
            if (window.cont) {
                window.cont--;
                scramble();
            }
        }, 400);
    }
    else{
        play = setInterval(function () {
            if (window.cont) {
                window.cont--;
                scramble();
            }
        }, 1000);
    }

時間間隔はお好みで設定してください。

注: これは、どうあるべきかという単なるアイデアです。もちろん、コードを他の誰よりもよく知っているので、より効率的にすることができます。

于 2013-02-01T07:48:26.213 に答える
-4

DotNet では、ストーリーボードを「停止」し、速度を変更して再起動する必要があります。

Dim sb as Storyboard = ctype(Me.FindRessources("Storyboard1"), Storyboard)
sb.Stop
Select Case Level
  Case "easy": sb.SpeedRatio = 0.75
  Case "medium": sb.SpeedRatio = 1
  Case "hard": sb.SpeedRatio = 2.0
End Select

sb.Begin

おそらくJavaScriptでも同じでしょうか？

于 2013-01-30T15:54:38.050 に答える