Попытка оживить прыжок в холсте/JS

Question

Я просто пытаюсь оживить скачок в холсте, но я не думаю, что правильно получил математическую формулу, вместо того, чтобы делать синусоидальное движение, это просто мгновенно telports, без анимации, любая помощь будет большой благодарностью.

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

Дополнительным преимуществом этого метода является то, что он берет на себя каких-либо падает вы можете планировать включая позже.