时间戳

首页 > 解决方案 > 如何记录和更新剪刀石头布游戏的输赢历史？

javascript - 如何记录和更新剪刀石头布游戏的输赢历史？

问题描述

我需要创建一个新函数，该函数将返回每次获胜、失败和平局结果的数量。使用每个用户的选择（石头、纸或剪刀），然后单击“开始！” 按钮它将更新所有计数器和日志。

HTML 显示一种形式的按钮（每个用于石头和剪刀选项），以及正在执行的“GO！” 按钮。

JS只有一个函数play()，执行随机化的石头、纸、剪刀数组，这将决定计算机将选择什么。此函数仅声明每场比赛是赢、输还是平，但不记录（感谢用户@BarMar 帮助我完成这部分）：

function play() {

  var types = ['Rock', 'Paper', 'Scissors'];
  var computer_choice = types[Math.floor(Math.random() * (types.length))];

  document.getElementById("choiceDisplay").innerHTML = computer_choice;

  var user_button = document.querySelector("input[name=choice]:checked");

  if (user_button) {
    var user_choice = user_button.value;
  } else {
    window.alert("You have to choose Rock, Paper, or Scissors first.");
    return;
  }

  if (user_choice == computer_choice) {
    document.getElementById("result").textContent = "Tie!";
    return;
  }

  switch (computer_choice) {
    case "Rock":
      if (user_choice == "Paper") {
        document.getElementById("result").textContent = "You Win!";
      } else {
        document.getElementById("result").textContent = "You Lost.";
      }
      break;
    case "Paper":
      if (user_choice == "Scissors") {
        document.getElementById("result").textContent = "You Win!";
      } else {
        document.getElementById("result").textContent = "You Lost.";
      }
      break;
    case "Scissors":
      if (user_choice == "Rock") {
        document.getElementById("result").textContent = "You Win!";
      } else {
        document.getElementById("result").textContent = "You Lost.";
      }
  }
}
<html>
  <body>
    <div class="stuff">
      <h2> Select one: </h2>
      <div class="choices">
        <p> 
          <form>
            <input type="radio" name="choice" value= "Rock" id="Rock"/>Rock
            <br>
            <input type="radio" name="choice" value= "Paper" id="Paper"/>Paper
            <br>
            <input type="radio" name="choice" value="Scissors" id="Scissors"/>Scissors
          </form>
        </p>
      </div>
      <div class= "choiceDisplay">
        <div class = "ccc">The Computer Chose:</div>
        <p id= "choiceDisplay"></p>
        <div class = "button"> <button onclick="play()">GO!</button> </div>
        <div class= "label"><p id = "result"></p></div>
      </div>
    </div>
  </body>
</html>

标签： javascripthtmlcss

解决方案

在函数之外，我声明了一个名为“record”的全局空数组。

var record = [];

每次用户输、赢或平局时，我使用“push”方法将结果添加到数组中，如下所示：

record.push("Tie");

在 HTML 文件的末尾，我添加了一个带有记录 ID 的空 div，以便于检索。

<div id="records"></div>

在play()函数的最后，我添加了一个片段来过滤和显示结果。

document.getElementById("records").innerHTML = "<p>You lost " + record.filter(x => x=="Lose").length + " times.</p><p>You won " + record.filter(x => x=="Win").length + " times.</p><p>It's been a tie " + record.filter(x => x=="Tie").length + " times.</p>";

在上面的代码片段中，您会注意到这段计算该人获胜次数的部分：

record.filter(x => x=="Win").length


var record = [];
function play() {
      var types = ['Rock', 'Paper', 'Scissors'];
      var computer_choice = types[Math.floor(Math.random() * (types.length))];

      document.getElementById("choiceDisplay").innerHTML = computer_choice;

      var user_button = document.querySelector("input[name=choice]:checked");

      if (user_button) {
        var user_choice = user_button.value;
      } else {
        window.alert("You have to choose Rock, Paper, or Scissors first.");
        return;
      }

      if (user_choice == computer_choice) {
        document.getElementById("result").textContent = "Tie!";
        record.push("Tie");
      } else {
        switch (computer_choice) {
          case "Rock":
            if (user_choice == "Paper") {
              document.getElementById("result").textContent = "You Win!";
              record.push("Win");
            } else {
              document.getElementById("result").textContent = "You Lost.";
              record.push("Lose");
            }
            break;
          case "Paper":
            if (user_choice == "Scissors") {
              document.getElementById("result").textContent = "You Win!";
              record.push("Win");
            } else {
              document.getElementById("result").textContent = "You Lost.";
              record.push("Lose");
            }
            break;
          case "Scissors":
            if (user_choice == "Rock") {
              document.getElementById("result").textContent = "You Win!";
              record.push("Win");
            } else {
              document.getElementById("result").textContent = "You Lost.";
              record.push("Lose");
            }
        }
      }
      document.getElementById("records").innerHTML = "<p>You lost " + record.filter(x => x=="Lose").length + " times.</p><p>You won " + record.filter(x => x=="Win").length + " times.</p><p>It's been a tie " + record.filter(x => x=="Tie").length + " times.</p>";
    }
<html>
  <body>
    <div class="stuff">
      <h2> Select one: </h2>
      <div class="choices">
        <p> 
          <form>
            <input type="radio" name="choice" value= "Rock" id="Rock"/>Rock
            <br>
            <input type="radio" name="choice" value= "Paper" id="Paper"/>Paper
            <br>
            <input type="radio" name="choice" value="Scissors" id="Scissors"/>Scissors
          </form>
        </p>
      </div>
      <div class= "choiceDisplay">
        <div class = "ccc">The Computer Chose:</div>
        <p id= "choiceDisplay"></p>
        <div class = "button"> <button onclick="play()">GO!</button> </div>
        <div class= "label"><p id = "result"></p></div>
        <div id="records"></div>
      </div>
    </div>
  </body>
</html>

这样做的问题是记录数组很容易被开发工具操纵/破解。

推荐阅读