如何让石头、纸、剪刀游戏重复？答案

【问题标题】：How to make rock, paper, scissor game repeat?如何让石头、纸、剪刀游戏重复？
【发布时间】：2023-03-21 13:33:01
【问题描述】：

目前正在做课堂作业，写好我的 html 和 js 文件。我的主要问题是我无法让计算机抓取一个新的随机数，因此它只会保留一个选择（石头、纸或剪刀）。我还尝试确保游戏持续时间不超过 5 场，但即使尝试也遇到问题。

我的 HTML：（仅包括必要的，仍然是一个正在进行的课程项目）

4 个按钮，每个选择一个，一个用于比较答案

<button onClick='choose("rock")'>
    Rock
    <img src="images/rock.jpg" width="100" height="100" alt="rock">
</button>
<button onClick='choose("paper")'>
    Paper
    <img src="images/paper.jpg" width="100" height="100" alt="paper">
</button>
<button onClick='choose("scissors")'>
    Scissors
    <img src="images/scissors.jpg" width="100" height="100" alt="scissprs">
</button>
<button onClick='compare(user, computerChoice)'>
    Go!
</button>

<p id="result">Winner: </p>
<p id="playerscore">Player Score:</p>
<p id="computerscore">Computer Score: </p>

我的 JS：（故意省略了所有条件，除了一个和一些替换为“...”）

    var user;
var choose = function(choice) {
    user = choice;
}
var computerChoice = Math.random();
if(computerChoice < 0.34) {
    computerChoice = "rock";
} 
else if(computerChoice < 0.67) {
    computerChoice = "paper";
} 
else{
    computerChoice = "scissors";
}


var playerscore = 0;
var computerscore = 0;
var game = 0;
var compare = function(choice1, choice2) {


else if(choice1 == "paper") {
    if(choice2 == "rock") {
        ...
        playerscore++;
        game++;
        document.getElementById("playerscore").innerHTML = playerscore;
    } else {
        document.getElementById("result").innerHTML = "Computer Wins on Scissors";
        computerscore++;
        game++;
        document.getElementById("computerscore").innerHTML = computerscore;
    }
}

}
};

那么从这里我可以做些什么来让我的网页重复这个脚本直到玩了五场比赛？我尝试使用 do-while 循环，但不断出现：比较未声明的问题，当我尝试将其全部放在一个名为 rockpaperscissors 的函数中时，用户未声明。

【问题讨论】：

标签： javascript html

【解决方案1】：

这是你的游戏（完全正常）

var playerscore = 0;
var computerscore = 0;
var userChoice;
var computerChoice;

function choose(choice) {
  userChoice = choice;
}

function compMakeAchoice() {
  computerChoice = Math.floor((Math.random() * 3) + 1);
  alert(computerChoice);
  if (computerChoice == 1) {
    computerChoice = "rock";
  } else if (computerChoice == 2) {
    computerChoice = "paper";
  } else if (computerChoice == 3) {
    computerChoice = "scissors";
  }
}

function compare() {
  compMakeAchoice();
  if ((computerChoice == "rock" && userChoice == "rock") || (computerChoice == "paper" && userChoice == "paper") || (computerChoice == "scissors" && userChoice == "scissors")) {
    document.getElementById("result").innerHTML = "Winner: " + "No one won. Both chose " + userChoice;
  } else if ((computerChoice == "rock" && userChoice == "paper") || (computerChoice == "paper" && userChoice == "scissors") || (computerChoice == "scissors" && userChoice == "rock")) {
    playerscore++;
    document.getElementById("playerscore").innerHTML = "Player Score: " + playerscore;
    document.getElementById("result").innerHTML = "Winner: " + "You won (Your Choice:" + userChoice + " and Computer's choice:" + computerChoice + ")";
  } else {
    computerscore++;
    document.getElementById("computerscore").innerHTML = "Computer Score: " + computerscore;
    document.getElementById("result").innerHTML = "Winner: " + "Computer won (Your Choice:" + userChoice + " and Computer's choice:" + computerChoice + ")";
  }
}

<button onClick='choose("rock")'>Rock</button>
<button onClick='choose("paper")'>Paper</button>
<button onClick='choose("scissors")'>Scissors</button>
<button onClick='compare()'>Go!</button>

<p id="result">Winner:</p>
<p id="playerscore">Player Score:</p>
<p id="computerscore">Computer Score:</p>

【讨论】：

【解决方案2】：

您可以在您设置变量“游戏”的值的位置创建一个隐藏的 div / 输入。这样您就可以在游戏完成后证明游戏数量。如果数字是 5，您将 html 从 4 个按钮更改为“恭喜”或其他任何内容。

【讨论】：