时间戳

首页 > 解决方案 > 嘿，我想用画布和js制作这个小程序，它可以检测圆圈之间的碰撞

javascript - 嘿，我想用画布和js制作这个小程序，它可以检测圆圈之间的碰撞

问题描述

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

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

我相信问题出在“碰撞”功能上，但我不太明白它是什么。

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

这是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();

    }
}

标签： javascriptcanvascollision

解决方案

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

它选择一个圆圈，称它为first。然后对于屏幕上的每个其他圆圈

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

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

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

幸运的是，这些循环的设置方式实际上覆盖了另一个错误。second当圆与圆是同一个对象时，您没有考虑到first（它与自身的距离总是为零，所以应该总是变绿......但上面的错误总是把它转回来）。您可以通过在内部循环中添加这样的检查来解决此问题：

if(first !== second)或if(i !== p)等等。

推荐阅读