时间戳

首页 > 解决方案 > Rock Paper Scissors -> 输出与结果不一致

javascript - Rock Paper Scissors -> 输出与结果不一致

问题描述

背景：

我是一名编码新手，大约一周前开始学习 JS。我用简单的 HTML/CSS UI 和带有一点 DOM 操作的 Javascript 创建了一个石头剪刀布游戏（处于早期阶段）。我一直在试图弄清楚为什么代码在一段时间内不能在这里工作，但我真的很感激任何反馈，即使很小。谢谢你。

问题：

  1. 当我单击 Rock、Paper 或 Scissors 时，如下所示，如果我反复按相同的选项，我会随机得到三个响应中的任何一个：
    • “这一局你赢了！……”
    • “这一局你输了！……”
    • “这是一个平局！...”

发布在<h3 class=".message">元素下。

用户界面

  1. computerChose = computerPlay();即使我反复按下选项，变量也不会改变初始选择的输出。我似乎无法弄清楚如何“重置”计算机选择。

但是为用户和计算机添加的分数很好，尽管它对应于<h3 class=".message">元素中显示的输出。

//Counts the scores for player and computer
let playerScoreCounter = 0;
let computerScoreCounter = 0;

//3 Btn event listeners for each round, each choice
const rockBtn = document.querySelector(".rock");
rockBtn.addEventListener('click', function() {
  let result = playRound("Rock");
  if (result == "win") {
    playerScoreCounter++;
    document.querySelector(".message").textContent = `You win this round! Rock beats ${computerChose}`;
  } else if (result == "loss") {
    computerScoreCounter++;
    document.querySelector(".message").textContent = `You lost this round! ${computerChose} beats Rock`;
  } else if (result == "tie") {
    document.querySelector(".message").textContent = `It's a tie! You both selected Rock`;
  }
  document.querySelector(".your-score").textContent = `Your Score: ${playerScoreCounter}`;
  document.querySelector(".computer-score").textContent = `Computer Score: ${computerScoreCounter}`;
  console.log(computerChose);
});

const paperBtn = document.querySelector(".paper");
paperBtn.addEventListener('click', function() {
  let result = playRound("Paper");
  if (result == "win") {
    playerScoreCounter++;
    document.querySelector(".message").textContent = `You win this round! Paper beats ${computerChose}`;
  } else if (result == "loss") {
    computerScoreCounter++;
    document.querySelector(".message").textContent = `You lost this round! ${computerChose} beats Paper`;
  } else if (result == "tie") {
    document.querySelector(".message").textContent = `It's a tie! You both selected Paper`;
  }
  document.querySelector(".your-score").textContent = `Your Score: ${playerScoreCounter}`;
  document.querySelector(".computer-score").textContent = `Computer Score: ${computerScoreCounter}`;
});

const scissorsBtn = document.querySelector(".scissors");
scissorsBtn.addEventListener('click', function() {
  let result = playRound("Scissors");
  if (result == "win") {
    playerScoreCounter++;
    document.querySelector(".message").textContent = `You win this round! Scissors beats ${computerChose}`;
  } else if (result == "loss") {
    computerScoreCounter++;
    document.querySelector(".message").textContent = `You lost this round! ${computerChose} beats Scissors`;
  } else if (result == "tie") {
    document.querySelector(".message").textContent = `It's a tie! You both selected Scissors`;
  }
  document.querySelector(".your-score").textContent = `Your Score: ${playerScoreCounter}`;
  document.querySelector(".computer-score").textContent = `Computer Score: ${computerScoreCounter}`;
})

//Functions for play

const computerChose = computerPlay();

function computerPlay() {
  const computerChoice = ["Rock", "Paper", "Scissors"];
  const computerChooses =
    computerChoice[Math.floor(Math.random() * computerChoice.length)];
  return computerChooses;
}

function playRound(playerSelection) {
  const computerSelection = computerPlay();

  if (playerSelection == computerSelection) {
    return "tie";
  } else if (
    (playerSelection == "Rock" && computerSelection == "Scissors") ||
    (playerSelection == "Paper" && computerSelection == "Rock") ||
    (playerSelection == "Scissors" && computerSelection == "Paper")
  ) {
    return "win";
  } else if (
    (playerSelection == "Rock" && computerSelection == "Paper") ||
    (playerSelection == "Paper" && computerSelection == "Scissors") ||
    (playerSelection == "Scissors" && computerSelection == "Rock")
  ) {
    return "loss";
  }
}
<body>

  <div class="container-1">
    <header>
      <h1>Let's play Rock, Paper, Scissors!</h1>
      <h2>Play against the Computer</h2>
    </header>
  </div>

  <div class="container-2">
    <div class="choices-block rock-choice-block">
      <i class="fas fa-hand-rock fa-10x"></i>
      <button class="btn rock">Rock</button>
    </div>
    <div class="choices-block paper-choice-block">
      <i class="fas fa-hand-paper fa-10x"></i>
      <button class="btn paper">Paper</button>
    </div>

    <div class="choices-block scissors-choice-block">
      <i class="fas fa-hand-scissors fa-10x"></i>
      <button class="btn scissors">Scissors</button>
    </div>
  </div>

  <div class="container-3">
    <div class="message-box">
      <h3 class="message"></h3>
    </div>
    <div class="score">
      <h3 class="your-score">Your Score: 0</h3>
      <h3 class="computer-score">Computer Score: 0</h3>
    </div>
    <div class="results-box">
      <h1 class="results"></h1>
    </div>
  </div>


  <script src="index.js"></script>
</body>

标签： javascript

解决方案

推荐阅读