Question

我做了一个游戏，那里有一个球和一些块来阻止球落下。我使用setInterval方法对球进行引力

setInterval(function(){
ball.offset({top: ballMoveY += gravitation});
$("p").html(ballMoveX + '<br>' + ballMoveY + '<br><br>' + blokPos + '<br><br>' + gravitation);
if (ballMoveY > blok4Y+20){alert('game over'); return ballMoveY = 0; return ballMoveX = 0};
if ((ballMoveY == blok1Y && ballMoveX < blok1X && ballMoveX > 2) ||
    (ballMoveY == blok2Y && ballMoveX < blok2X && ballMoveX > 15) || 
    (ballMoveY == blok3Y && ballMoveX < blok3X && ballMoveX > 110) || 
    (ballMoveY == blok4Y && ballMoveX < blok4X && ballMoveX > 325)){

    return gravitation = 0; 
}
else {return gravitation = 5;};
}, 5);

但我不能让跳跃顺利。跳跃从顶点开始，而不是从底部开始然后向上然后下降。我使用空格键keyup来触发球跳，而箭头键则左右移动球。这是跳跃代码：

$(window).keyup(function(e){
    if (e.which === 32 && gravitation == 0){
        return gravitation -= 200;
    }
})

以下是完整代码https://jsfiddle.net/b2orwnrz/

Answer 1

重力基本上是速度变化的速度，因此为了模拟重力，您必须在系统中添加speed变量。此速度将根据gravity更改，speed将用于更改对象的position。跳跃是与重力相反方向的瞬时速度变化。

以这种方式工作将允许您创建平滑的跳转效果，但需要您修改其余代码。但是这样的事情会给你一些想法：

   $(document).ready(function () {

        var ball = $("#ball");
        ballPos = ball.position();
        ballMoveX = ballPos.left;
        ballMoveY = ballPos.top;
        gravitation = 3, speed = 0; //You declare speed as well as gravitation. Setting speed to 0 is the equivalent of dropping a ball without any force.

        var blok1 = $("#blok1").offset();
        blok1Y = blok1.top;
        blok1X = parseInt(blok1.left) + parseInt($("#blok1").css("width"));
        var blok2 = $("#blok2").offset();
        blok2Y = blok2.top;
        blok2X = parseInt(blok2.left) + parseInt($("#blok2").css("width"));
        var blok3 = $("#blok3").offset();
        blok3Y = blok3.top;
        blok3X = parseInt(blok3.left) + parseInt($("#blok3").css("width"));
        var blok4 = $("#blok4").offset();
        blok4Y = blok4.top;
        blok4X = parseInt(blok4.left) + parseInt($("#blok4").css("width"));

        blokPos = blok1Y + '<br>' + blok2Y + '<br>' + blok3Y + '<br>' + blok4Y + '<br>' + '<br>' + blok1X + '<br>' + blok2X + '<br>' + blok3X + '<br>' + blok4X;


        setInterval(function () {
            speed += gravitation; //The speed changes according to the gravitation. 
                                  //You can modulate the speed at which this rate changes by changing gravitation value. 
                                 //But if you want to stay close to reality, gravitation should be constant.
            ball.offset({
                top: ballMoveY += speed // The position changes according to speed. 
                                        //Speed is basically difference of position in time. 
                                        //Since this difference of time is taken care of with setInterval, 
                                        //you set difference of position directly with speed.
            });
            $("p").html(ballMoveX + '<br>' + ballMoveY + '<br><br>' + blokPos + '<br><br>' + speed);
            if (ballMoveY > blok4Y + 20) {
                alert('game over');
                return ballMoveY = 0;
                return ballMoveX = 0
            };
            //Since your position values are less precise than before you need 
            //to validate if they're greater than, not equal. 
            //You'll see that for now, this makes a strange effect of 
            //stopping the ball not exactly at the right place.
            if ((ballMoveY > blok1Y && ballMoveX < blok1X && ballMoveX > 2) || (ballMoveY > blok2Y && ballMoveX < blok2X && ballMoveX > 15) || (ballMoveY > blok3Y && ballMoveX < blok3X && ballMoveX > 110) || (ballMoveY > blok4Y && ballMoveX < blok4X && ballMoveX > 325)) {
                speed = 0; // IF ball is on block its speed gets back to 0
                gravitation = 0;// Here, normally it should stop movement, not change the gravity, 
                                //but this can be done this way. But if you were the refactorfurther, 
                                //you should clear the interval when the ball is stopped 
                                //and start it on keydown callback.
                return speed = 0;// Not sure you need to return anything...
            } else {
                return gravitation = 3;
            };
        }, 50);




        $(window).keydown(function (e) {
            if (e.which === 39) {
                ball.offset({
                    left: ballMoveX += 5
                });
            }
            if (e.which === 37) {
                ball.offset({
                    left: ballMoveX -= 5
                });
            }


        })

        $(window).keyup(function (e) {
            console.log(e.which, gravitation);
            if (e.which === 32 && gravitation == 0) {
                return  speed = -30;// That's where your jump happens. A jump is a force in up direction. 
                                    //A one time force will have the effect of changing the speed on one moment. 
                                    //Once the speed has changed, the gravitation continues to have 
                                    //an effect and makes the ball slow down, then fall.
            }
        })

    })

https://jsfiddle.net/3rfpL420/4/

Answer 2

您可以使用jQuery提供的animate函数，而不是尝试创建自己的函数：

$('#ball').animate({'bottom':20}, bouncetime, 'easeInQuad');

我在这里创建了一个例子： http://jsfiddle.net/xtggqcg5/1/

对于缓动，我使用的是通过jQuery UI可用的easeInQuad，但是你可以添加自己的缓动函数。

Jquery，如何制作平滑的动画？

2 个答案: