Javascript 我的代码中的错误在哪里？

我试图在画布上创建三个不同半径的点，它们彼此不接触或重叠。我用Jquery和Raphael来表示圆。然而，当我运行程序时，它们有时会重叠/接触，但我在代码中找不到逻辑错误

$(document).ready(function () {

    var canvasx = 1450;
    var canvasy = 743;
    var paper = Raphael(0, 0, canvasx, canvasy);
    var circles = new Array;
    var colorarray = new Array("black", "red", "blue");
    var circleoffsetx = canvasx / 4;
    var circleoffsety = canvasy / 4;
    var iterations = 3;
    var circleoverlap = false;
    for (var i = 0; i < iterations; i++) {
        var circlecolor = colorarray[Math.floor(Math.random() * colorarray.length)];
        var circlex = Math.floor((Math.random() * canvasx / 2) + circleoffsetx);
        var circley = Math.floor((Math.random() * canvasy / 2) + circleoffsety);
        var circleradius = Math.floor((Math.random() * 75) + 25);
        if (circles.length > 0) {
            for (var j = 0; j < circles.length; j++) {
                var allcirclex = circles[j[0]];
                var allcircley = circles[j[1]];
                var allcircleradius = circles[j[2]];
                var radiussum = circleradius + allcircleradius;
                if (Math.abs(circlex - allcirclex) <= radiussum || Math.abs(circley - allcircley) <= radiussum) {
                    iterations++;
                    circleoverlap = true;
                    console.log("OVERLAP");
                    break;

                }
            }
            if (circleoverlap === false) {
                circles.push(paper.circle(circlex, circley, circleradius).attr({"stroke": circlecolor, "stroke-width": 3}));
                circles[i] = [circlex, circley, circleradius];
                console.log("NO OVERLAP");
            }
        }
        if (circles.length < 1) {
            circles.push(paper.circle(circlex, circley, circleradius).attr({"stroke": circlecolor, "stroke-width": 3}));
            circles[i] = [circlex, circley, circleradius];
        }
        console.log(circles[0]);
    }
});

$（文档）.ready（函数（）{
var canvasx=1450；
var canvasy=743；
var paper=拉斐尔（0，0，画布，画布）；
var循环=新数组；
var colorarray=新数组（“黑色”、“红色”、“蓝色”）；
var circleoffsetx=canvasx/4；
var circleoffsety=canvasy/4；
var迭代次数=3次；
var circleoverlap=假；
对于（var i=0；i0）{
对于（var j=0；j如果（Math.abs（circlex-allcirclex）你的两点间距离公式是非常错误的

如果有一个点（X1，Y1）和一个点（X2，Y2），它们之间的距离是sqrt（（X2-X1）^2+（Y2-Y1）^2）。这是需要与半径1+半径2进行比较的值

您也没有正确读取圆数组中的任何值-您应该使用
圆[j][0]
而不是
圆[j[0]]
，它总是返回
未定义的
，因为j不是数组，所以j[0]未定义。
下面是固定脚本：

$(document).ready(function() {

  var canvasW = 1450;
  var canvasH = 743;
  var paper = Raphael(0, 0, canvasW, canvasH);

  var circles = new Array();
  var colorArray = new Array("black", "red", "blue");

  var circleOffsetX = canvasW / 4;
  var circleOffsetY = canvasH / 4;
  var iterations = 3;
  var circleOverlap;

  // keep creating circles until done
  while (circles.length < iterations) {
    var circleColor = colorArray[Math.floor(Math.random() * colorArray.length)];
    var circleX = Math.floor((Math.random() * canvasW / 2) + circleOffsetX);
    var circleY = Math.floor((Math.random() * canvasH / 2) + circleOffsetY);
    var circleR = Math.floor((Math.random() * 75) + 25);
    circleOverlap = false; // assume new circle doesn't overlap existing ones
    // test against existing circles
    for (var j = 0; j < circles.length; j++) {
      var dx = circles[j].x - circleX;
      var dy = circles[j].y - circleY;
      if (Math.sqrt(dx*dx + dy*dy) <= circleR + circles[j].r + 3) {
        circleOverlap = true;
        break;
      }
    }
    // no overlap? then add to array
    if (!circleOverlap) circles.push({ x: circleX, y: circleY, r: circleR, c: circleColor });
  }
  // create Raphael circles based on array data
  for (var i = 0; i < circles.length; i++) {
    circles[i] = paper.circle(circles[i].x, circles[i].y, circles[i].r).attr({
      "stroke": circles[i].c,
      "stroke-width": 3
    });
  }
});

$（文档）.ready（函数（）{
var canvasW=1450；
var canvasH=743；
var paper=Raphael（0，0，canvasW，canvasH）；
var circles=新数组（）；
var colorArray=新数组（“黑色”、“红色”、“蓝色”）；
var circleOffsetX=画布W/4；
var circleOffsetY=canvasH/4；
var迭代次数=3次；
var圆重叠；
//继续创建圆圈，直到完成
while（圆圈长度<迭代次数）{
var circleColor=colorArray[Math.floor（Math.random（）*colorArray.length）]；
var circleX=Math.floor（（Math.random（）*canvasW/2）+circleOffsetX）；
var circleY=Math.floor（（Math.random（）*canvasH/2）+circleOffsetY）；
var circleR=数学地板（（数学随机（）*75）+25）；
circleOverlap=false；//假设新圆不与现有圆重叠
//对现有圆圈的测试
对于（var j=0；j如果（Math.sqrt（dx*dx+dy*dy）人，你的解决方案更有意义。我怎样才能学会这样思考？别担心，我花了很长时间才达到目的：D你所需要的只是练习。