javascript - 为什么五个圆圈没有全部绘制到 Canvas 上？

Question

我正在尝试在 Canvas 上随机绘制 5 个圆圈，希望有一天能将其制作成蜈蚣游戏。我已经设置了逻辑，以便 for 循环循环 5 个圆圈。然后有一个 do 循环，确保圆圈 X 和 Y 点位于 Canvas 中，因为在某些时候它们都必须位于数组中，以便我可以确定它们是否已被玩家击中。

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

问题:我需要更改什么简单的逻辑才能使其始终在 Canvas 上绘制 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

我不确定我是否看到原始代码的问题，但如果您的问题是循环和 do/whilte，这应该可以工作并且可能更容易阅读:

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

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