javascript - JavaScript 项目石头剪刀布---页面首次加载时控制台的问题

Question

当你第一次打开页面时，你会看到一个提示框，但你想打开 dev-tools/console 来观察 console.log 消息的出现。

出于某种原因，如果您在弹出提示窗口后打开 dev-tools/console ，console.logs 不会出现，您必须玩到最后才能看到它们。

这是页面的链接：https ://kloba1004.github.io/project-rock-paper-scissors/

鉴于我没有经验，任何人都可以对我的代码给出诚实的意见：

let userWins = 0,
  computerWins = 0;

function game() {
  for (i = 0; i < 5; i++) {

    let playerSelection = prompt("Choose rock, paper or scissors: "),
      computerSelection;

    const choices = ['rock', 'paper', 'scissors'];

    let computerPlay = Math.random() * 10;

    if (playerSelection !== null) {
      playerSelection = playerSelection.toLowerCase().trim();
    }

    while ((playerSelection === null) || (playerSelection === '') || (!choices.includes(playerSelection))) {

      if (playerSelection === '' || playerSelection === null) {
        playerSelection = prompt("U entered absolutely nothing. Try again...Rock, paper or scissors:")
      } else {
        playerSelection = prompt("You typed it wrong. Try again. Choose rock, paper or scissors: ");
        if (playerSelection !== null) {
          playerSelection = playerSelection.toLowerCase().trim();
        };
      }
    }

    playerSelection = playerSelection.toLowerCase().trim();

    function playRound(playerSelection, computerSelection) {

      if (computerPlay >= 0 && computerPlay < 3.5) {
        computerSelection = 'rock';
        if (playerSelection === 'scissors') {
          computerWins = computerWins + 1;
          return `You lost this round. Rock beats scissors.`;
        } else if (playerSelection === 'paper') {
          userWins = userWins + 1;
          return `You won this round. Paper beats rock.`;
        } else {
          return `Neither won this round. Rock can\'t beat rock.`;
        }
      } else if (computerPlay >= 3.5 && computerPlay < 6.5) {
        computerSelection = 'paper';
        if (playerSelection === 'scissors') {
          userWins = userWins + 1;
          return `You won this round. Scissors beat paper.`;
        } else if (playerSelection === 'rock') {
          computerWins = computerWins + 1;
          return `You lost this round. Paper beats rock.`;
        } else {
          return `Neither won this round. Paper can\'t beat paper.`
        }
      } else {
        computerSelection = 'scissors';
        if (playerSelection === 'rock') {
          userWins = userWins + 1;
          return `You won this round. Rock beats scissors.`;
        } else if (playerSelection === 'paper') {
          computerWins = computerWins + 1;
          return `You lost this round. Scissors beat paper.`;
        } else {
          return `Neither win. Scissors can\'t beat scissors.`;
        }
      }
    }

    console.log(playRound(playerSelection, computerSelection) + `Current score is ${userWins} : ${computerWins}.`);

  }

  if (userWins > computerWins) {
    console.log(`You won the game. Final score is ${userWins} : ${computerWins}.`);
  } else if (userWins === computerWins) {
    console.log(`Neither won the game. Final score is ${userWins} : ${computerWins}.`);
  } else {
    console.log(`You lost the game. Final score is ${userWins} : ${computerWins}.`);
  }
}

game();

标签： javascript

Answer 1

您的代码如下所示：

