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-记分板由于受到限制而不能在此处用于堆栈，因此您应该复制粘贴并在计算机上运行。

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

1 个答案: