このJSコードはどのようにDRYするのですか？ whileループ

Question

私のJSコードです。 Sudoku Grid（9）を作成しました。私はそれをしましたが、私のコードは明らかにDRYではありません。私は多くの方法を試しましたが、最終的には成功しませんでした。たぶん誰かが、この170行のコードをもっと「プロフェッショナルな」ものに変換する手助けをしてくれるかもしれません。前もって感謝します！

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. 

私もwhileCountLessThan(3);

短く、より表現

Answer 2

ように私たちをあなたは3を持っていた気づいたので...

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

：

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]) 
}