試圖在canvas上動畫跳轉/ 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; 
} 

這種方法的好處是，它需要照顧的任何降臨，你可能會在以後包括計劃。