在每轮之后调用新用户选择时循环遍历Javascript

Question

我正在开发一个Rock Paper Scissors游戏，我被困在一个概念上。我希望用户通过文本框选择他们想要的轮数。每次用户点击特定图像（岩石，纸张或剪刀）时，计算机将随机编译，这将为计算机选择和成像。用户和计算机选择的图像都将以红色和蓝色方块显示在页面的中央。我希望这个循环运行直到所有轮次完成然后决定最终的赢家。我迷失了我将如何为我的用户选择图像的功能进行循环调用，并执行此操作直到cpu或用户获胜。所有我正在寻找的是一些指导，为什么我无法弄清楚如何调用用户选择然后选择用户选择，并重复此过程完成。

＆＃13;

＆＃13;

function startGame() {
  document.getElementById("gameInfo").style.display = "contents";
}

function clearGame() {
  document.getElementById("gameInfo").style.display = "none";
  document.getElementById("cpu").src = "";
  document.getElementById("user").src = "";
  document.getElementById("winner").innerHTML = "";
  document.getElementById("userDisplay").innerHTML = "";
  document.getElementById("userName").value = "";
}

function displayName() {
  var txtName = document.getElementById("userName").value;
  document.getElementById("userDisplay").innerHTML = txtName;
}

/*function roundNumber(input) {
    var total = document.getElementById("roundChoice").value;
    //compSelection(total.value);
    console.log(total);
}*/

function userPick(input) {
  document.getElementById("user").src = input.src;
  roundNumber(input.id);
  console.log(input.id);
}

function roundNumber(uInput) {
  var total;
  var element = document.getElementById("roundChoice").value;
  if (element != null) {
    total = element.value;
    document.getElementById("roundChoice").value = "Let's Begin";
  } else {
    document.getElementById("roundChoice").value = "Enter Rounds!!!";
  }

  for (var i = 0; i <= total; i++) {
    var compSelect = Math.floor(Math.random() * 3 + 1);
    var winner = document.getElementById("winner");

    if (compSelect === 1) {
      document.getElementById("cpu").src = "images/rock.jpg";
      if (uInput === "rock_1") {
        winner.innerHTML = "you tied!"
        i--;
      } else if (uInput === "paper_1") {
        winner.innerHTML = "User Wins Round" + i + "!"
      } else {
        winner.innerHTML = "Computer Wins Round" + i + "!"
      }
    } else if (compSelect === 2) {
      document.getElementById("cpu").src = "images/paper.jpg";
      if (uInput === "paper_1") {
        winner.innerHTML = "You tied!"
        i--;
      } else if (uInput === "scissors_1") {
        winner.innerHTML("User Wins Round" + i + "!")
      } else {
        winner.innerHTML = "Computer Wins Round" + i + "!"
      }
    } else {
      document.getElementById("cpu").src = "images/scissors.jpg";
      if (uInput === "scissors_1") {
        winner.innerHTML = "You tied!"
        i--;
      } else if (uInput === "rock_1") {
        winner.innerHTML = "User Wins Round" + i + "!"
      } else {
        winner.innerHTML = "computer WIns"
      }
    }
  }
}

＆＃13;

body {
  font: 80% arial, helvetica, sans-serif;
  background: black;
  margin: 0;
}

#container {
  position: relative;
  width: 1100px;
  border: solid orange;
  border-width: 0 3px;
  margin: auto;
  overflow: hidden;
  height: 78em;
}

#header {
  padding: 1em;
  position: relative;
  overflow: hidden;
}

#title {
  color: white;
  text-align: center;
  font: 280% courier;
  text-decoration: none;
  text-shadow: 1px 1px 8px orange;
}

p.instruct {
  background: grey;
  color: white;
  text-align: center;
  font-size: 120%;
  position: relative;
  border: solid orange;
  border-width: 1px;
  padding: .5em 0 .5em 0;
}

#startButton {
  float: left;
  margin: 0 0 2em 2em;
}

#button {
  background: black;
  border: dotted orange;
  color: orange;
  padding: 4px;
}

