尝试在canvas / JS中动画一个跳跃

Trying to animate a jump in canvas / JS

本文关键字：跳跃 一个 动画 canvas JS      更新时间：2023-09-26

我只是想在画布上动画一个跳跃，但我不认为我得到了正确的数学公式，而不是做一个正弦波的运动，它只是瞬间传送，没有动画，任何帮助将是伟大的感谢。

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%肯定它是错误的)

最简单的方法就是使用物理，非常非常基础的物理。给你的角色一个重力和至少一个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;
}
这个方法的额外好处是，它可以照顾到您可能计划在以后包括的任何跌倒。
相关文章：