Question

我正试图在击中空格键时使用随机x和y更改画布内的圆圈位置，但我仍然想知道如何实现重力效果，所以当圆圈改变它的位置时它会回来以平稳的方式倒在地上我的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

Answer 2

使用牛顿积分：

function mainLoop(dt) {
    circle.acc.x = 0
    circle.acc.y = 9.81 // positive is down

    circle.vel.x += circle.acc.x * t
    circle.vel.y += circle.acc.y * t

    circle.pos.x += circle.vel.x * t
    circle.pos.y += circle.vel.y * t

    // check if the bottom of the screen has been hit, and
    // clamp circle.poa to he within the world

    // do bounces by flipping the sign of components of circle.vel
}

function jump() {
    circle.vy = -20; // or something
}

在html5画布中制作重力效果

2 个答案: