javascript - キャンバス/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％間違っていると確信しています）