为什么不是所有五个圆圈都被绘制到画布上？

Question

我正在尝试将5个随机圆圈绘制到画布上，我希望在某些时候进入蜈蚣游戏。我设置了逻辑，以便for循环遍历5个圆圈。然后有一个do循环，确保圆X和Y点在画布中，因为在某些时候它们都必须在一个数组中，以便我可以确定它们是否被玩家击中。

如果坐标不好，那么我在do-loop中再次简单循环以获得另一组X和Y坐标。如果一对线是OK，那么我输入if语句并将isDrawable设置为TRUE。

问题：我需要改变什么简单的逻辑才能使它总是在画布上画出5个可见的圆圈？

代码：

function buildCircle() {
    for(var i=0; i<5; i++) {
      do { 
        isDrawable = false;
        radX = Math.random()*theCanvas.width;
        radY = Math.random()*theCanvas.height;
        radR = Math.random()*10+3;
console.log(i);
console.log(radX);   
console.log(radY);    
            if ((radX>5 && radX<435) && (radY>0 && radY<520)) {
                isDrawable = true;
                canvasContext.fillStyle='#123321;'  //getRandomColor();
                drawCircle(radX,radY,radR,canvasContext);
            }   
console.log(isDrawable);    
        } 
        while (isDrawable = false);
    }
}

Answer 1

我不确定我是否看到了原始代码的问题，但是如果你的问题是循环并且执行/ whilte，这应该可行并且可能更容易阅读：

var circlesLeft = 5;
while (circlesLeft) {
  //stuff
  if (draw_circle) {
    //draw circle
    --circlesLeft;
  }
}

我在您的代码中看到的唯一其他潜在问题是，如果两个圆圈选择相同（或非常接近相同）的坐标，它们将无法处理，它们会重叠，而当您绘制两个，只有一个（最大的）是可见的。

Answer 2

如果我做对了，你想确保每个圆圈完全在画布内。如果且仅在以下情况下，(x, y)中半径为r的圆圈位于画布内。

• x-r>=0
• x+r<=width
• y-r>=0
• y+r<=height

那是：

• r <= x <= width-r
• r <= y <= height-r

因此，更简单的逻辑是将限制应用于随机生成器。首先，您选择一个随机半径r=3+Math.random()*10，然后选择：

在x 中
• [r, width-r] 在y
中
• [r, height-r]

这会为您提供：x = r+(width-2*r)*Math.random()和y = r+(height-2*r)*Math.random()

如果你想避开一个圆圈，那么你需要一个类似的反复试验逻辑：对于每一个新的圆圈，如上所述选择随机(x, y)和r，然后检查它是否与之前的任何圆圈都没有碰撞。如果是，请再试一次。

检查碰撞的逻辑只是检查距离是否大于组合的半径：

function checkCollision(x1, y1, r1, x2, y2, r2) {
    return (x1-x2)*(x1-x2)+(y1-y2)*(y1-y2) > (r1+r2)*(r1+r2) // true if don't collide
}

Answer 3

do while循环的条件是错误的。您应该设置“isDrawable == false”而不是“isDrawable = false”。