#clearButton {
  margin: 0 0 0 12em;
}

#newButton {
  background: black;
  border: dotted orange;
  color: orange;
  padding: 4px;
}

#modifiedGame {
  float: right;
  margin: 0 2em 2em 0;
}

#newGameBtn {
  background: black;
  border: dotted red;
  color: red;
  padding: 4px;
}

#nameInput {
  text-align: center;
  margin: 3em 0 1em 0;
}

#userName {
  text-align: center;
  background: black;
  border: dotted orange;
  padding: 4px;
}

#submitName {
  margin: 0 0 5em 39em;
}

#rounds {
  clear: both;
  text-align: center;
  margin: 0;
}

#roundChoice {
  text-align: center;
  padding: 4px;
  border: dotted orange;
  background: black;
}

#enterRounds {
  margin: 1em 0 2em 39.5em;
}

p.winner {
  background: grey;
  color: white;
  /*clear: both;*/
}

::placeholder {
  color: orange;
}

input,
select,
textarea {
  color: orange;
}

#images,
p {
  clear: both;
  color: white;
}

#images {
  float: left;
}

#images2 {
  float: right;
}

#cpuNameTag {
  text-align: center;
  color: white;
  margin: 0 0 0 45em;
}

#cpuNameTag2 {
  color: white;
  float: left;
}

#paper_1 {
  width: 80px;
  height: 80px;
}

#paper_2 {
  width: 80px;
  height: 80px;
}

#rock_1 {
  width: 80px;
  height: 80px;
}

#rock_2 {
  width: 80px;
  height: 80px;
}

#scissors_1 {
  width: 80px;
  height: 80px;
}

#scissors_2 {
  width: 80px;
  height: 80px;
}

#rock {
  float: left;
}

#paper {
  float: left;
}

#scissors {
  float: left;
}

#rock2 {
  float: right;
}

#scissors2 {
  float: right;
}

#paper2 {
  float: right;
}

#user_displayed_choice {
  background-color: red;
  width: 150px;
  height: 150px;
  float: right;
}

#cpu_displayed_choice {
  clear: both;
  background-color: blue;
  width: 150px;
  height: 150px;
  float: right;
}

#displayed_choices {
  margin: 0 31em 0 0;
}

#user {
  width: 100px;
  height: 100px;
}

#cpu {
  width: 100px;
  height: 100px;
}

#gameInfo {
  display: none;
}

