javascript - 两个值不会像预期的那样增加行动

Question

我使用 html、css 和 js 创建了一个剪刀石头布游戏。所有的功能和元素都是在 js 中创建的。因此，每当我按下 rock 时，它会增加 playerScore，而当我按下 paper 时，它会增加 computerscore。 Scissor 不会增加它们中的任何一个。我检查了功能，但没有发现任何问题。谁能说出为什么会这样？

let computerScore = 0;
let playerScore = 0;

// ----- computer play & rand int  ------//
function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function computerPlay() {
  const x = getRndInteger(1, 3);
  if (x === 1) {
    return "rock";
  } else if (x === 2) {
    return "paper";
  } else {
    return "scissors";
  }
}
const computerChoice = computerPlay();

function playRound(computerChoice, playerChoice) {
  if (computerChoice == "rock" && playerChoice == "scissors") {
    return 1;
  } else if (computerChoice == "scissors" && playerChoice == "paper") {
    return 1;
  } else if (computerChoice == "paper" && playerChoice == "rock") {
    return 1;
  } else if (playerChoice == "rock" && computerChoice == "scissors") {
    return 0;
  } else if (playerChoice == "scissors" && computerChoice == "paper") {
    return 0;
  } else if (playerChoice == "paper" && computerChoice == "rock") {
    return 0;
  } else {
    return 2;
  }
}

//---- player and computer decisions ----//
function chooseRock() {
  playerChoice = "rock";
  if (playRound(computerChoice, 'rock') == 1) {
    computerScore++;
  } else if (playRound(computerChoice, 'rock') == 0) {
    playerScore++;
  } else {
    console.log();
  }
  showscoreboard();
}

function choosePaper() {
  playerChoice = "paper";
  if (playRound(computerChoice, 'paper') == 1) {
    computerScore++;
  } else if (playRound(computerChoice, 'paper') == 0) {
    playerScore++;
  } else {
    console.log();
  }
  showscoreboard();
}

function chooseScissors() {
  playerChoice = "scissors";
  if (playRound(computerChoice, 'scissors') == 1) {
    computerScore++;
  } else if (playRound(computerChoice, 'scissors') == 0) {
    playerScore++;
  } else {
    console.log();
  }
  showscoreboard();
}

// ----------- ADD BUTTONS -----------//
const buttonContainer = document.getElementById('buttonContainer');

let rockBtn = document.createElement('button');
let paperBtn = document.createElement('button');
let scissorsBtn = document.createElement('button');
let scoreboard = document.createElement('div');

rockBtn.addEventListener('click', e => chooseRock());
paperBtn.addEventListener('click', e => choosePaper());
scissorsBtn.addEventListener('click', e => chooseScissors());

rockBtn.innerHTML = 'rock';
paperBtn.innerHTML = 'paper';
scissorsBtn.innerHTML = 'scissors';

function showscoreboard() {
  if (computerScore == 5) {
    computerScore = 0;
    playerScore = 0;
    scoreboard.innerHTML = 'Computer wins!';
  } else if (playerScore == 5) {
    computerScore = 0;
    playerScore = 0;
    scoreboard.innerHTML = 'Player wins!';
  } else {
    scoreboard.innerHTML = computerScore + ' ' + playerScore;
  }
}
buttonContainer.appendChild(rockBtn).className = 'buttonlist';
buttonContainer.appendChild(paperBtn).className = 'buttonlist';
buttonContainer.appendChild(scissorsBtn).className = 'buttonlist';
buttonContainer.appendChild(scoreboard);

<p class="action"> Choose your action! </p>

<div id="buttonContainer"/>

Answer 1

问题是你的方法调用:const computerChoice = computerPlay();它只被调用一次。加载页面时。只要您不刷新页面，该值就会保持不变。

解决方法:

let computerScore = 0;
let playerScore = 0;

// ----- computer play & rand int  ------//
function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function computerPlay() {
  const x = getRndInteger(1, 3);
  console.log('x: ', x);
  if (x === 1) {
    return "rock";
  } else if (x === 2) {
    return "paper";
  } else {
    return "scissors";
  }
}


function playRound(computerChoice, playerChoice) {
  if (computerChoice == "rock" && playerChoice == "scissors") {
    return 1;
  } else if (computerChoice == "scissors" && playerChoice == "paper") {
    return 1;
  } else if (computerChoice == "paper" && playerChoice == "rock") {
    return 1;
  } else if (playerChoice == "rock" && computerChoice == "scissors") {
    return 0;
  } else if (playerChoice == "scissors" && computerChoice == "paper") {
    return 0;
  } else if (playerChoice == "paper" && computerChoice == "rock") {
    return 0;
  } else {
    return 2;
  }
}

//---- player and computer decisions ----//
function chooseRock() {
  playerChoice = "rock";
  let computerChoice = computerPlay();
  if (playRound(computerChoice, 'rock') == 1) {
    computerScore++;
  } else if (playRound(computerChoice, 'rock') == 0) {
    playerScore++;
  } else {
    console.log();
  }
  showscoreboard();
}

function choosePaper() {
  playerChoice = "paper";
  let computerChoice = computerPlay();
  if (playRound(computerChoice, 'paper') == 1) {
    computerScore++;
  } else if (playRound(computerChoice, 'paper') == 0) {
    playerScore++;
  } else {
    console.log();
  }
  showscoreboard();
}

function chooseScissors() {
  playerChoice = "scissors";
  let computerChoice = computerPlay();
  if (playRound(computerChoice, 'scissors') == 1) {
    computerScore++;
  } else if (playRound(computerChoice, 'scissors') == 0) {
    playerScore++;
  } else {
    console.log();
  }
  showscoreboard();
}

// ----------- ADD BUTTONS -----------//
const buttonContainer = document.getElementById('buttonContainer');

let rockBtn = document.createElement('button');
let paperBtn = document.createElement('button');
let scissorsBtn = document.createElement('button');
let scoreboard = document.createElement('div');

rockBtn.addEventListener('click', e => chooseRock());
paperBtn.addEventListener('click', e => choosePaper());
scissorsBtn.addEventListener('click', e => chooseScissors());

rockBtn.innerHTML = 'rock';
paperBtn.innerHTML = 'paper';
scissorsBtn.innerHTML = 'scissors';

function showscoreboard() {
  if (computerScore == 5) {
    computerScore = 0;
    playerScore = 0;
    scoreboard.innerHTML = 'Computer wins!';
  } else if (playerScore == 5) {
    computerScore = 0;
    playerScore = 0;
    scoreboard.innerHTML = 'Player wins!';
  } else {
    scoreboard.innerHTML = computerScore + ' ' + playerScore;
  }
}
buttonContainer.appendChild(rockBtn).className = 'buttonlist';
buttonContainer.appendChild(paperBtn).className = 'buttonlist';
buttonContainer.appendChild(scissorsBtn).className = 'buttonlist';
buttonContainer.appendChild(scoreboard);

<p class="action"> Choose your action! </p>

<div id="buttonContainer"/>