javascript - 在 html5 canvas 中制作重力效果

Question

我试图在点击空格键时使用随机 x 和 y 改变 Canvas 内圆圈的位置，但我一直想弄清楚我应该如何实现重力效果，所以当圆圈改变它的位置时它会回来以平稳的方式降落到地面我的 jsfiddle:http://jsfiddle.net/seekpunk/efcnM/5/

我怎样才能修改我的更新功能来成功我的重力效果

function update() {
    $(window).keydown(function (e) {
        var spacebarHit = e.which == 32 || e.keyCode == 32 ? true : false;
        if (spacebarHit) {
             Bluecircle.y -=1;// RandomPos;
             Draw();
        }
    });
}

Answer 1

为什么不使用现实世界的运动方程？

if (spacebarHit) {
             var oldPos = Bluecircle.y;
             var u = 50;
             var g = 9.81;
             var t = 0;
             var handle = setInterval(function () {
                 t++;
                 Bluecircle.y = oldPos-(((u)*t-(g/2)*t*t));
                 console.log(Bluecircle.y);
                 if (Bluecircle.y>oldPos) {
                     Bluecircle.y = oldPos;
                     clearInterval(handle);
                 }
             }, 100);

             Draw();
         }

DEMO