h4 {
  color: orange;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="description" content="CSS intro" />
  <meta name="keywords" content="" />
  <meta name="author" content="" />

  <title>Rock Paper Scissors</title>
  <link href="rps.css" rel="stylesheet" type="text/css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script type="text/javascript" src="rps.js"></script>
</head>

<body>
  <div id="container">
    <div id="header">
      <h1 id="title"><b>Welcome </b><br><b>to</b> <br><b>Rock Paper Scissors!</b></h1>
    </div>

    <!--Instructions for game-->
    <p class="instruct">Ready to attempt a game of Rock, Paper, Scissors? Select the start button, and then choose the amount of rounds you want to play. Ties in each round will not count towards total rounds. If a tie is present at the end of all the rounds, one final overtime
      round will decide the winner. If you dare, try our harder version by beating the computer to unlock.</p>

    <!--Buttons for Start, Clear, and Harder Game-->
    <div id="modifiedGame">
      <input type="button" id="newGameBtn" onclick="newGame" value="Want to try a harder game?">
    </div>
    <div id="startButton">
      <input type="button" id="button" onclick="startGame()" value="Start Game">
    </div>
    <section id="gameInfo">
      <div id="clearButton">
        <input type="button" id="newButton" onclick="clearGame()" value="Clear Game">
      </div>
      <!--^^^-->

      <!--Name Input, Round Input-->
      <div id="nameInput">
        <input type="text" id="userName" placeholder="What is your name?" autofocus required>
      </div>
      <div id="submitName">
        <input type="button" id="nameButton" value="Secure Name" onclick="displayName(this)">
      </div>
      <div id="rounds">
        <input type="text" id="roundChoice" placeholder="Enter # of Rounds" autofocus required>
      </div>
      <div id="enterRounds">
        <input type="button" id="roundButton" value="Set Rounds" onclick="roundNumber(this)">
      </div>

      <div id="cpuNameTag2">
        <h4 id="userDisplay" value=""></h4>
      </div>
      <div id="cpuNameTag">
        <h4>CPU Chooses:</h4>
      </div>

      <!--Clickable Images for User to Choose. Some Displayed by CPU name to show what CPU Chose after User-->
      <div id="images">
        <div id="rock">
          <img src="images/rock.jpg" alt="rock" id="rock_1" onclick="userPick(this)">
        </div>
        <div id="paper">
          <img src="images/paper.jpg" alt="paper" id="paper_1" onclick="userPick(this)">
        </div>
        <div id="scissors">
          <img src="images/scissors.jpg" alt="scissors" id="scissors_1" onclick="userPick(this)">
        </div>
      </div>
      <div id="images2">
        <div id="scissors2">
          <img src="images/scissors.jpg" alt="scissors" id="scissors_2">
        </div>
        <div id="paper2">
          <img src="images/paper.jpg" alt="paper" id="paper_2">
        </div>
        <div id="rock2">
          <img src="images/rock.jpg" alt="rock" id="rock_2">
        </div>
      </div>
      <div id="displayed_choices">
        <div id="cpu_displayed_choice">
          <img id="cpu" src="">
        </div>
        <div id="user_displayed_choice">
          <img id="user" src="">
        </div>
      </div>
      <h1 id="winner"></h1>
    </section>
  </div>
</body>

</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这里有一个没有for循环的工作示例，使用了3个全局变量（currentRound，totalRounds和wins）。

＆＃13;

＆＃13;

var currentRound = -1;
var totalRounds = -1;
var wins = -1;
function startGame() {
  document.getElementById("gameInfo").style.display = "contents";
}

function clearGame() {
  document.getElementById("gameInfo").style.display = "none";
  document.getElementById("cpu").src = "";
  document.getElementById("user").src = "";
  document.getElementById("winner").innerHTML = "";
  document.getElementById("userDisplay").innerHTML = "";
  document.getElementById("userName").value = "";
}

function displayName() {
  var txtName = document.getElementById("userName").value;
  document.getElementById("userDisplay").innerHTML = txtName;
}

function setRounds() {
  var value = document.getElementById("roundChoice").value;
  if (value) {
    totalRounds = parseInt(value);
    currentRound = 0;
    wins = 0;
    document.getElementById("winner").innerHTML = "Let's Begin";
  } else {
    document.getElementById("roundChoice").value = "Enter Rounds!!!";
    totalRounds = -1;
  }
}

function userPick(input) {
  if (totalRounds < 0) {
    alert("Enter Rounds!!!");
    return;
  }
  
  if (currentRound >= totalRounds) {
    alert("Rounds Finished! Enter Rounds again!!!");
    return;
  }
  //console.log(currentRound + "," + totalRounds)
  document.getElementById("user").src = input.src;
  currentRound++;
  roundNumber(input.id);
}

function roundNumber(uInput) {
  var compSelect = Math.floor(Math.random() * 3 + 1);
  var winner = document.getElementById("winner");
  var i = currentRound + 1;
  
  if (compSelect === 1) {
    document.getElementById("cpu").src = "https://image.freepik.com/iconos-gratis/rock-n-roll-gesto-simbolo-de-la-mano-esbozado_318-72191.jpg";
    if (uInput === "rock_1") {
      winner.innerHTML = "you tied!"
      currentRound--;
    } else if (uInput === "paper_1") {
      wins++;
      winner.innerHTML = "User Wins Round " + i + "!"
    } else {
      winner.innerHTML = "Computer Wins Round " + i + "!"
    }
  } else if (compSelect === 2) {
    document.getElementById("cpu").src = "https://i.pinimg.com/originals/7c/58/78/7c58781da79c7e9b089f206a1ad7b9b5.png";
    if (uInput === "paper_1") {
      winner.innerHTML = "You tied!"
      currentRound--;
    } else if (uInput === "scissors_1") {
      wins++;
      winner.innerHTML = "User Wins Round " + i + "!"
    } else {
      winner.innerHTML = "Computer Wins Round " + i + "!"
    }
  } else {
    document.getElementById("cpu").src = "https://image.flaticon.com/icons/png/128/164/164986.png";
    if (uInput === "scissors_1") {
      winner.innerHTML = "You tied!"
      currentRound--;
    } else if (uInput === "rock_1") {
      wins++;
      winner.innerHTML = "User Wins Round " + i + "!"
    } else {
      winner.innerHTML = "computer WIn " + i + "!"
    }  
  }
  
  if (currentRound == totalRounds) {
    alert(totalRounds + " Finished:\n" 
      + "- wins: " + wins + "\n"
      + "- looses: " + (totalRounds - wins))
  }
}

＆＃13;

body {
  font: 80% arial, helvetica, sans-serif;
  background: black;
  margin: 0;
}

input[type=button],
#images img {
  cursor: pointer;
}

