javascript - 我在用 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();
    }
  }
}