JavaScriptコードブロックのロジックを理解できません[Bulls and Cows game]

Question

少し助けが必要です。 Bulls and CowsのゲームのJavaScriptコードの詳細な解釈を書く必要があります。メインロジックブロックで何が起こっているのか正確には分かりません。

 //Check Bull,Cow,Try Again 
    var bull, cow; 

    if (check) { 
     bull = 0; 
     cow = 0; 

     for (var i = 0; i < getNum.length; i++) { 
      for (var k = 0; k < userText.length; k++) { 
       if ((getNum[i] == userText[k]) && (i == k)) { 
        bull++; 
       } else if ((getNum[i] == userText[k]) && (i != k)) { 
        cow++; 
       } 
      } 
     } 

     if (bull == 0 && cow == 0) { 
      setText.innerHTML += "try again\n"; 
     } else if (bull == numLength) { 
      setText.innerHTML += numLength + " bulls! you won the game!!!\nclick restart to play again\n"; 
     } else { 
      setText.innerHTML += userText + " : "; 
      setText.innerHTML += (bull + " bull(s), " + cow + " cow(s)!\n"); 
     } 
    } 
    check = true; 

} 

また、ここであなたは、変数の相互接続や、チェックする必要がある場合には、プログラム全体です：これはブロックである

var getNum = new Array(); 
var numLength; 
var check = true; 

window.onload = function() { 
    numLength = document.getElementById("select").value; 
    setNumber(); 
} 

/*Get random numbers 
Numbers must not be the same as each other 
(found this entire codeblock on the internet 
and adapted it, not gonna lie)*/ 
function setNumber() { 
    var random; 
    getNum.splice(0, getNum.length); 
    while (getNum.length < numLength) { 
     random = Math.floor(Math.random() * 9) + 1; 

     for (var i = 0; i < getNum.length; i++) { 
      if (getNum[i] == random) { 
       check = false; 
       break; 
      } 
     } 

     if (check) { 
      getNum.push(random); 
     } 
     check = true; 
    } 
} 

//Check user number 
function checkUserText() { 
    var userText = document.getElementById("userText").value; 
    var setText = document.getElementById("textArea"); 
    //Check if userText is number 
    for (var i = 0; i < userText.length; i++) { 
     if (userText.charCodeAt(i) < 48 || userText.charCodeAt(i) > 57 
       || userText.length != numLength) { 
      setText.innerHTML += "Type only" + numLength + " numbers!\n"; 
      check = false; 
      break; 
     } 
    } 

    //Check Bull,Cow,Try Again 
    var bull, cow; 

    if (check) { 
     bull = 0; 
     cow = 0; 

     for (var i = 0; i < getNum.length; i++) { 
      for (var k = 0; k < userText.length; k++) { 
       if ((getNum[i] == userText[k]) && (i == k)) { 
        bull++; 
       } else if ((getNum[i] == userText[k]) && (i != k)) { 
        cow++; 
       } 
      } 
     } 

     if (bull == 0 && cow == 0) { 
      setText.innerHTML += "try again\n"; 
     } else if (bull == numLength) { 
      setText.innerHTML += numLength + " bulls! you won the game!!!\nclick restart to play again\n"; 
     } else { 
      setText.innerHTML += userText + " : "; 
      setText.innerHTML += (bull + " bull(s), " + cow + " cow(s)!\n"); 
     } 
    } 
    check = true; 

} 

//change difficulty 
function difficulty() { 
    numLength = document.getElementById("select").value; 
    reload(); 
} 

//restart game 
function reload() { 
    setNumber(); 
    document.getElementById("textArea").innerHTML = ""; 
} 

私はブロックの一般的な考え方を理解するが、私はできません誰かがこのブロックを私に説明したり、簡単なフローチャートを作ってくれたら、私は感謝以上のものになるでしょう。

\t var getNum = new Array(); 
 
\t var numLength; 
 
\t var check = true; 
 

 
\t window.onload = function() { 
 
\t \t numLength = document.getElementById("select").value; 
 
\t \t setNumber(); 
 
\t } 
 

 
\t /*Get random numbers 
 
\t Numbers must not be the same as each other 
 
\t (found this entire codeblock on the internet 
 
\t and adapted it, not gonna lie)*/ 
 
\t function setNumber() { 
 
\t \t var random; 
 
\t \t getNum.splice(0, getNum.length); 
 
\t \t while (getNum.length < numLength) { 
 
\t \t \t random = Math.floor(Math.random() * 9) + 1; 
 

 
\t \t \t for (var i = 0; i < getNum.length; i++) { 
 
\t \t \t \t if (getNum[i] == random) { 
 
\t \t \t \t \t check = false; 
 
\t \t \t \t \t break; 
 
\t \t \t \t } 
 
\t \t \t } 
 

 
\t \t \t if (check) { 
 
\t \t \t \t getNum.push(random); 
 
\t \t \t } 
 
\t \t \t check = true; 
 
\t \t } 
 
\t } 
 

 
\t //Check user number 
 
