个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-27 23:18:38 25 4
gpt4 key购买 nike

我需要创建一个新函数来返回每次获胜、失败和平局结果的数量。随着用户的每个选择(石头、布或剪刀)，并单击“开始!”按钮，它将更新所有计数器和日志。

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>

最佳答案

我猜这是一道作业题，因为我已经看过两次了，哈哈；无论如何，一种方法是为结果添加显示并更新它们。

显示

   <h4>Wins <span id="wins">0</span></h4>
   <h4>Losses <span id="losses">0</span></h4>
   <h4>Ties <span id="ties">0</span></h4>

更新结构

var wins = document.getElementById("wins");
wins.innerHTML = parseInt(wins.innerHTML) + 1;

例子 https://jsfiddle.net/8qpz9tnx/

关于javascript - 如何记录和更新剪刀石头布游戏的胜负平历史记录？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58141566/

25 4 0
文章推荐： c++ - 我怎样才能释放 ostringstream？
文章推荐： jquery - 禁用 youtube 中显示的缩略图
文章推荐： c++ - 在 Qt 中创建的 GUI 滞后(由 QTime 验证)
文章推荐： php - 在变量中添加空格
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com