我在使用JavaScript编程我的公牛和奶牛游戏时遇到了麻烦

Question

我是一名新手程序员，我一直在使用JavaScript制作一个公牛和奶牛的简单游戏，每次猜测都会在段落中包含公牛和奶牛的数量。我一直在使用“'1234'”代替“arr.join（”“）”来测试它，它几乎就在那里，但是它默认添加了一头公牛而没有考虑到这个数字的第一个数字被提交。当我提交正确的号码时，一切都很好。我只是想知道为什么我似乎没有得到适量的公牛和奶牛。

// This is our click counter that tells you how many times you've guessed in the game.

var clicks = 0;
$("#submit").click(function() {
  clicks++;
  $("#guesses").html(clicks);
});

// Generates a non-repeating, random number and stores it in a global variable known as "secret".

$("#start").click(function() {
  var arr = [];
  while (arr.length < 4) {
    var randomnumber = Math.ceil(Math.random() * 9);
    var found = false;
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] === randomnumber) {
        found = true;
        break;
      }
    }
    if (!found) arr[arr.length] = randomnumber;
  }
  secret = "1234";
});

// When you click the "Hide Rules" button, it hides the Rules form and shows the "Show Rules" button.

$("#hide").click(function() {
  $("#rulesform").hide();
  $("#show").show();
  $("#hide").hide();
});

// When you click the "Show Rules" button, it shows the rules form and the "Hide Rules" button and hides the "Show Rules" button.

$("#show").click(function() {
  $("#rulesform").show();
  $("#show").hide();
  $("#hide").show();
});

// When you click "Start playing!", it hides the button, shows the game, sets guesses equal to 0, and generates the number for the game.

$("#start").click(function() {
  $("#game").show();
  $("#start").hide();
  $("#submit").show();
  $("#guesses").html("0");
});

// When you hit the "Stop playing." button, it clears the results of the game and guess input box, in addition to hiding the game functions and showing the "Start playing!" button.

$("#stop").click(function() {
  $("#game").hide();
  $("#start").show();
  $("#results").html("");
  $("#guess").val("");
  clicks = 0;
});

function game() {

  // Stores your guess in a variable

  var guess = $("#guess").val();

  // Makes sure the number is 4 digits

  if (guess.length != 4) {
    alert("This number is too long or short to be valid.");
  }

  // Makes sure the numbers are non-repeating if they're 4 digits.
  else if (guess.charAt(1) === guess.charAt(2) || guess.charAt(1) === guess.charAt(3) || guess.charAt(1) === guess.charAt(4) || guess.charAt(2) === guess.charAt(3) || guess.charAt(2) === guess.charAt(4) || guess.charAt(3) === guess.charAt(4)) {
    alert("This game doesn't have any repeating digits.");
  }

  // This is the actual game.
  else {

    // These two variables will be updated with each guess the user inputs.

    var bulls = 0;
    var cows = 0;

    // This is where JavaScript checks the bulls and cows and adds them up accordingly.

    if (guess !== secret) {
      if (guess.charAt(1) === secret.charAt(1)) {
        bulls += 1;
      } else if (guess.charAt(1) === secret.charAt(2) || guess.charAt(1) === secret.charAt(3) || guess.charAt(1) === secret.charAt(4)) {
        cows += 1;
      }
      if (guess.charAt(2) === secret.charAt(2)) {
        bulls += 1;
      } else if (guess.charAt(2) === secret.charAt(1) || guess.charAt(2) === secret.charAt(3) || guess.charAt(2) === secret.charAt(4)) {
        cows += 1;
      }
      if (guess.charAt(3) === secret.charAt(3)) {
        bulls += 1;
      } else if (guess.charAt(3) === secret.charAt(1) || guess.charAt(3) === secret.charAt(2) || guess.charAt(3) === secret.charAt(4)) {
        cows += 1;
      }
      if (guess.charAt(4) === secret.charAt(4)) {
        bulls += 1;
      } else if (guess.charAt(4) === secret.charAt(1) || guess.charAt(4) === secret.charAt(2) || guess.charAt(4) === secret.charAt(3)) {
        cows += 1;
      }
      $("#results").html("Bulls: " + bulls + " & Cows: " + cows + "");
    } else if (guess === secret) {
      $("#results").html("<strong>Congrats, you won! <a href='images/cookie.gif'>Here's a picture</a> of a cookie.</strong>");
      $("#submit").hide();
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <h1>Want to play a game?</h1>
  <div id="rules">
    <form id="rulesform">
      <h2>Rules:</h2>
      <p>The computer will generate a random 4-digit number without any of them repeating. You will do your best to guess the number in the input field provided. If a digit you entered is not used, you will not get any bulls or cows. If it's in the correct
        spot, then you'll get 1 bull. If it's in the wrong spot, it will be a cow. The game ends when you guess the number. The amount of guesses it takes for you to figure it out will be provided.</p>
    </form>
    <input type="button" id="hide" value="Hide Rules">
    <input type="button" id="show" value="Show Rules">
    <br>
    <input type="button" id="start" value="Start playing!">
  </div>
  <!--closes rules-->
  <div id="game">
    <input type="number" id="guess" placeholder="Your Guess">
    <input type="button" id="submit" value="Submit your guess." onclick="game()">
    <br>
    <p id="guesstext">Guesses:</p>
    <p id="guesses"></p>
    <p id="results"></p>
    <input type="button" id="stop" value="Stop playing.">
  </div>
  <!--closes game-->
</div>
<!--closes wrapper-->

Answer 1

字符串中的第一个字符是该字符串中的charAt（0），而不是charAt（1）。将所有charAt引用减少一个，看看是否有效。

这里应该是什么样子：

// This is our click counter that tells you how many times you've guessed in the game.

var clicks = 0;
$("#submit").click(function() {
  clicks++;
  $("#guesses").html(clicks);
});

// Generates a non-repeating, random number and stores it in a global variable known as "secret".

$("#start").click(function() {
  var arr = [];
  while (arr.length < 4) {
    var randomnumber = Math.ceil(Math.random() * 9);
    var found = false;
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] === randomnumber) {
        found = true;
        break;
      }
    }
    if (!found) arr[arr.length] = randomnumber;
  }
  window.secret = "1234";
});

