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

Question

我正在尝试使用四个循环创建一个小网格来连接四个游戏。我已经为 X 和 Y 轴打印了圆圈，但我只能成功打印 1 行，我试图在画布上打印七次，但我创建的 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();

我正在努力实现这一目标：

标签： javascripthtmlcssloopscanvas

Answer 1

改变你的循环结构 - 迭代 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;
}