尝试动画画布/ JS中的跳转

Question

我只是想为画布上的跳跃设置动画，但我认为我没有正确地获得数学公式，而不是进行正弦波式的运动，它只是瞬间移动，没有动画，任何帮助将非常感谢。

var ctx = new CtxScene(500, 500, '1px solid black').create()
  , player = {
    x: 0,
        y: 0,
        moving: false,
        dir: undefined
  };



var i = 0;
(function draw() {
    setTimeout(function() {  
    requestAnimationFrame(draw);
        checkDir();
        update();
    }, 1000 / 60);
})();

document.onkeydown = function(e) {
    if (e.which === 37) {
        player.moving = true;
        player.dir = 'left';
    } 
    if (e.which === 39) {
        player.moving = true;
        player.dir = 'right';
    }
    if (e.which === 38) {
        player.moving = true;
        player.dir = 'up';
    }
    if (e.which === 40) {
        player.moving = true;
        player.dir = 'down';
    }
    if (e.which === 32) {
        player.moving = true;
        player.dir = 'jump';
    }
   console.log(e.which);    
}

document.onkeyup = function(e) {
    player.moving = false;
}

function update() {
    ctx.clearRect(0, 0, 500, 500);
    ctx.fillStyle = '#00A';
    ctx.fillRect(player.x, player.y, 100, 100)
}

function checkDir() {

    if (player.moving) {

        if (player.dir === 'left') {
            player.x  -=5;
        } else if (player.dir === 'right') {
            player.x += 5;
        } else if (player.dir === 'up') {
            player.y -= 5;
        } else if (player.dir === 'down') {
            player.y += 5;
        } else if (player.dir === 'jump') {
            player.y = 100 * Math.sin(5*Math.PI/200);
        }
    }

}

数学是从底部算起的几行（我几乎100％确信这是错误的）

Answer 1

好的，最简单的方法是使用物理学，真的是基础物理学。 给您的角色一个重力，至少在Y方向上给它一个速度，类似于：

player.gravity= 0.92;

var characterUpdate= function(){
    player.y+=player.velocityY;
    player.velocityY+=player.gravity;
}

这将导致玩家不断想向下运动（重力），您增加了速度Y以在跳跃过程中对此进行反击。 您需要设置一些边界，以防止角色暂时离开屏幕，例如：

if (player.y+player.height >= ctx.height) {
    player.y=ctx.height-player.height;
}

这种方法的另一个好处是，它可以照顾您将来可能要跌倒的任何地方。