javascript - 石头剪刀布游戏的得分计数器 javascript

Question

我已经完成了剪刀石头布游戏，现在正在努力为其添加分数。我遇到的问题是我无法让程序增加分数，而是每轮都会重置。 我尝试过创建两个变量，然后每当其中一个变量获胜时在我的函数中添加+1，但我无法保存它。

var userscore = 0;
var computerscore = 0;

function computerdecision() {
  var Number = Math.floor(Math.random() * 3);
  switch (Number) {
    case 0:
      return "rock";
    case 1:
      return "scissor";
    case 2:
      return "paper";
  }
}

function declareWinner(userweapon, computerweapon) {
  if (userweapon === computerweapon) {
    console.log("Tiebreak");
  } else if (userweapon === "rock" && computerweapon === "scissor" ||
    userweapon === "paper" && computerweapon === "rock" || userweapon === "scissor" && computerweapon ===
    "paper") {
    console.log("User won");
    userscore++;
  } else {
    console.log("Computer won");
    computerscore++;
  }
}

var userweapon = "rock"
var computerweapon = computerdecision();

console.log('Your weapon is: ' + userweapon);
console.log("Computer's weapon is: " + computerweapon);

declareWinner(userweapon, computerweapon);

console.log("User: " + userscore)
console.log("computer: " + computerscore)

提前致谢。

Answer 1

为了玩另一轮，用户需要刷新页面(如 @EmielZuurbier 评论)，因此除非您使用某种数据保存 - 所有记录都将丢失。

一个快速修复方法是制作一个可以再次调用该函数的按钮。但这不会在退出/刷新后保存记录。我想这不是您要搜索的内容...

无论如何，我编辑并重写了您的代码以使其可播放+添加了一些本地存储记分板。我将有趣的部分留给您来更改 onclick 事件并根据您的需要设置其样式。

var userscore = localStorage.getItem('userScore');
document.querySelector("#userScore").textContent = userscore;
var computerscore = localStorage.getItem('computerScore');
document.querySelector("#computerScore").textContent = computerscore;

function computerdecision() {
  var Number = Math.floor(Math.random() * 3);
  switch (Number) {
    case 0:
      return "rock";
    case 1:
      return "scissor";
    case 2:
      return "paper";
  }
}

function declareWinner() {
  var computerweapon = computerdecision();
  var userweapon = document.querySelector('input[name="weapon"]:checked').value;
  if (userweapon === computerweapon) {
    document.querySelector("#gameResult").textContent = " Tiebreak ";
  } 
  else if (userweapon === "rock" && computerweapon === "scissor" || userweapon === "paper" && computerweapon === "rock" || userweapon === "scissor" && computerweapon === "paper") {
    document.querySelector("#gameResult").textContent = " User won ";
    userscore++;
  } else {
    document.querySelector("#gameResult").textContent = " Computer won ";
    computerscore++;
  }
document.querySelector("#userWeapon").textContent = " User weapon was: " + userweapon;
document.querySelector("#computerWeapon").textContent = " Computer's weapon was: " + computerweapon;

document.querySelector("#userScore").textContent = userscore;
localStorage.setItem('userScore', userscore);
document.querySelector("#computerScore").textContent = computerscore;
localStorage.setItem('computerScore', computerscore);
}

<label for="rock"><input type="radio" name="weapon" id="rock" value="rock" checked />Rock</label>
<label for="paper"><input type="radio"name="weapon" id="paper" value="paper" />Paper</label>
<label for="scissor"><input type="radio"name="weapon" id="scissor" value="scissor" />Scissor</label>

<button onclick="declareWinner();">Play</button>
<div> 
Game Result: <span id="gameResult"></span>
<br />
Computer: <mark id="computerScore"></mark>
<br />
Computer Weapon: <span id="computerWeapon"></span>
<br />
User: <mark id="userScore"></mark>
<br />
User Weapon: <span id="userWeapon"></span>
</div>
<hr />
<button onclick="localStorage.clear();">clear saved records</button>

希望对您有帮助!如果您有更多问题，请发表评论。

<小时/>

P.S - 计分板在堆栈上无法工作，因为它受到限制，因此您应该复制粘贴并在您的计算机上运行它。