function game() {
    // Loop
    for (i = 0; i < 5; i++) {
      let playerSelection = prompt("Choose rock, paper or scissors: "),
        computerSelection;

      const choices = ["rock", "paper", "scissors"];

      let computerPlay = Math.random() * 10;

      if (playerSelection !== null) {
        playerSelection = playerSelection.toLowerCase().trim();
      }

      while (
        playerSelection === null ||
        playerSelection === "" ||
        !choices.includes(playerSelection)
      ) {
        if (playerSelection === "" || playerSelection === null) {
          playerSelection = prompt(
            "U entered absolutely nothing. Try again...Rock, paper or scissors:"
          );
        } else {
          playerSelection = prompt(
            "You typed it wrong. Try again. Choose rock, paper or scissors: "
          );
          if (playerSelection !== null) {
            playerSelection = playerSelection.toLowerCase().trim();
          }
        }
      }

      playerSelection = playerSelection.toLowerCase().trim();

      function playRound(playerSelection, computerSelection) {
        ...
      }

      console.log(
        playRound(playerSelection, computerSelection) +
          `Current score is ${userWins} : ${computerWins}.`
      );
    }

    // Console logs
    if (userWins > computerWins) {
      console.log(
        `You won the game. Final score is ${userWins} : ${computerWins}.`
      );
    } else if (userWins === computerWins) {
      console.log(
        `Neither won the game. Final score is ${userWins} : ${computerWins}.`
      );
    } else {
      console.log(
        `You lost the game. Final score is ${userWins} : ${computerWins}.`
      );
    }
  }

可以看到，console.logs 放在for循环之后，提示用户。所以他们自然会在比赛结束后执行。

更新：

关于第一个console.log，它在循环结束时执行，因为您playRound在每次迭代时都声明了函数（并且它被推入堆栈）。

要获得预期的行为，请像这样移动它的声明：

<script>
  let userWins = 0,
    computerWins = 0;

    function playRound(playerSelection, computerSelection, computerPlay) {
        if (computerPlay >= 0 && computerPlay < 3.5) {
            computerSelection = "rock";
            if (playerSelection === "scissors") {
            computerWins = computerWins + 1;
            return `You lost this round. Rock beats scissors.`;
            } else if (playerSelection === "paper") {
            userWins = userWins + 1;
            return `You won this round. Paper beats rock.`;
            } else {
            return `Neither won this round. Rock can\'t beat rock.`;
            }
        } else if (computerPlay >= 3.5 && computerPlay < 6.5) {
            computerSelection = "paper";
            if (playerSelection === "scissors") {
            userWins = userWins + 1;
            return `You won this round. Scissors beat paper.`;
            } else if (playerSelection === "rock") {
            computerWins = computerWins + 1;
            return `You lost this round. Paper beats rock.`;
            } else {
            return `Neither won this round. Paper can\'t beat paper.`;
            }
        } else {
            computerSelection = "scissors";
            if (playerSelection === "rock") {
            userWins = userWins + 1;
            return `You won this round. Rock beats scissors.`;
            } else if (playerSelection === "paper") {
            computerWins = computerWins + 1;
            return `You lost this round. Scissors beat paper.`;
            } else {
            return `Neither win. Scissors can\'t beat scissors.`;
            }
        }
        }

  function game() {
    for (i = 0; i < 5; i++) {
      let playerSelection = prompt("Choose rock, paper or scissors: "),
        computerSelection;

      const choices = ["rock", "paper", "scissors"];

      let computerPlay = Math.random() * 10;

      if (playerSelection !== null) {
        playerSelection = playerSelection.toLowerCase().trim();
      }

      while (
        playerSelection === null ||
        playerSelection === "" ||
        !choices.includes(playerSelection)
      ) {
        if (playerSelection === "" || playerSelection === null) {
          playerSelection = prompt(
            "U entered absolutely nothing. Try again...Rock, paper or scissors:"
          );
        } else {
          playerSelection = prompt(
            "You typed it wrong. Try again. Choose rock, paper or scissors: "
          );
          if (playerSelection !== null) {
            playerSelection = playerSelection.toLowerCase().trim();
          }
        }
      }

      playerSelection = playerSelection.toLowerCase().trim();

      console.log(
        playRound(playerSelection, computerSelection, computerPlay) +
          `Current score is ${userWins} : ${computerWins}.`
      );
    }

    if (userWins > computerWins) {
      console.log(
        `You won the game. Final score is ${userWins} : ${computerWins}.`
      );
    } else if (userWins === computerWins) {
      console.log(
        `Neither won the game. Final score is ${userWins} : ${computerWins}.`
      );
    } else {
      console.log(
        `You lost the game. Final score is ${userWins} : ${computerWins}.`
      );
    }
  }

  game();
</script>