Letter Guess Game, оставшиеся догадки не возвращают «0» после окончательной догадки?

Question

Кодируя простую игру на угадывание букв, все работает, но когда оставшиеся догадки доходят до «0», они не отображают «0», однако это будет отображаться в журнале консоли.Не так много, просто хотелось бы понять, что я делаю неправильно или просто не делаю.Ссылка: https://groscoe42.github.io/Psychic-Game/ код следующий

$(document).ready(function() {
var wins = 0;
var losses = 0;
var remain = 10;
var choices = [
"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m",
"n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z",];
var compChoice = choices[Math.floor(Math.random() * choices.length)]
var answer = compChoice;
var wShow = document.getElementById("w");
var lShow = document.getElementById("l");
var rShow = document.getElementById("r");
var gShow = document.getElementById("iGuess");

console.log("C: " + compChoice);

document.onkeyup = function (_event) {


var userGuess = _event.key;

if (userGuess == "a" || userGuess == "b" || userGuess == "c" || userGuess == "d" || userGuess == "e" || userGuess == "f" || userGuess == "g" || userGuess == "h" || userGuess == "i" || userGuess == "j" ||
    userGuess == "k" || userGuess == "l" || userGuess == "m" || userGuess == "n" || userGuess == "o" || userGuess == "p" || userGuess == "q" || userGuess == "r" || userGuess == "s" || userGuess == "t" ||
    userGuess == "u" || userGuess == "v" || userGuess == "w" || userGuess == "x" || userGuess == "y" || userGuess == "z") {
        console.log("g: " + userGuess)
    if (userGuess == compChoice) {

        alert("Correct! The letter was " + answer + " !");
        wins++;
        wShow.textContent = wins;
        console.log("w " + wins);
        // reset
        compChoice = choices[Math.floor(Math.random() * choices.length)];
        remain = 10;
        rShow.textContent = remain;
        $("#iGuess").empty();
        console.log("C: " + compChoice);
    }

    else {
        // display guess
        remain--;
        rShow.textContent = remain;
        $("#iGuess").append(userGuess + ", ");
        console.log("r " + remain);

        if (remain === 0) {

            rShow.textContent = remain;
            losses++;
            lShow.textContent = losses;
            alert("So close! The letter was " + answer + " !");
            console.log("l " + losses);
            // reset
            compChoice = choices[Math.floor(Math.random() * choices.length)];
            remain = 10;
            rShow.textContent = remain;
            $("#iGuess").empty();

            console.log("C: " + compChoice);
        };
    };

}

else {
    alert("Invalid Input!");
};

};})

Answer 1

Ваш alert является блокирующим браузером - пока окно предупреждения видно, браузеру запрещено делать что-либо еще, включая Javascript и перерисовку окна.Таким образом, даже если вы установили textContent выше alert, браузер не имел возможности отрендерить его до того, как alert появится и заблокирует все.Наилучшим решением было бы использовать модальный пропал вместо alert s (что очень недружелюбно к пользователю), но другой вариант - заставить alert подойти после следующего requestAnimationFrame (что даст браузеру возможность перекрасить):

if (remain === 0) {

  rShow.textContent = remain;
  losses++;
  lShow.textContent = losses;
  window.requestAnimationFrame(() => {
    setTimeout(() => {
      alert("So close! The letter was " + answer + " !");
      console.log("l " + losses);
      // reset
      compChoice = choices[Math.floor(Math.random() * choices.length)];
      remain = 10;
      rShow.textContent = remain;
      $("#iGuess").empty();

      console.log("C: " + compChoice);
    });
  });
}

$(document).ready(function() {
  var wins = 0;
  var losses = 0;
  var remain = 10;
  var choices = [
    "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m",
    "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z",

  ];
  var compChoice = choices[Math.floor(Math.random() * choices.length)]
  var answer = compChoice;
  var wShow = document.getElementById("w");
  var lShow = document.getElementById("l");
  var rShow = document.getElementById("r");
  var gShow = document.getElementById("iGuess");

  console.log("C: " + compChoice);

  document.onkeyup = function(_event) {


    var userGuess = _event.key;

    if (userGuess == "a" || userGuess == "b" || userGuess == "c" || userGuess == "d" || userGuess == "e" || userGuess == "f" || userGuess == "g" || userGuess == "h" || userGuess == "i" || userGuess == "j" ||
      userGuess == "k" || userGuess == "l" || userGuess == "m" || userGuess == "n" || userGuess == "o" || userGuess == "p" || userGuess == "q" || userGuess == "r" || userGuess == "s" || userGuess == "t" ||
      userGuess == "u" || userGuess == "v" || userGuess == "w" || userGuess == "x" || userGuess == "y" || userGuess == "z") {
      console.log("g: " + userGuess)
      if (userGuess == compChoice) {

        alert("Correct! The letter was " + answer + " !");
        wins++;
        wShow.textContent = wins;
        console.log("w " + wins);
        // reset
        compChoice = choices[Math.floor(Math.random() * choices.length)];
        remain = 10;
        rShow.textContent = remain;
        $("#iGuess").empty();
        console.log("C: " + compChoice);
      } else {
        // display guess
        remain--;
        rShow.textContent = remain;
        $("#iGuess").append(userGuess + ", ");
        console.log("r " + remain);

        if (remain === 0) {

          rShow.textContent = remain;
          losses++;
          lShow.textContent = losses;
          window.requestAnimationFrame(() => {
            setTimeout(() => {
              alert("So close! The letter was " + answer + " !");
              console.log("l " + losses);
              // reset
              compChoice = choices[Math.floor(Math.random() * choices.length)];
              remain = 10;
              rShow.textContent = remain;
              $("#iGuess").empty();

              console.log("C: " + compChoice);
            });
          });
        }
      };

    } else {
      alert("Invalid Input!");
    };

  };
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Psychic Game</h1>
<div>
  <h3>I've chosen a letter A-Z, can you guess it?</h3>
  <br>
  <div>Wins:
    <div id="w"></div>
  </div>
  <div>Losses:
    <div id="l"></div>
  </div>
  <div>Guesses Remaining:
    <div id="r"></div>
  </div>
  <div>Your Guesses:
    <div id="iGuess"></div>
  </div>
</div>