Использование цикла for для печати сетки в JavaScript

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();

Я пытаюсь добиться этого:

Answer 1

Может быть, это то, что вам нужно:

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let cw = (canvas.width = 300),
  cx = cw / 2;
let ch = (canvas.height = 300),
  cy = ch / 2;
//the circles radius
let ar = 30;
//the red and yellow clees index
let red = [10, 23, 30, 31, 37, 40];
let gold = [16, 17, 24, 32, 38, 39];

let n = 0;// a counter
let cellw = cw / 7;// the width of a cell

//the loop:

  for (let y = cellw / 2; y < ch; y += cellw) {
    for (let x = cellw / 2; x < cw; x += cellw) {
    ctx.beginPath();
    ctx.arc(x, y, ar / 2, 0, 2 * Math.PI);
    //set the color of the circles
    for (let i = 0; i < red.length; i++) {
      if (n == red[i]) {
        ctx.fillStyle = "red";
        break;
      } else if (n == gold[i]) {
        ctx.fillStyle = "gold";
        break;
      } else {
        ctx.fillStyle = "white";
      }
    }
    ctx.fill();
    n++;
  }
}

body {
  background-color: #222;
  overflow: hidden;
}
canvas {
  background-color: #000;
  display: block;
  position:absolute;
  margin: auto;
  top:0;bottom:0;left:0;right:0
}

<canvas id="canvas"></canvas>

Answer 2

Измените структуру вашего цикла - итерируйте 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;
}

Answer 3

Да, есть проблема в цикле for.

Вам просто нужно 2 цикла для этого.

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

Answer 4

У вас есть три цикла, которые используют 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
    }
 }