#container {
  position: relative;
  width: 1100px;
  border: solid orange;
  border-width: 0 3px;
  margin: auto;
  overflow: hidden;
  height: 78em;
}

#header {
  padding: 1em;
  position: relative;
  overflow: hidden;
}

#title {
  color: white;
  text-align: center;
  font: 280% courier;
  text-decoration: none;
  text-shadow: 1px 1px 8px orange;
}

p.instruct {
  background: grey;
  color: white;
  text-align: center;
  font-size: 120%;
  position: relative;
  border: solid orange;
  border-width: 1px;
  padding: .5em 0 .5em 0;
}

#startButton {
  float: left;
  margin: 0 0 2em 2em;
}

#button {
  background: black;
  border: dotted orange;
  color: orange;
  padding: 4px;
}

#clearButton {
  margin: 0 0 0 12em;
}

#newButton {
  background: black;
  border: dotted orange;
  color: orange;
  padding: 4px;
}

#modifiedGame {
  float: right;
  margin: 0 2em 2em 0;
}

#newGameBtn {
  background: black;
  border: dotted red;
  color: red;
  padding: 4px;
}

#nameInput {
  text-align: center;
  margin: 3em 0 1em 0;
}

#userName {
  text-align: center;
  background: black;
  border: dotted orange;
  padding: 4px;
}

#submitName {
  margin: 0 0 5em 39em;
}

#rounds {
  clear: both;
  text-align: center;
  margin: 0;
}

#roundChoice {
  text-align: center;
  padding: 4px;
  border: dotted orange;
  background: black;
}

#enterRounds {
  margin: 1em 0 2em 39.5em;
}

p.winner {
  background: grey;
  color: white;
  /*clear: both;*/
}

::placeholder {
  color: orange;
}

input,
select,
textarea {
  color: orange;
}

#images,
p {
  clear: both;
  color: white;
  float: left;
}

#images2 {
  float: right;
}

#cpuNameTag {
  text-align: center;
  color: white;
  margin: 0 0 0 45em;
}

#cpuNameTag2 {
  color: white;
  float: left;
}

#paper_1 {
  width: 80px;
  height: 80px;
}

#paper_2 {
  width: 80px;
  height: 80px;
}

#rock_1 {
  width: 80px;
  height: 80px;
}

#rock_2 {
  width: 80px;
  height: 80px;
}

#scissors_1 {
  width: 80px;
  height: 80px;
}

#scissors_2 {
  width: 80px;
  height: 80px;
}

#rock {
  float: left;
}

#paper {
  float: left;
}

#scissors {
  float: left;
}

#rock2 {
  float: right;
}

#scissors2 {
  float: right;
}

#paper2 {
  float: right;
}

#user_displayed_choice {
  background-color: red;
  width: 150px;
  height: 150px;
  float: right;
}

#cpu_displayed_choice {
  clear: both;
  background-color: blue;
  width: 150px;
  height: 150px;
  float: right;
}

#displayed_choices {
  margin: 0 31em 0 0;
}

