更改动画速度

Change animation speed

本文关键字：速度 动画      更新时间：2023-09-26

我正在创建一个新的"打鼹鼠"风格的游戏，孩子们必须根据问题打出正确的数字。到目前为止，进展非常顺利，我有一个计时器，计算正确和错误的答案，当游戏开始时，我有许多称为"字符"的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/

您的按钮不共享类"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);

您可以在此处找到工作演示。

我认为您要做的是根据游戏难度设置时间间隔。这就是我认为你可以让它工作的方式。

要进行的更改：

.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);
    }

根据需要设置时间间隔。

注意：这只是一个想法，它应该是什么样子。当然，您可以使其更高效，因为您比其他任何人都更了解您的代码。

在 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 中也是如此？

相关文章：