javascript - 制作更流畅的跳转动画

我正在JSFiddle上做一个小项目，只是为了好玩。我的灵感来自一个简单的马里奥游戏。但是，我只是在使球前后移动并跳跃。

初始代码正在运行。但是我无法实现的是平滑的跳跃。
可以see here，当您击中空间（使球跳动）并向左移动时，该跳动看起来并不像是真正的物理。它使三角形像跳跃，而不是像半圆一样平滑。我的跳转代码是：

var top = false;
kd.SPACE.up(function () {
    var gravity = 0.3;
    var jump = setInterval(function () {
        cc();
        if (top) {
            y += yv;
            yv -= gravity;
            if (y + r > height) {
                y = height - r;
                clearInterval(jump);
                top = false;
            }
        } else {
            y -= yv;
            yv += gravity;
            if (y < height - 60) {
                top = true;
            }
        }
        circle(x, y, r);
    }, 1000 / 30);
});

最佳答案

通常，如果要针对重力加速度对现实的“跳跃”建模，则应该仅从“跳跃”开始沿最初的向上方向加速。可以通过在第一帧（按空格键时）向y速度添加固定值来建模。此后，只需从每帧的y速度中减去重力即可。

kd.SPACE.up(function () {
    var gravity = 0.3;
    yv -= 8;   // or whatever your jump accel. should be
               // you could also just assign this value to yv which is a different effect
    var jump = setInterval(function() {
        cc();
        if (y + r < height) {
            y += yv;
            yv += gravity;
        } else {
            y = height - r;
            clearInterval(jump);
        }
        circle(x,y,r);
     }, 1000 / 30);
});

这个小提琴或我的浏览器有些奇怪，但是here it is I think.