#user {
  width: 100px;
  height: 100px;
}

#cpu {
  width: 100px;
  height: 100px;
}

#gameInfo {
  display: none;
}

h4 {
  color: orange;
}

#winner {
  text-align: center;
  color: white;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="description" content="CSS intro" />
  <meta name="keywords" content="" />
  <meta name="author" content="" />

  <title>Rock Paper Scissors</title>
  <link href="rps.css" rel="stylesheet" type="text/css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script type="text/javascript" src="rps.js"></script>
</head>

<body>
  <div id="container">
    <div id="header">
      <h1 id="title"><b>Welcome </b><br><b>to</b> <br><b>Rock Paper Scissors!</b></h1>
    </div>

    <!--Instructions for game-->
    <p class="instruct">Ready to attempt a game of Rock, Paper, Scissors? Select the start button, and then choose the amount of rounds you want to play. Ties in each round will not count towards total rounds. If a tie is present at the end of all the rounds, one final overtime
      round will decide the winner. If you dare, try our harder version by beating the computer to unlock.</p>

    <!--Buttons for Start, Clear, and Harder Game-->
    <div id="modifiedGame">
      <input type="button" id="newGameBtn" onclick="newGame" value="Want to try a harder game?">
    </div>
    <div id="startButton">
      <input type="button" id="button" onclick="startGame()" value="Start Game">
    </div>
    <section id="gameInfo">
      <div id="clearButton">
        <input type="button" id="newButton" onclick="clearGame()" value="Clear Game">
      </div>
      <!--^^^-->

      <!--Name Input, Round Input-->
      <div id="nameInput">
        <input type="text" id="userName" placeholder="What is your name?" autofocus required>
      </div>
      <div id="submitName">
        <input type="button" id="nameButton" value="Secure Name" onclick="displayName(this)">
      </div>
      <div id="rounds">
        <input type="text" id="roundChoice" placeholder="Enter # of Rounds" autofocus required>
      </div>
      <div id="enterRounds">
        <input type="button" id="roundButton" value="Set Rounds" onclick="setRounds()">
      </div>

      <div id="cpuNameTag2">
        <h4 id="userDisplay" value=""></h4>
      </div>
      <div id="cpuNameTag">
        <h4>CPU Chooses:</h4>
      </div>

      <!--Clickable Images for User to Choose. Some Displayed by CPU name to show what CPU Chose after User-->
      <div id="images">
        <div id="rock">
          <img src="https://image.freepik.com/iconos-gratis/rock-n-roll-gesto-simbolo-de-la-mano-esbozado_318-72191.jpg" alt="rock" id="rock_1" onclick="userPick(this)">
        </div>
        <div id="paper">
          <img src="https://i.pinimg.com/originals/7c/58/78/7c58781da79c7e9b089f206a1ad7b9b5.png" alt="paper" id="paper_1" onclick="userPick(this)">
        </div>
        <div id="scissors">
          <img src="https://image.flaticon.com/icons/png/128/164/164986.png" alt="scissors" id="scissors_1" onclick="userPick(this)">
        </div>
      </div>
      <div id="images2">
        <div id="scissors2">
          <img src="https://image.flaticon.com/icons/png/128/164/164986.png" alt="scissors" id="scissors_2">
        </div>
        <div id="paper2">
          <img src="https://i.pinimg.com/originals/7c/58/78/7c58781da79c7e9b089f206a1ad7b9b5.png" alt="paper" id="paper_2">
        </div>
        <div id="rock2">
          <img src="https://image.freepik.com/iconos-gratis/rock-n-roll-gesto-simbolo-de-la-mano-esbozado_318-72191.jpg" alt="rock" id="rock_2">
        </div>
      </div>
      <div id="displayed_choices">
        <div id="cpu_displayed_choice">
          <img id="cpu" src="">
        </div>
        <div id="user_displayed_choice">
          <img id="user" src="">
        </div>
      </div>
      <h1 id="winner"></h1>
    </section>
  </div>
</body>

</html>

＆＃13;

＆＃13;

＆＃13;