\t function checkUserText() { 
 
\t \t var userText = document.getElementById("userText").value; 
 
\t \t var setText = document.getElementById("textArea"); 
 
\t \t //Check if userText is number 
 
\t \t for (var i = 0; i < userText.length; i++) { 
 
\t \t \t if (userText.charCodeAt(i) < 48 || userText.charCodeAt(i) > 57 
 
\t \t \t \t \t || userText.length != numLength) { 
 
\t \t \t \t setText.innerHTML += "Type only" + numLength + " numbers!\n"; 
 
\t \t \t \t check = false; 
 
\t \t \t \t break; 
 
\t \t \t } 
 
\t \t } 
 

 
\t \t //Check Bull,Cow,Try Again 
 
\t \t var bull, cow; 
 

 
\t \t if (check) { 
 
\t \t \t bull = 0; 
 
\t \t \t cow = 0; 
 

 
\t \t \t for (var i = 0; i < getNum.length; i++) { 
 
\t \t \t \t for (var k = 0; k < userText.length; k++) { 
 
\t \t \t \t \t if ((getNum[i] == userText[k]) && (i == k)) { 
 
\t \t \t \t \t \t bull++; 
 
\t \t \t \t \t } else if ((getNum[i] == userText[k]) && (i != k)) { 
 
\t \t \t \t \t \t cow++; 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t } 
 

 
\t \t \t if (bull == 0 && cow == 0) { 
 
\t \t \t \t setText.innerHTML += "try again\n"; 
 
\t \t \t } else if (bull == numLength) { 
 
\t \t \t \t setText.innerHTML += numLength + " bulls! you won the game!!!\nclick restart to play again\n"; 
 
\t \t \t } else { 
 
\t \t \t \t setText.innerHTML += userText + " : "; 
 
\t \t \t \t setText.innerHTML += (bull + " bull(s), " + cow + " cow(s)!\n"); 
 
\t \t \t } 
 
\t \t } 
 
\t \t check = true; 
 

 
\t } 
 
\t 
 
\t //change difficulty 
 
\t function difficulty() { 
 
\t \t numLength = document.getElementById("select").value; 
 
\t \t reload(); 
 
\t } 
 

 
\t //restart game 
 
\t function reload() { 
 
\t \t setNumber(); 
 
\t \t document.getElementById("textArea").innerHTML = ""; 
 
\t }

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>Bulls and Cows</title> 
 
\t \t 
 
\t \t <script type="text/javascript" src="operation.js"> 
 

 
    \t </script> 
 
\t \t 
 
\t \t <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> 
 
\t \t 
 
\t \t <style> 
 
\t \t \t h2 { 
 
\t \t \t \t font-family: Lobster; 
 
\t \t \t \t color: blue; 
 
\t \t \t \t } 
 
\t \t \t body { 
 
\t \t \t \t background-color: #cccccc 
 
\t \t \t \t } 
 
\t \t </style> 
 
\t \t 
 

 
\t </head> 
 
\t <body> 
 
\t \t <h2>Bulls and Cows</h2> 
 
\t \t <label for="userText">Type here: </label> 
 
\t \t <input type="text" id="userText"/> 
 
\t \t <br /> 
 
\t \t <button id="ch" onclick="checkUserText()">check</button> 
 
\t \t <button id="re" onclick="reload()">restart</button> 
 
\t \t Length : <select id="select" onchange="difficulty()"> 
 
\t \t \t <option>3</option> 
 
\t \t \t <option>4</option> 
 
\t \t \t <option>5</option> 
 
\t \t \t <option>6</option> 
 
\t \t \t <option>7</option> 
 
\t \t \t <option>8</option> 
 
\t \t \t <option>9</option> 
 
\t \t \t <option>10</option> 
 
\t \t </select> 
 
\t \t <br /> 
 
\t \t <textarea id="textArea" rows="20" cols="30" readonly="readonly" style="overflow-y: scroll"></textarea> 
 
\t </body> 
 
</html>

Answer 1

// ok lets assume the getNum.length is 3 
// and the random getNum is 123 
// and user enters 321 and clicks check 


var bull, cow; 

if (check) { 
    bull = 0; 
    cow = 0; 



    for (var i = 0; i < getNum.length; i++) { 
     // this will loop three times 
     // in the first iteration getNum[i] == 1 
     // the second iteration getNum[i] == 2 
     // the third iteration getNum[i] == 3 


     for (var k = 0; k < userText.length; k++) { 

      // for each iteration of getNum it will iterate all user input (also 3 times) 
      // so 3 times per iteration of getNum, clear so far? good 
      // so at first iteration userText[k] == 3 
      // so at second iteration userText[k] == 2 
      // so at third iteration userText[k] == 1 
      // while i keeps the value of the outer loop 

      // this expression checks if user input matches the same number on the same position in getNum 
      if ((getNum[i] == userText[k]) && (i == k)) { 
       // in the second iteration of the outer loop its a bull because 
       // getNum[i] == 2 == userText[k] == 2 AND 1 == 1 (number and position of number/index is matching the random number 
       bull++; 
      } else if ((getNum[i] == userText[k]) && (i != k)) { 
       // in the first and last iteration of the outer loop its a cow because 
       // getNum[i] == 1/2 == userText[k] == 1/2 AND 0/2 is NOT 2/0 (number is matching but position not matching) 
       cow++; 
      } 

      // if the getNum[i] doesnt exist at all in userText, neither cow or bull will count up 
     } 
    } 

    if (bull == 0 && cow == 0) { 
     // so if no number matched - try again 
     setText.innerHTML += "try again\n"; 
    } else if (bull == numLength) { 
     // if all numbers and positions (cow) matched you won 
     setText.innerHTML += numLength + " bulls! you won the game!!!\nclick restart to play again\n"; 
    } else { 
     // else show how many "cows" and "bulls" 
     setText.innerHTML += userText + " : "; 
     setText.innerHTML += (bull + " bull(s), " + cow + " cow(s)!\n"); 
    } 

    // so the output of above assumption would be 
    // 1 bull, 2 cows 
    // cool game ;-) 
}