Question

这是我的JS代码。任务是创建Sudoku Grid（9）。我已经完成了，但我的代码显然没有干。我尝试了很多方法，但最终没有取得成功。也许有人可以帮助我将这170行代码转换为更专业的＆＃34;专业＆＃34;。提前谢谢！

var canvas;
canvas = openGraphics();

var x;
var y;
var gap;
var count;
x = 20;
y = 20;
gap = 25;
count = 0;

while(count < 9) {
    canvas.setStroke(1);
    canvas.drawRect(x, y, gap, gap);    
    count++;
    x = 20 + gap * count;
    canvas.paint();
}

count=0;
x = 20;
y = 45;

while(count < 9) {
    canvas.setStroke(1);
    canvas.drawRect(x, y, gap, gap);    
    count++;
    x = 20 + gap * count;
    canvas.paint();
}

count=0;
x = 20;
y = 70;

while(count < 9) {
    canvas.setStroke(1);
    canvas.drawRect(x, y, gap, gap);    
    count++;
    x = 20 + gap * count;
    canvas.paint();
}

count=0;
x = 20;
y = 95;

while(count < 9) {
    canvas.setStroke(1);
    canvas.drawRect(x, y, gap, gap);    
    count++;
    x = 20 + gap * count;
    canvas.paint();
}

count=0;
x = 20;
y = 70;

while(count < 9) {
    canvas.setStroke(1);
    canvas.drawRect(x, y, gap, gap);    
    count++;
    x = 20 + gap * count;
    canvas.paint();
}

count=0;
x = 20;
y = 95;

while(count < 9) {
    canvas.setStroke(1);
    canvas.drawRect(x, y, gap, gap);    
    count++;
    x = 20 + gap * count;
    canvas.paint();
}

count=0;
x = 20;
y = 120;

while(count < 9) {
    canvas.setStroke(1);
    canvas.drawRect(x, y, gap, gap);    
    count++;
    x = 20 + gap * count;
    canvas.paint();
}

count=0;
x = 20;
y = 145;

while(count < 9) {
    canvas.setStroke(1);
    canvas.drawRect(x, y, gap, gap);    
    count++;
    x = 20 + gap * count;
    canvas.paint();
}

count=0;
x = 20;
y = 170;

while(count < 9) {
    canvas.setStroke(1);
    canvas.drawRect(x, y, gap, gap);    
    count++;
    x = 20 + gap * count;
    canvas.paint();
}

count=0;
x = 20;
y = 195;

while(count < 9) {
    canvas.setStroke(1);
    canvas.drawRect(x, y, gap, gap);    
    count++;
    x = 20 + gap * count;
    canvas.paint();
}

count=0;
x = 20;
y = 220;

while(count < 9) {
    canvas.setStroke(1);
    canvas.drawRect(x, y, gap, gap);    
    count++;
    x = 20 + gap * count;
    canvas.paint();
}

count=0;
x = 20;
y = 20;
gap = 75;

while(count < 3) {
    canvas.setStroke(3);
    canvas.drawRect(x, y, gap, gap);    
    count++;
    x = 20 + gap * count;
    canvas.paint();
}

count=0;
x = 20;
y = 95;
gap = 75;

while(count < 3) {
    canvas.setStroke(3);
    canvas.drawRect(x, y, gap, gap);    
    count++;
    x = 20 + gap * count;
    canvas.paint();
}

count=0;
x = 20;
y = 170;
gap = 75;

while(count < 3) {
    canvas.setStroke(3);
    canvas.drawRect(x, y, gap, gap);    
    count++;
    x = 20 + gap * count;
    canvas.paint();
}

Answer 1

function whileCount9(){
    while(count < 9) {
        canvas.setStroke(1);
        canvas.drawRect(x, y, gap, gap);    
        count++;
        x = 20 + gap * count;
        canvas.paint();
    }
}

//use whileCount9(); anywhere you would normally place the whole while loop.

我也注意到你有一个3，所以......

function whileCountLessThan(num){
    while(count < num) {
        canvas.setStroke(1);
        canvas.drawRect(x, y, gap, gap);    
        count++;
        x = 20 + gap * count;
        canvas.paint();
    }
}

我们喜欢whileCountLessThan(3);

Answer 2

更短，更具表现力：

var canvas;
canvas = openGraphics();

var boards = [
  { x: 20, y: 20, gap: 25, num: 9 },
  { x: 20, y: 45, gap: 25, num: 9 },
  { x: 20, y: 70, gap: 25, num: 9 },
  { x: 20, y: 95, gap: 25, num: 9 },
  { x: 20, y: 70, gap: 25, num: 9 },
  { x: 20, y: 95, gap: 25, num: 9 },
  { x: 20, y: 120, gap: 25, num: 9 },
  { x: 20, y: 145, gap: 25, num: 9 },
  { x: 20, y: 170, gap: 25, num: 9 },
  { x: 20, y: 195, gap: 25, num: 9 },

  { x: 20, y: 20, gap: 75, num: 3 },
  { x: 20, y: 95, gap: 75, num: 3 },
  { x: 20, y: 170, gap: 75, num: 3 }
]

function boardCreator(obj){
  var count = 0;
  while(count < obj.num) {
    canvas.setStroke(1);
    canvas.drawRect(obj.x, obj.y, obj.gap, obj.gap);    
    count++;
    obj.x = 20 + obj.gap * count;
    canvas.paint();
  }
}

for (i = 0; i < boards.length; i++) {
  boardCreator(boards[i])
}

如何使这个JS代码干？循环

2 个答案: