코드 블록 단순화

Question

내 코드의이 부분을 단순화 할 수있는 방법이 있습니까? 나는 이것에 대해 연구 해왔고 마침내이 작품을 제대로 만들었거나 내가해야 할 일을했다. 나는 배열 (6 * 6)을 가지고 있으며 이미지를 클릭하면 주위의 다른 모든 이미지가 같은 색으로 바뀝니다. 나는 빨강과 파랑 만 사용하고 있습니다. 예, 죄송합니다. 세미콜론을 사용하지 않았지만, 나중에 고칠 것입니다. 그럼 누가 도와 줄 수 있니? 전체 프로그램이 필요한 경우 업로드 할 수도 있습니다.

function vClick(iRow, iCol) 
{ 
    var i, j; 

    if (astrColor[iRow][iCol] == 'r') 
    { 
     if ((iRow - 1) < 0) 
     { 
      for (i = iRow; i <= (iRow + 1) ; i++) 
      { 
       if ((iCol - 1) < 0) 
       { 
        for (j = iCol; j <= (iCol + 1) ; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'rcircle.png'; 
         astrColor[i][j] = 'r'; 
        } 
       } 
       else if ((iCol + 1) > 5) 
       { 
        for (j = (iCol - 1) ; j <= iCol; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'rcircle.png'; 
         astrColor[i][j] = 'r'; 
        } 
       } 
       else 
       { 
        for (j = (iCol - 1) ; j <= (iCol + 1) ; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'rcircle.png'; 
         astrColor[i][j] = 'r'; 
        } 
       } 
      } 
     } 
     else if ((iRow + 1) > 5) 
     { 
      for (i = (iRow - 1) ; i <= iRow; i++) 
      { 
       if ((iCol - 1) < 0) 
       { 
        for (j = iCol; j <= (iCol + 1) ; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'rcircle.png'; 
         astrColor[i][j] = 'r'; 
        } 
       } 
       else if ((iCol + 1) > 5) 
       { 
        for (j = (iCol - 1) ; j <= iCol; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'rcircle.png'; 
         astrColor[i][j] = 'r'; 
        } 
       } 
       else 
       { 
        for (j = (iCol - 1) ; j <= (iCol + 1) ; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'rcircle.png'; 
         astrColor[i][j] = 'r'; 
        } 
       } 
      } 
     } 
     else if((iCol - 1) < 0) 
     { 
      for (i = (iRow - 1) ; i <= (iRow + 1) ; i++) 
      { 
       for (j = iCol ; j <= (iCol + 1) ; j++) 
       { 
        var strID = "img" + i + "," + j; 
        document.getElementById(strID).src = 'rcircle.png'; 
        astrColor[i][j] = 'r'; 
       } 
      } 
     } 
     else if((iCol + 1) > 5) 
     { 
      for (i = (iRow - 1) ; i <= (iRow + 1) ; i++) 
      { 
       for (j = (iCol - 1) ; j <= iCol ; j++) 
       { 
        var strID = "img" + i + "," + j; 
        document.getElementById(strID).src = 'rcircle.png'; 
        astrColor[i][j] = 'r'; 
       } 
      } 
     } 
     else 
     { 
      for (i = (iRow - 1) ; i <= (iRow + 1) ; i++) 
      { 
       for (j = (iCol - 1) ; j <= (iCol + 1) ; j++) 
       { 
        var strID = "img" + i + "," + j; 
        document.getElementById(strID).src = 'rcircle.png'; 
        astrColor[i][j] = 'r'; 
       } 
      } 
     }    
    } 
    else 
    { 
     if ((iRow - 1) < 0) 
     { 
      for (i = iRow; i <= (iRow + 1) ; i++) 
      { 
       if ((iCol - 1) < 0) 
       { 
        for (j = iCol; j <= (iCol + 1) ; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'bcircle.png'; 
         astrColor[i][j] = 'b'; 
        } 
       } 
       else if ((iCol + 1) > 5) 
       { 
        for (j = (iCol - 1) ; j <= iCol; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'bcircle.png'; 
         astrColor[i][j] = 'b'; 
        } 
       } 
       else 
       { 
        for (j = (iCol - 1) ; j <= (iCol + 1) ; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'bcircle.png'; 
         astrColor[i][j] = 'b'; 
        } 
       } 
      } 
     } 

     else if ((iRow + 1) > 5) 
     { 
      for (i = (iRow - 1) ; i <= iRow; i++) 
      { 
       if ((iCol - 1) < 0) 
       { 
        for (j = iCol; j <= (iCol + 1) ; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'bcircle.png'; 
         astrColor[i][j] = 'b'; 
        } 
       } 
       else if ((iCol + 1) > 5) 
       { 
        for (j = (iCol - 1) ; j <= iCol; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'bcircle.png'; 
         astrColor[i][j] = 'b'; 
        } 
       } 
       else 
       { 
        for (j = (iCol - 1) ; j <= (iCol + 1) ; j++) 
        { 
         var strID = "img" + i + "," + j; 
         document.getElementById(strID).src = 'bcircle.png'; 
         astrColor[i][j] = 'b'; 
        } 
       } 
      } 
     } 
     else if ((iCol - 1) < 0) 
     { 
      for (i = (iRow - 1) ; i <= (iRow + 1) ; i++) 
      { 
       for (j = iCol ; j <= (iCol + 1) ; j++) 
       { 
        var strID = "img" + i + "," + j; 
        document.getElementById(strID).src = 'bcircle.png'; 
        astrColor[i][j] = 'b'; 
       } 
      } 
     } 
     else if ((iCol + 1) > 5) 
     { 
      for (i = (iRow - 1) ; i <= (iRow + 1) ; i++) 
      { 
       for (j = (iCol - 1) ; j <= iCol ; j++) 
       { 
        var strID = "img" + i + "," + j; 
        document.getElementById(strID).src = 'bcircle.png'; 
        astrColor[i][j] = 'b'; 
       } 
      } 
     } 
     else 
     { 
      for (i = (iRow - 1) ; i <= (iRow + 1) ; i++) 
      { 
       for (j = (iCol - 1) ; j <= (iCol + 1) ; j++) 
       { 
        var strID = "img" + i + "," + j; 
        document.getElementById(strID).src = 'bcircle.png'; 
        astrColor[i][j] = 'b'; 
       } 
      } 
     }   
    } 
} 

