使用for循环在JavaScript中打印网格

我试图创建一个小网格连接四个游戏使用四个循环。我已经打印了X轴和Y轴的圆圈，但我只能成功打印一行，我正在尝试在画布上打印七次，但我创建的for循环似乎不起作用

var x = 30;

var y = 30; 

function setup(){

createCanvas(300,300);
background(0);

for(i=0; i<=6; i++){
    for(i=0; i<=6; i++){
        x+=30;
        circle(x, y, 20);
            for(i=0; i<=6; i++){
                y+=30;
                circle(x, y, 20);
        }
    }   
}
    }
    setup();

var x=30；
变量y=30；
函数设置（）{
createCanvas（300300）；
背景（0）；
对于（i=0；i更改循环结构-迭代7次，并在每次迭代结束时增加
y
，在渲染圆的循环内迭代，并增加
x
：

for (let i = 0; i < 6; i++) {
    x = 30;
    for (let j = 0; j < 7; j++) {
        circle(x, y, 20);
        x += 30;
    }
    y += 30;
}

for（设i=0；i<6；i++）{
x=30；
对于（设j=0；j<7；j++）{
圆（x，y，20）；
x+=30；
}
y+=30；
}
您确实有三个循环使用了
i
，实际上所有循环都在同一个数字上工作，因此内部循环的循环次数是所有三个循环结束时的6倍。由于您的目标是在x和y上循环，只需使用它们：

  for(let x = 1; x < 6; x++) { // always declare variables with let!
    for(let y = 1; y < 6; y++) {
       circle(x * 30, y * 30, 20); // just keep as many varoables as necessary, the position can easily be derived from the index
    }
 }

for（让x=1；x<6；x++）{//始终使用let声明变量！
for（设y=1；y<6；y++）{
圆（x*30，y*30，20）；//只要保留必要的变量，就可以很容易地从索引中导出位置
}
}
是的，for循环中有一个问题

你只需要做两个循环就可以了

for (let row = 0; row <= 6; row++) {
  for (let column = 0; column <= 6; column++) {
    circle(row * 30, column * 30, 20)
  } 
}

for（让row=0；row也许这就是您需要的：


const canvas=document.getElementById（“canvas”）；
const ctx=canvas.getContext（“2d”）；
设cw=（canvas.width=300），
cx=cw/2；
设ch=（canvas.height=300），
cy=ch/2；
//圆的半径
设ar=30；
//红色和黄色的克莱斯指数
让红色=[10,23,30,31,37,40]；
让黄金=[16,17,24,32,38,39]；
设n=0；//一个计数器
设cellw=cw/7；//单元格的宽度
//循环：
对于（设y=cellw/2；y

正文{
背景色：#222；
溢出：隐藏；
}
帆布{
背景色：#000；
显示：块；
位置：绝对位置；
保证金：自动；
顶部：0；底部：0；左侧：0；右侧：0
}
<代码> <代码>您是否对所有循环使用相同的变量？我对所有的循环注使用相同的var x和var y变量：而不是for循环，您可以考虑使用这个模式。