// When you click the "Hide Rules" button, it hides the Rules form and shows the "Show Rules" button.

$("#hide").click(function() {
  $("#rulesform").hide();
  $("#show").show();
  $("#hide").hide();
});

// When you click the "Show Rules" button, it shows the rules form and the "Hide Rules" button and hides the "Show Rules" button.

$("#show").click(function() {
  $("#rulesform").show();
  $("#show").hide();
  $("#hide").show();
});

// When you click "Start playing!", it hides the button, shows the game, sets guesses equal to 0, and generates the number for the game.

$("#start").click(function() {
  $("#game").show();
  $("#start").hide();
  $("#submit").show();
  $("#guesses").html("0");
});

// When you hit the "Stop playing." button, it clears the results of the game and guess input box, in addition to hiding the game functions and showing the "Start playing!" button.

$("#stop").click(function() {
  $("#game").hide();
  $("#start").show();
  $("#results").html("");
  $("#guess").val("");
  clicks = 0;
});

window.game = function() {

  // Stores your guess in a variable

  var guess = $("#guess").val();

  // Makes sure the number is 4 digits

  if (guess.length != 4) {
    alert("This number is too long or short to be valid.");
  }

  // Makes sure the numbers are non-repeating if they're 4 digits.
  else if (guess.charAt(0) === guess.charAt(1) || guess.charAt(0) === guess.charAt(2) || guess.charAt(0) === guess.charAt(3) || guess.charAt(1) === guess.charAt(2) || guess.charAt(1) === guess.charAt(3) || guess.charAt(2) === guess.charAt(3)) {
    alert("This game doesn't have any repeating digits.");
  }

  // This is the actual game.
  else {

    // These two variables will be updated with each guess the user inputs.

    var bulls = 0;
    var cows = 0;

    // This is where JavaScript checks the bulls and cows and adds them up accordingly.

    if (guess !== secret) {
      if (guess.charAt(0) === secret.charAt(0)) {
        bulls += 1;
      } else if (guess.charAt(0) === secret.charAt(1) || guess.charAt(0) === secret.charAt(2) || guess.charAt(0) === secret.charAt(3)) {
        cows += 1;
      }
      if (guess.charAt(1) === secret.charAt(1)) {
        bulls += 1;
      } else if (guess.charAt(1) === secret.charAt(0) || guess.charAt(1) === secret.charAt(2) || guess.charAt(1) === secret.charAt(3)) {
        cows += 1;
      }
      if (guess.charAt(2) === secret.charAt(2)) {
        bulls += 1;
      } else if (guess.charAt(2) === secret.charAt(0) || guess.charAt(2) === secret.charAt(1) || guess.charAt(2) === secret.charAt(3)) {
        cows += 1;
      }
      if (guess.charAt(3) === secret.charAt(3)) {
        bulls += 1;
      } else if (guess.charAt(3) === secret.charAt(0) || guess.charAt(3) === secret.charAt(1) || guess.charAt(3) === secret.charAt(2)) {
        cows += 1;
      }
      $("#results").html("Bulls: " + bulls + " & Cows: " + cows + "");
    } else if (guess === secret) {
      $("#results").html("<strong>Congrats, you won! <a href='images/cookie.gif'>Here's a picture</a> of a cookie.</strong>");
      $("#submit").hide();
    }
  }
}

Answer 2

我知道这不是主题，但我必须完成同样的任务，并发现你的代码是一个非常有用的例子。我有点编辑它并建议你，在我看来这是更好的选择（没有必要成为更好的选择，只是我的观点）

for (var i = 0; i < length; i++) {
    if(String(guess).charAt(i) == String(number).charAt(i)){
        bulls++;
    }else{
        for (var j = 0; j < length; j++) {
            if ((String(guess).charAt(i) == String(number).charAt(j)) && (i !== j)) {
                cows++;
            };
        };
    }
};

猜测是猜测，数字是生成的数字。 上面的代码可能代替

      if (guess.charAt(0) === secret.charAt(0)) {
    bulls += 1;
    } else if (guess.charAt(0) === secret.charAt(1) || guess.charAt(0) === secret.charAt(2) || guess.charAt(0) === secret.charAt(3)) {
    cows += 1;
  }
  if (guess.charAt(1) === secret.charAt(1)) {
    bulls += 1;
  } else if (guess.charAt(1) === secret.charAt(0) || guess.charAt(1) === secret.charAt(2) || guess.charAt(1) === secret.charAt(3)) {
    cows += 1;
  }
  if (guess.charAt(2) === secret.charAt(2)) {
    bulls += 1;
  } else if (guess.charAt(2) === secret.charAt(0) || guess.charAt(2) === secret.charAt(1) || guess.charAt(2) === secret.charAt(3)) {
    cows += 1;
  }
  if (guess.charAt(3) === secret.charAt(3)) {
    bulls += 1;
  } else if (guess.charAt(3) === secret.charAt(0) || guess.charAt(3) === secret.charAt(1) || guess.charAt(3) === secret.charAt(2)) {
    cows += 1;
  }

我希望，我帮助过。