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出现并阻止所有内容之前进行渲染。最好的解决方案是使用propal modal代替alert（这对用户非常不友好），但是另一种选择是让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>