改变动画速度

Question

我正在创造一种新的"打鼹鼠"风格的游戏,孩子们必须根据问题打出正确的数字.到目前为止它真的很顺利,我有一个计时器,计算正确和错误的答案,当游戏开始时,我有一些称为"字符"的div,它们在设定的时间随机出现在容器中.

我已经拿走了"播放"按钮并用"简单","中等"和"硬"取而代之.单击模式时,我希望速度发生变化.三个按钮共享"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/

Answer 1

你的按钮不共享类'game_ettings',它们在div中有一个'game_settings'类,所以游戏也会在你点击按钮之间启动.像这样修改它:

// remove this line
$(".game_settings").find('input').click(

// replace it with...
var AnimationSpeed = 6000;

$(".game_settings").find('input').click(function () {
        // here you could set a different timer value for each variant
        // or simply send the classname to startplay and handle the
        // settings there.
        switch($(this).attr('class')) {
          case 'easy':
            AnimationSpeed = 6000;
            break;
          case 'medium':
            AnimationSpeed = 3000;
            break;
          case 'hard':
            AnimationSpeed = 1000;
            break;
        }
        startplay();
 });

在您的计时器功能中删除该行:

$("#btnstart").bind("click", startplay);

在你的函数moveRandom中你使用AnitmationSpeed:

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

你在这里找到一个工作演示.