Answer 1

나는 모든 이미지를 상하 좌우로 바꿀 필요가 있다고 가정하고 있습니다. 또한 vClick을 올바르게 호출 할 것이라고 가정합니다 (필요한 경우에만). 마지막으로이 작업은 첫 번째 아이디어이므로 완벽하게 작동하지 않을 수 있습니다.

내 아이디어는 [i-1, j-1]에서 [i + 1, j + 1]까지 한 번만 반복하고 주어진 항목이있는 경우에만 해당 항목을 변경하는 단일 함수를 사용하는 것입니다.

function vClick(iRow, iCol) 
{ 
for (i = iRow-1; i<=iRow+1; i++) 
    for (j = iCol-1; j<=iCol+1; j++) 
     changeImage(i,j); 
} 

function changeImage(i,j) 
{ 
var strID = "img" + i + "," + j; 
var theImage = document.getElementById(strID); 
if (theImage != null) 
    if (theImage.src == 'bcircle.png') 
     {theImage.src = 'rcircle.png'; astrColor[i][j] = 'r'; 
    else 
     {theImage.src = 'bcircle.png'; astrColor[i][j] = 'b';} 

} 

Answer 2

DRY 동일한 코드 블록을 도우미 메서드에 넣고 호출하면됩니다.

또한 전체 코드의 가독성을 높이는 데 도움이 될 것입니다. 지금은 열과 행이 일부 값 범위에 있는지 여부에 대한 논리를 다루고 있다고 말할 수 있습니다.

더 나은 조언을 얻으려면 정직하게 읽을 수있는 일반 영어로 알고리즘 (사고 방식)을 정확하게 설명하십시오.