javascript - Change animation speed - Stack Overflow

admin管理员组

文章数量:1401193

I am creating a new "whack-a-mole" style game where the children have to hit the correct numbers in accordance to the question. So far it is going really well, I have a timer, count the right and wrong answers and when the game is started I have a number of divs called "characters" that appear in the container randomly at set times.

I have taken away the "play" button and have replaced it with "easy", "medium" and "hard". When a mode is clicked I want the speed to change. The three button share the class "game_settings"

Here is the code that makes deals with the animation

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

How would I make it so that these settings change in accordance the the difficulty pressed at the beginning?

Fiddle: /

I am creating a new "whack-a-mole" style game where the children have to hit the correct numbers in accordance to the question. So far it is going really well, I have a timer, count the right and wrong answers and when the game is started I have a number of divs called "characters" that appear in the container randomly at set times.

I have taken away the "play" button and have replaced it with "easy", "medium" and "hard". When a mode is clicked I want the speed to change. The three button share the class "game_settings"

Here is the code that makes deals with the animation

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

How would I make it so that these settings change in accordance the the difficulty pressed at the beginning?

Fiddle: http://jsfiddle/pUwKb/53/

• javascript
• jquery

Share Improve this question Follow asked Jan 28, 2013 at 9:22 Milo-JMilo-J 1,10822 gold badges1313 silver badges2626 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Your buttons do not share the class 'game_ettings', they are inside the div with a class 'game_settings', so the game starts also in case you click between the buttons. modify it like this:

// 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();
 });

In your timer function remove the line:

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

And in your function moveRandom you use the AnitmationSpeed:

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

You find a working demo here.

What I think you want to do is set the timeInterval according to the game difficulty. This is how I think you might get it to work.

Changes to be made:

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>

Sript:

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

Set the time intervals as you like.

Note: This is just an idea what it should be like. You can ofcourse make it more efficient as you know your code better that anyone else.

In DotNet you need to "stop" the storyboard and restart with speed modification.

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

Perhaps it is the same in JavaScript?

本文标签： javascriptChange animation speedStack Overflow