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

这将导致玩家不断想要向下（重力）并且你增加velocityY来反击在跳跃期间这样做。你现在想要设置一些界限来避免角色离开屏幕，例如：

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

这种方法的另一个好处是它可以处理您可能计划的任何跌落，包括以后。

试图在canvas / JS中设置跳转动画

1 个答案: