javascript - 嘿，我想用canvas和js制作这个小程序来检测圆圈之间的碰撞-6ren

javascript - 嘿，我想用canvas和js制作这个小程序来检测圆圈之间的碰撞

转载作者：行者123 更新时间：2023-12-02 21:10:43

我正在学习 Canvas 并使用 JS 在其上渲染内容，并且我正在尝试制作一个简单的碰撞检测程序，这使得碰撞中涉及的 cricles 变成某种颜色。到目前为止..它有点工作，这只是意味着它不起作用:我有时只看到随机的圆圈变成绿色，而不是真正发生碰撞的圆圈。

所以我想把这个贴在这里，让你们看一下，看看能找到什么。提前谢谢!

我相信问题出在“碰撞”函数中，但我不太明白它是什么。

顺便说一句，我也愿意接受有关改进此代码的建议。

这是 html 和 css

<html lang="es">
    <head>
        <link rel="stylesheet" href="index.css">
        <meta charset="utf-8">
        <title>bubbles</title>
    </head>
    <body>

        <p id="fpsIndicator"></p>

        <canvas id="cnv"></canvas>    


    </body>


    <footer>
        <script src="Circle.js"></script>
        <script src="index.js"></script>
    </footer>

</html>

#cnv{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /*background-color: blue;*/
}

这是主 JS 文件和 Circle 类

let fpsInd = document.getElementById("fpsIndicator");
let canvas = document.getElementById("cnv");
let ctx = canvas.getContext("2d");

let frames = 0;
let fps = 0;
let lastCallTime;

let bubbles = 35;
let arrBubbles = [];

const RADIAE = 50;
const COLLISION_COLOR = "green";

adjustCanvas();
window.addEventListener("resize", adjustCanvas);





for(let i = 0; i < bubbles; i++){

    let x = randomInteger(RADIAE, canvas.width-RADIAE);
    let y = randomInteger(RADIAE, canvas.height-RADIAE);

    if(i == 0){
        arrBubbles.push(new Circle(x, y, RADIAE, "blue"));
        continue;
    }

    for(let j = 0; j < arrBubbles.length; j++){

        let d = distance(x, y, arrBubbles[j].x, arrBubbles[j].y);

        if(d <= RADIAE*2){
            x = randomInteger(RADIAE, canvas.width-RADIAE);
            y = randomInteger(RADIAE, canvas.height-RADIAE);
            j = -1;
        }        
    }

    arrBubbles.push(new Circle(x, y, RADIAE, "blue"));
}




loop();
function loop(){
    frames++;
    getFPS();

    if(frames % 3 == 0) 
        fpsInd.innerHTML = "FPS: "+fps;


    ctx.clearRect(0,0,window.innerWidth, window.innerHeight);


    arrBubbles.forEach( (item)=> {
       item.draw(ctx); 
       item.move(canvas.width, canvas.height);    
    });

    collisions();

    requestAnimationFrame(loop);
}


function collisions(){

    for(let i = 0; i < arrBubbles.length; i++){

        let first = arrBubbles[i];

        for(let p = 0; p < arrBubbles.length; p++){

            let second = arrBubbles[p];

            let d = distance(first.x, first.y, second.x, second.y);

            if(d <= first.radius + second.radius){
                second.color = COLLISION_COLOR;
                first.color = COLLISION_COLOR;
            }
            else {
                second.color = "blue";
                first.color = "blue";
            }
        }
    }

}



function distance(x1, y1, x2, y2){
    let distX = x2-x1;
    let distY = y2-y1;

    return Math.sqrt(distX*distX + distY*distY);
}



function randomInteger(min, max){
    return Math.floor(Math.random() * (max-min+1) + min);
}


function adjustCanvas(){
     canvas.setAttribute("width", window.innerWidth);
     canvas.setAttribute("height", window.innerHeight);
}


function getFPS(){

    let delta;

    if(!lastCallTime){
        lastCallTime = Date.now();
        fps = 0;
        return;
    }

    delta = (Date.now() - lastCallTime) / 1000;
    lastCallTime = Date.now();
    fps = Math.floor(1/delta);
}

class Circle{

    constructor(x, y, radius, color){
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;

        this.velocity = {
            X: randomInteger(1, 3),
            Y: randomInteger(1, 3)
        }
    }


    move(canvasW, canvasH){


        if(this.x+1 >= canvasW-this.radius || this.x-1 <= this.radius)
            this.velocity.X = -this.velocity.X;

        if(this.y+1 >= canvasH-this.radius || this.y-1 <= this.radius)
            this.velocity.Y = -this.velocity.Y;


        this.x += this.velocity.X;
        this.y += this.velocity.Y;
    }

    draw(ctx){

        ctx.strokeStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI);
        ctx.stroke();

    }
}

最佳答案

到目前为止，干得很好。您已正确设置游戏/动画的所有基础知识。你是对的 - 唯一真正的问题是在 collisions 函数中。看看那里发生了什么。

它选择一个圆，将其称为first。然后屏幕上每隔一个圆圈

如果它们相交，则会将两种颜色更改为碰撞颜色
如果它们不相交，则会将两种颜色更改回默认值

现在再看一遍，并考虑当第一个圆检查首先与其实际碰撞的圆的碰撞时会发生什么。然后，该循环中发生的最后一件事将是检查它与其他圆圈的碰撞(不与其碰撞)并将它们的所有颜色更改回默认值。

基本上，您需要重新思考如何创建这两个循环的逻辑。例如，我建议添加一个 bool 标志(例如，colliding)，可以在内部循环完成后进行检查 - 甚至可能将其添加为 Circle 实例的属性。因此，如果 first 与内部循环中的某些内容发生碰撞，则设置 first.colliding = true。在 Circle draw() 函数中，您可以根据此属性设置颜色。

幸运的是，这些循环的设置方式实际上覆盖了另一个错误。您没有考虑到第二个圆圈何时与第一个圆圈是同一对象(它与自身的距离始终为零，因此应该始终变为绿色......但上面的错误总是将其恢复)。您可以通过在内部循环中添加如下检查来解决此问题:

if(first !== secondary) 或 if(i !== p) 等

关于javascript - 嘿，我想用canvas和js制作这个小程序来检测圆圈之间的碰撞，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61108916/

文章推荐： javascript - window.open(url, target) 不会激活 Firefox 中的选项卡

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 嘿，我想用canvas和js制作这个小程序来检测圆圈之间的碰撞