Question

我有一段代码，将10个球对象添加到数组中，每个对象都具有各自的值（x，xvel，半径等）。在球对象内部，我创建了4个功能：绘制功能，移动功能，鼠标框碰撞功能和球碰撞功能。除球碰撞功能外，所有这些功能均能成功工作。这是因为当将其添加到执行循环时，只绘制了一个球，其余的球不可见。

    for(i = 0; i < balls.length;i++)
{
    balls[i].move()
    balls[i].draw()
    balls[i].mouse_collision()
    //This function is the reason for my quarrels, if I allow it to execute then no balls are drawn except for one however collisions are detected.
    //balls[i].checkbox() 
}

尽管如此，仍然可以检测到碰撞，所以我的问题是弄清楚如何使碰撞和图形同时工作。复选框功能中使用的代码

this.checkbox = function() {
    //Attempt at collision function, loops through all other balls and 
    //if collision == true then the function executes, 
    //causing the balls to bounce of each other.
    for(i = 0; i < balls.length; i++)
    {
        if(collision(x,y,radius,balls[i].x,balls[i].y,balls[i].radius) && balls[i].id != id)
        {
            console.log("COLLISION")
            o_xvel = balls[i].xvel
            o_yvel = balls[i].yvel   
            balls[i].xvel = xvel
            balls[i].yvel = yvel
            xvel = o_xvel
            yvel = o_yvel
        }
    }

}

链接到JSFiddle上的代码：https://jsfiddle.net/HatBreakingDad/fnzr51yq/

P.S对不起，我的英语不好，因为它不是我的母语。

Answer 1

您正在覆盖其他一些i变量。

限制它们的范围，用let，var或const声明它们。更换

for(i = 0; i < balls.length; i++)

使用

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

例如，

会这样做。

或者您可以重命名它们。

碰撞检测功能可防止程序在阵列中绘制多个球

1 个答案: