Question

我正在为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);
});

Answer 1

一般情况下，如果你想对重力加速度进行真实的“跳跃”模拟，你应该只是从最初向上的“跳跃”加速。这可以通过在第一帧（按下空间）时为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.

Answer 2

你可以让你的马里奥遵循二次曲线来呈现令人愉悦的跳跃。

演示：http://jsfiddle.net/m1erickson/qDQBh/

此函数在给定间隔值（T）在0.00和1.00之间时沿二次曲线返回XY。

T == 0位于曲线的起点 T == 1.00位于曲线的末端。

function getQuadraticBezierXYatT(startPt,controlPt,endPt,T) {
    var x = Math.pow(1-T,2) * startPt.x + 2 * (1-T) * T * controlPt.x + Math.pow(T,2) * endPt.x; 
    var y = Math.pow(1-T,2) * startPt.y + 2 * (1-T) * T * controlPt.y + Math.pow(T,2) * endPt.y; 
    return( {x:x,y:y} );
}

制作更流畅的跳跃动画

2 个答案: