javascript - 球与球弹性碰撞 : ball bounces in an unequal proportion

标签 javascript html html5-canvas collision-detection

我一直在开发一款需要球与球碰撞的游戏,但我似乎找不到任何解决这个问题的方法,我几乎遇到了碰撞,因为球正朝着正确的方向前进,但速度却困惑了.

一旦球互相撞击,水平方向 (x) 会非常用力地弹开,而垂直方向 (y) 则会非常柔和地弹开。我不知道造成这种情况的原因是什么,我尝试通过除法来降低 x 速度,但这意味着它不会与 y 值成比例。

这是我的碰撞代码:

function resolveCollision(b1, b2){
    var dot = function(v1, v2) {
        return v1.x * v2.x + v1.y * v2.y;
    };
    v1x = b1.vx/2
    v2x = b2.vx/2
    v1y = b1.vy
    v2y = b2.vy
    var length = function(v) {
        return Math.sqrt(v.x * v.x + v.y * v.y);
    };

    var delta = {x: b1.x - b2.x, 
                 y: b1.y - b2.y};
    var d = Math.sqrt((delta.x * delta.x) + (delta.y * delta.y));
    var dn = {x: delta.x / d,
              y: delta.y / d}

    var dt = {x: dn.y,
              y: -dn.x};
    if (d === 0){
        b2.x += 0.01;    
    }
    var m1 = b1.m;
    var m2 = b2.m;
    var M = m1 + m2;

    var mt = {x: dn.x * (b1.r + b2.r - d),
              y: dn.y * (b1.r + b2.r - d)};

    b1.x = b1.x + mt.x * m2 / M
    b1.y = b1.y + mt.y * m2 / M
    b2.x = b2.x + mt.x * m1 / M
    b2.y = b2.y + mt.y * m1 / M

    var v1 = {x: v1x, y: v1y};
    var v2 = {x: v2x, y: v2y};

    var v1n = {
        x: dn.x * (v1.x * v1.x + dn.y * dn.y),
        y: dn.y * (v1.x * v1.x + dn.y * dn.y)
    };

    var v1t = {
        x: dt.x * (v1.x * v1.x + dt.y * dt.y),
        y: dt.y * (v1.x * v1.x + dt.y * dt.y)
    };

    var v2n = {
        x: dn.x * (v2.x * v2.x + dn.y * dn.y),
        y: dn.y * (v2.x * v2.x + dn.y * dn.y)
    };

    var v2t = {
        x: dt.x * (v2.x * v2.x + dt.y * dt.y),
        y: dt.y * (v2.x * v2.x + dt.y * dt.y)
    };

    b1.velocity = {
        x: v1t.x + dn.x * ((m1 - m2) / M * length(v1n) + 2 * m2 / M * length(v2n)),
        y: v1t.y + dn.y * ((m1 - m2) / M * length(v1n) + 2 * m2 / M * length(v2n))
    };
    b2.velocity = {
        x: v2t.x - dn.x * ((m2 - m1) / M * length(v2n) + 2 * m1 / M * length(v1n)),
        y: v2t.y - dn.y * ((m2 - m1) / M * length(v2n) + 2 * m1 / M * length(v1n))
    };
    b1.vx = b1.velocity.x;
    b1.vy = b1.velocity.y;
    b2.vx = b2.velocity.x;
    b2.vy = b2.velocity.y;
}    

另外,如果有人能告诉我如何让球员(圆圈)将球推得更远而不反弹,那就太好了。

如果有人想看的话,这是文件,所有内容都在 app.js 中: https://www.mediafire.com/?d6dpqn1cmwzp756

对于那些无法理解我想要实现的目标的人,这就是我想要复制的:http://www.haxball.com

最佳答案

1)您应该澄清您的代码,因为它本身有点复杂,这本身就是一个错误源。
2)你正在用 v1n/t v2n/t 做一些奇怪的事情:投影+平方X上的速度......???我什至没有尝试理解 b1.velocity 代码。哎哟! :-)

因此,您的代码进行了一些简化:它未经测试,但希望能帮助您解决问题:

function resolveCollision(b1, b2) {
    var v1x = b1.vx,
        v2x = b2.vx,
        v1y = b1.vy,
        v2y = b2.vy;

    // Collision vector
    var delta = {
        x: b2.x - b1.x,
        y: b2.y - b1.y
    };
    var d = length(delta);

    // Normalized collision vector
    var dn = {
        x: delta.x / d,
        y: delta.y / d
    }

    // Normalized tangent collision vector
    var dt = {
        x: dn.y,
        y: -dn.x
    };

    var m1 = b1.m;
    var m2 = b2.m;
    var M = m1 + m2;

    /*    
    // test those separation tricks in a second time
    if (d === 0) {
        b2.x += 0.01;
    }
    var mt = {
        x: dn.x * (b1.r + b2.r - d),
        y: dn.y * (b1.r + b2.r - d)
    };    
    b1.x = b1.x + mt.x * m2 / M
    b1.y = b1.y + mt.y * m2 / M
    b2.x = b2.x + mt.x * m1 / M
    b2.y = b2.y + mt.y * m1 / M
    */

    // projection of v1 on the collision vector
    var v1Proj = {
        n: dn.x * v1x + dn.y * v1y,
        t: dt.x * v1x + dt.y * v1y
    };

    // projection of v2 on the collision vector
    var v2Proj = {
        n: dn.x * v2x + dn.y * v1y,
        t: dt.y * v2x + dt.y * v2y
    };

    // solving collision on the normal
    var newV1ProjN = ((m1 - m2) * v1Proj.n + 2 * m2 * v2Proj.n) / M;
    var newV2ProjN = ((m2 - m1)* v2Proj.n + 2 * m1 * v1Proj.n) / M;

    // re-building speed vector out of projected vectors
    b1.vx = newV1ProjN * dn.x + v1Proj.t * dt.x;
    b1.vy = newV1ProjN * dn.y + v1Proj.t * dt.y;

    b2.vx = newV2ProjN * dn.x + v2Proj.t * dt.x;
    b2.vy = newV2ProjN * dn.y + v2Proj.t * dt.y;
}

function dot(v1, v2) {
    return v1.x * v2.x + v1.y * v2.y;
};

function length(v) {
    return Math.sqrt(v.x * v.x + v.y * v.y);
};

关于javascript - 球与球弹性碰撞 : ball bounces in an unequal proportion,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27014918/

相关文章:

javascript - 传递给生成器时对象和数组解构复杂化

html - 列表样式位置 : outside not working HTML CSS

html - CSS 全宽背景与 float 元素对齐

javascript - 将线捕捉到指定距离

javascript - context.drawImage 行为异常

javascript - 查找图像中的十六进制颜色和 X,Y

javascript - 改变子组件的状态

javascript - Ember.js - 查询参数删除 "+"字符并添加空格字符

javascript - 重新加载页面后调用js函数

php - 如何在php中匹配两行mysql同一个表