剪刀石头布项目Odin项目-按钮辅助

如何解决剪刀石头布项目Odin项目-按钮辅助

我已经尝试了好几个小时，以便在您单击页面上的任何按钮（石头，纸张，剪刀）时，它将岩石，纸张或剪刀的值传递给我的变量“ userChoice”。我对javascript还是很陌生，所以请记住我的代码可能非常错误。任何帮助/建议将不胜感激！

这是我的HTML代码：

<html>
<head></head>
  <title>Rock,Paper,Scissors</title>
  <link rel="stylesheet" href="styles.css">
  <Meta charset="UTF-8"/>
</head>
<h1>Welcome to the Rock,Scissors Championship!</h1>
<body>

  <div class="selections">
    <div class="rock">
      <input type="image" id="rock" src="/home/johannesvw3/Desktop/web-projects/Rock/images/rock.png">
      <button class="text-rock">ROCK</button>
      <div class="paper">
        <input type="image" id="paper" src="/home/johannesvw3/Desktop/web-projects/Rock/images/paper.png">
        <button class="text-paper">PAPER</button>
        <div class="scissor">
          <input type="image" id="scissors" src="/home/johannesvw3/Desktop/web-projects/Rock/images/scissors.png">
          <button class="text-scissors">SCISSORS</button>
    </div>  
    <div class="scoreboard">scoreboard
      <div class="user">User:
      <div class="comp">Computer:
    </div>


  <script src="rock.js"></script>
</body>
</html>

这是我的Javascript：

//userChoice
const myButtonRock = document.querySelector('.text-rock');
const myButtonPaper = document.querySelector('.text-paper');
const myButtonScissors = document.querySelector('.text-scissors');

function userChoices() {
  let userChoice = ["rock","paper","scissors"];
  return userChoice;
}
  myButtonRock.onclick = function() {
    userChoice('rock');
  }

  myButtonPaper.onclick = function() {
    userChoice('paper');
  }

  myButtonScissors.onclick = function() {
    userChoice('scissors');
  }

  //Computer Choice
  function compChoice() {
    let compChoice = Math.floor(Math.random() * 3);
    if (compChoice == 0) {
      compChoice = "rock";
    } else if (compChoice == 1) {
      compChoice = "paper";
    } else {
      compChoice = "scissors";
    }
    return compChoice
  }

  let userscore = 0;
  let compscore = 0;
  let draws = 0;

  
  function playRound(userChoice,compChoice) {
  
  //Result Messages
    let userWinsRound = "You Win!"
    let compWinsRound = "You Lose :(";
    let draw = "It's a draw";
  
    //Rock Choice
    if (userChoice == "rock" && compChoice == "scissors") {
      alert("user score:" + " " + ++userscore + " " + userWinsRound)
    } else if (userChoice == "rock" && compChoice == "paper") {
      alert("computer score:" + " " + ++compscore + " " + compWinsRound)
    } else if (userChoice == "rock" && compChoice == "rock") {
      alert("draws:" + " " + ++draws + " " + draw)
    }
    //paper Choice
    if (userChoice == "paper" && compChoice == "rock") {
      alert("user score:" + " " + ++userscore + " " + userWinsRound)
    } else if (userChoice == "paper" && compChoice == "scissors") {
      alert("computer score:" + " " + ++compscore + " " + compWinsRound)
    } else if (userChoice == "paper" && compChoice == "paper") {
      alert("draws:" + " " + ++draws + " " + draw)
    }
    //scissors Choice
    if (userChoice == "scissors" && compChoice == "paper") {
      alert("user score:" + " " + ++userscore + " " + userWinsRound)
    } else if (userChoice == "scissors" && compChoice == "rock") {
      alert("computer score:" + " " + ++compscore + " " + compWinsRound)
    } else if (userChoice == "scissors" && compChoice == "scissors") {
      alert("draws:" + " " + ++draws + " " + compWinsRound)
    } else {
      return "Something Went Wrong";
    }
        
    }
    
      while (userscore < 5 && compscore < 5) {
        console.log(playRound(userChoices(),compChoice()));
      }

剪刀石头布项目Odin项目-按钮辅助

如何解决剪刀石头布项目Odin项目-按钮辅助

相关推荐