个人中心
gpt4 book ai didi

Javascript 冲突不起作用

转载 作者：行者123 更新时间：2023-12-03 23:42:52 26 4
gpt4 key购买 nike

出于某种原因，我的代码无法正常工作。这应该是一个碰撞模拟，但球只是粘在一起，我似乎无法弄清楚为什么。我一直在使用 https://en.wikipedia.org/wiki/Elastic_collision#Two-dimensional_collision_with_two_moving_objects 中的方程式据我所知，我已经完美地复制了它，我什至添加了括号以确保操作顺序正确，但仍然没有成功

这是我的代码:

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

function Ball(){
    this.pos = {
        "x": Math.random() * canvas.width,
        "y": Math.random() * canvas.height
    };
    this.vel = {
        "x": Math.random() - 0.5,
        "y": Math.random() - 0.5
    };
    this.r = 16;
    this.colliding = false;
    this.m = 1;
}

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

function dir(v){
    return Math.atan2(v.y, v.x);
}

function dist(a, b){
    var dx = b.x - a.x,
        dy = b.y - a.y;
    return Math.sqrt(dx * dx + dy * dy);
}

var balls = [];
for(var i = 0; i < 10; i++){
    balls.push(new Ball());
}

setInterval(function(){
    for(var i = 0; i < balls.length; i++){
        balls[i].pos.x += balls[i].vel.x;
        balls[i].pos.y += balls[i].vel.y;

        if(balls[i].pos.x + balls[i].r > canvas.width){
            balls[i].pos.x = canvas.width - balls[i].r;
            balls[i].vel.x *= -1;
        }
        if(balls[i].pos.x < balls[i].r){
            balls[i].pos.x = balls[i].r;
            balls[i].vel.x *= -1;
        }
        if(balls[i].pos.y + balls[i].r > canvas.height){
            balls[i].pos.y = canvas.height - balls[i].r;
            balls[i].vel.y *= -1;
        }
        if(balls[i].pos.y < balls[i].r){
            balls[i].pos.y = balls[i].r;
            balls[i].vel.y *= -1;
        }

        balls[i].colliding = false;
    }

    for(var i = 0; i < balls.length; i++){
        for(var j = i + 1; j < balls.length; j++){
            if(mag(balls[i].vel) < 0){
                break;
            }

            if(dist(balls[i].pos, balls[j].pos) < balls[i].r + balls[j].r){
                balls[i].colliding = true;

                var contact = Math.atan2(balls[j].pos.y - balls[i].pos.y, balls[j].pos.x - balls[i].pos.x);

                balls[i].vel.x = ((((mag(balls[i].vel) * Math.cos(dir(balls[i].vel) - contact) * (balls[i].m - balls[j].m)) + (2 * balls[j].m * mag(balls[j].vel) * Math.cos(dir(balls[j].vel) - contact))) / (balls[i].m + balls[j].m)) * Math.cos(contact)) + (mag(balls[i].vel) * Math.sin(dir(balls[i].vel) - contact) * Math.cos(contact + (Math.PI / 2)));
                balls[i].vel.y = ((((mag(balls[i].vel) * Math.cos(dir(balls[i].vel) - contact) * (balls[i].m - balls[j].m)) + (2 * balls[j].m * mag(balls[j].vel) * Math.cos(dir(balls[j].vel) - contact))) / (balls[i].m + balls[j].m)) * Math.sin(contact)) + (mag(balls[i].vel) * Math.sin(dir(balls[i].vel) - contact) * Math.sin(contact + (Math.PI / 2)));

                balls[j].vel.x = ((((mag(balls[j].vel) * Math.cos(dir(balls[j].vel) - contact) * (balls[j].m - balls[i].m)) + (2 * balls[i].m * mag(balls[i].vel) * Math.cos(dir(balls[i].vel) - contact))) / (balls[j].m + balls[i].m)) * Math.cos(contact)) + (mag(balls[j].vel) * Math.sin(dir(balls[j].vel) - contact) * Math.cos(contact + (Math.PI / 2)));
                balls[j].vel.y = ((((mag(balls[j].vel) * Math.cos(dir(balls[j].vel) - contact) * (balls[j].m - balls[i].m)) + (2 * balls[i].m * mag(balls[i].vel) * Math.cos(dir(balls[i].vel) - contact))) / (balls[j].m + balls[i].m)) * Math.sin(contact)) + (mag(balls[j].vel) * Math.sin(dir(balls[j].vel) - contact) * Math.sin(contact + (Math.PI / 2)));
            }
        }
    }

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for(var i = 0; i < balls.length; i++){
        ctx.beginPath();

        if(balls[i].colliding){
            ctx.fillStyle = "#f00";
        }else{
            ctx.fillStyle = "#0f0";
        }


        ctx.arc(balls[i].pos.x, balls[i].pos.y, balls[i].r, 0, 2 * Math.PI);
        ctx.fill();
    }
}, 16);
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <canvas id="canvas" width="640" height="480"></canvas>
        <script src="main.js"></script>
    </body>
</html>

最佳答案

首先，我在碰撞时颠倒了球 j 的新 velX 和 velY，您的碰撞系统似乎工作正常。然而，如果你仔细观察，你会发现它们像你提到的那样被卡住了，那是因为球每刻可以移动超过一个像素，导致球在另一个像素内移动，因此碰撞将不断尝试直到它们不在里面。为防止出现这种情况，如果距离小于组合半径，您需要调整 velX 和 velY。

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

function Ball(){
    this.pos = {
        "x": Math.random() * canvas.width,
        "y": Math.random() * canvas.height
    };
    this.vel = {
        "x": Math.random() - 0.5,
        "y": Math.random() - 0.5
    };
    this.r = 16;
    this.colliding = false;
    this.m = 1;
}

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

function dir(v){
    return Math.atan2(v.y, v.x);
}

function dist(a, b){
    var dx = b.x - a.x,
        dy = b.y - a.y;
    return Math.sqrt(dx * dx + dy * dy);
}

var balls = [];
for(var i = 0; i < 10; i++){
    balls.push(new Ball());
}

setInterval(function(){
    for(var i = 0; i < balls.length; i++){
        balls[i].pos.x += balls[i].vel.x;
        balls[i].pos.y += balls[i].vel.y;

        if(balls[i].pos.x + balls[i].r > canvas.width){
            balls[i].pos.x = canvas.width - balls[i].r;
            balls[i].vel.x *= -1;
        }
        if(balls[i].pos.x < balls[i].r){
            balls[i].pos.x = balls[i].r;
            balls[i].vel.x *= -1;
        }
        if(balls[i].pos.y + balls[i].r > canvas.height){
            balls[i].pos.y = canvas.height - balls[i].r;
            balls[i].vel.y *= -1;
        }
        if(balls[i].pos.y < balls[i].r){
            balls[i].pos.y = balls[i].r;
            balls[i].vel.y *= -1;
        }

        balls[i].colliding = false;
    }

    for(var i = 0; i < balls.length; i++){
        for(var j = i + 1; j < balls.length; j++){
            if(mag(balls[i].vel) < 0){
                break;
            }

            if(dist(balls[i].pos, balls[j].pos) < balls[i].r + balls[j].r){
                balls[i].colliding = true;

                var contact = Math.atan2(balls[j].pos.y - balls[i].pos.y, balls[j].pos.x - balls[i].pos.x);

                balls[i].vel.x = ((((mag(balls[i].vel) * Math.cos(dir(balls[i].vel) - contact) * (balls[i].m - balls[j].m)) + (2 * balls[j].m * mag(balls[j].vel) * Math.cos(dir(balls[j].vel) - contact))) / (balls[i].m + balls[j].m)) * Math.cos(contact)) + (mag(balls[i].vel) * Math.sin(dir(balls[i].vel) - contact) * Math.cos(contact + (Math.PI / 2)));
                balls[i].vel.y = ((((mag(balls[i].vel) * Math.cos(dir(balls[i].vel) - contact) * (balls[i].m - balls[j].m)) + (2 * balls[j].m * mag(balls[j].vel) * Math.cos(dir(balls[j].vel) - contact))) / (balls[i].m + balls[j].m)) * Math.sin(contact)) + (mag(balls[i].vel) * Math.sin(dir(balls[i].vel) - contact) * Math.sin(contact + (Math.PI / 2)));

                balls[j].vel.x = -((((mag(balls[j].vel) * Math.cos(dir(balls[j].vel) - contact) * (balls[j].m - balls[i].m)) + (2 * balls[i].m * mag(balls[i].vel) * Math.cos(dir(balls[i].vel) - contact))) / (balls[j].m + balls[i].m)) * Math.cos(contact)) + (mag(balls[j].vel) * Math.sin(dir(balls[j].vel) - contact) * Math.cos(contact + (Math.PI / 2)));
                balls[j].vel.y = -((((mag(balls[j].vel) * Math.cos(dir(balls[j].vel) - contact) * (balls[j].m - balls[i].m)) + (2 * balls[i].m * mag(balls[i].vel) * Math.cos(dir(balls[i].vel) - contact))) / (balls[j].m + balls[i].m)) * Math.sin(contact)) + (mag(balls[j].vel) * Math.sin(dir(balls[j].vel) - contact) * Math.sin(contact + (Math.PI / 2)));
            }
        }
    }

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for(var i = 0; i < balls.length; i++){
        ctx.beginPath();

        if(balls[i].colliding){
            ctx.fillStyle = "#f00";
        }else{
            ctx.fillStyle = "#0f0";
        }


        ctx.arc(balls[i].pos.x, balls[i].pos.y, balls[i].r, 0, 2 * Math.PI);
        ctx.fill();
    }
}, 16);
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <canvas id="canvas" width="640" height="480"></canvas>
        <script src="main.js"></script>
    </body>
</html>

关于Javascript 冲突不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46446149/

26 4 0
文章推荐： device-emulation - 如何从gameboy解码任天堂标志？
文章推荐： AngularJS $http 缓存过期时间
文章推荐： google-chrome - Chrome 自动播放政策 - Chrome 76
文章推荐： emacs - 在 org-mode 下，如何使代码块默认折叠？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com