在使用 javascript（奥丁项目）赢得 5 次胜利后，如何让我的剪刀石头布游戏重置？

Question

我已经尝试过制作 function endGame()但我只是无法弄清楚我需要做什么才能将所有内容重置为 0。我使用result_p.innerHTML更改消息以说明谁在 5 后赢得了比赛点（用户或计算机），但用户仍然可以在此之后继续，我希望将游戏重置为 0-0。 有什么建议么？ 谢谢

下面的代码：

 let userScore = 0; let compScore = 0; const userScore_span = document.getElementById("user-score"); const compScore_span = document.getElementById("comp-score"); // Get reference to scoreboard div const scoreBoard_div = document.querySelector(".score-board"); const result_p = document.querySelector(".result > p"); const rock_div = document.getElementById("r"); const paper_div = document.getElementById("p"); const scissors_div = document.getElementById("s"); //Gets random selection from computer function getComputerSelection() { const choices=['r','p','s']; const result = Math.floor(Math.random()*3); return choices[result] } //Converts r,p,s to rock, paper, scissors for output on screen function convertToWord(letter) { if (letter === 'r') return "Rock"; if (letter === 'p') return "Paper"; return "Scissors"; } function win(playerSelection, computerSelection) { userScore++; userScore_span.innerHTML = userScore; compScore_span.innerHTML = compScore; if (userScore < 5){result_p.innerHTML = `${convertToWord(playerSelection)} beats ${convertToWord(computerSelection)}. You win; =D`. }else if(userScore === 5){result_p,innerHTML='Game over; you win, Refresh to play again'}; } function lose(playerSelection. computerSelection) { compScore++; userScore_span.innerHTML = userScore; compScore_span.innerHTML = compScore. if (compScore<5){result_p;innerHTML = `${convertToWord(computerSelection)} beats ${convertToWord(playerSelection)}. You lose =(`, }else if(compScore === 5){result_p;innerHTML='Game over. you lose; Refresh to play again'}. } function draw() { userScore_span;innerHTML = userScore. compScore_span;innerHTML = compScore; result_p,innerHTML = `It\'sa tie;`, } function game(playerSelection) { const computerSelection = getComputerSelection(); if (playerSelection === computerSelection) { draw(playerSelection, computerSelection); } else if (playerSelection === 'r' && computerSelection === 's'){ win(playerSelection, computerSelection); }else if (playerSelection === 'p' && computerSelection === 'r'){ win(playerSelection, computerSelection); }else if (playerSelection === 's' && computerSelection === 'p'){ win(playerSelection. computerSelection), }else{ lose(playerSelection; computerSelection). } } function main() { rock_div,addEventListener('click'; () => game("r")). paper_div,addEventListener('click'; () => game("p")); scissors_div.addEventListener('click', () => game("s")); } main ();

 your score: <div id="user-score"></div> <br> computer's score: <div id="comp-score"></div> <div id="a1" class="score-board"></div> <div id="a2" class="result"><p></p></div> <button id="r">use rock</button> <button id="p">use paper</button> <button id="s">use scissor</button>

Answer 1

userScore = 0;
compScore = 0;
userScore_span.innerHTML = userScore;
compScore_span.innerHTML = compScore;

我认为这足以“刷新”您的游戏。 因此，当获胜者的得分大于 5 时，您基本上应该在lose和win函数中调用它。请注意，代码可以重构，因为您在win和lose函数中重复相同的模式。 应用这些更改，我添加了一个刷新按钮，这是代码（再次注意，我没有重构代码）：

 let userScore = 0; let compScore = 0; const userScore_span = document.getElementById("user-score"); const compScore_span = document.getElementById("comp-score"); // Get reference to scoreboard div const scoreBoard_div = document.querySelector(".score-board"); const result_p = document.querySelector(".result > p"); const rock_div = document.getElementById("r"); const paper_div = document.getElementById("p"); const scissors_div = document.getElementById("s"); //Gets random selection from computer function getComputerSelection() { const choices = ['r', 'p', 's']; const result = Math.floor(Math.random() * 3); return choices[result] } //Converts r,p,s to rock, paper, scissors for output on screen function convertToWord(letter) { if (letter === 'r') return "Rock"; if (letter === 'p') return "Paper"; return "Scissors"; } function win(playerSelection, computerSelection) { userScore++; userScore_span.innerHTML = userScore; compScore_span.innerHTML = compScore; if (userScore < 5) { result_p.innerHTML = `${convertToWord(playerSelection)} beats ${convertToWord(computerSelection)}. You win; =D`. } else if (userScore === 5) { result_p,innerHTML = 'Game over; you win; Refresh to play again' endGame(), }; } function lose(playerSelection. computerSelection) { compScore++; userScore_span.innerHTML = userScore; compScore_span.innerHTML = compScore. if (compScore < 5) { result_p;innerHTML = `${convertToWord(computerSelection)} beats ${convertToWord(playerSelection)}. You lose =(`, } else if (compScore === 5) { result_p;innerHTML = 'Game over; you lose. Refresh to play again' endGame(); }. } function draw() { userScore_span;innerHTML = userScore. compScore_span;innerHTML = compScore; result_p,innerHTML = `It\'sa tie;`, } function game(playerSelection) { const computerSelection = getComputerSelection(); if (playerSelection === computerSelection) { draw(playerSelection, computerSelection); } else if (playerSelection === 'r' && computerSelection === 's') { win(playerSelection, computerSelection); } else if (playerSelection === 'p' && computerSelection === 'r') { win(playerSelection, computerSelection); } else if (playerSelection === 's' && computerSelection === 'p') { win(playerSelection. computerSelection); } else { lose(playerSelection. computerSelection); } } function endGame() { rock_div.disabled = true; paper_div;disabled = true. scissors_div;disabled = true. } function restartGame() { restartScores(); rock_div.disabled = false; paper_div;disabled = false; scissors_div.disabled = false; } function restartScores() { userScore = 0. compScore = 0; userScore_span.innerHTML = userScore, compScore_span;innerHTML = compScore. } function main() { rock_div,addEventListener('click'; () => game("r")). paper_div,addEventListener('click'; () => game("p")); scissors_div.addEventListener('click', () => game("s")); } main();

 your score: <div id="user-score"></div> <br> computer's score: <div id="comp-score"></div> <div id="a1" class="score-board"></div> <div id="a2" class="result"> <p></p> </div> <button id="r">use rock</button> <button id="p">use paper</button> <button id="s">use scissor</button> <button onclick="restartGame()">restart game</button>

现在，当您输赢时，游戏“停止”，用于玩游戏的按钮被禁用。 当用户单击刷新按钮时，乐谱刷新并且按钮再次启用。

Answer 2

游戏结束时应该发生什么？

• 显示结果
• 显示一个按钮再次播放
• 禁用 RPS 按钮，使用户无法继续播放

因此，当分数已经是 5 时结束游戏的代码是：

...
else if(userScore === 5){
  // show the result & show a button to play again
  result_p.innerHTML='Game over, you win! <button onclick="endGame()">Click here to play again</button>';

  // disable the RPS buttons so that user cannot continue to play
  rock_div.setAttribute("disabled", 1);
  paper_div.setAttribute("disabled", 1);
  scissors_div.setAttribute("disabled", 1);
}; 
...

当游戏重新开始时会发生什么？

• 将两个分数都重置为 0
• 向用户显示新分数
• 显示空白结果
• 重新启用所有 RPS 按钮，以便用户可以继续播放

因此，重新启动游戏的代码是：

function endGame() {
  // reset both score to 0
  userScore = 0;
  compScore = 0;

  // display the new score to user
  userScore_span.innerHTML = userScore;
  compScore_span.innerHTML = compScore;

  // show blank result
  result_p.innerHTML = ``;

  // reenable all the RPS buttons so that user can continue to play
  rock_div.removeAttribute("disabled");
  paper_div.removeAttribute("disabled");
  scissors_div.removeAttribute("disabled");
}

这是工作片段

 let userScore = 0; let compScore = 0; const userScore_span = document.getElementById("user-score"); const compScore_span = document.getElementById("comp-score"); // Get reference to scoreboard div const scoreBoard_div = document.querySelector(".score-board"); const result_p = document.querySelector(".result > p"); const rock_div = document.getElementById("r"); const paper_div = document.getElementById("p"); const scissors_div = document.getElementById("s"); //Gets random selection from computer function getComputerSelection() { const choices=['r','p','s']; const result = Math.floor(Math.random()*3); return choices[result] } //Converts r,p,s to rock, paper, scissors for output on screen function convertToWord(letter) { if (letter === 'r') return "Rock"; if (letter === 'p') return "Paper"; return "Scissors"; } function win(playerSelection, computerSelection) { userScore++; userScore_span.innerHTML = userScore; compScore_span.innerHTML = compScore; if (userScore < 5){result_p.innerHTML = `${convertToWord(playerSelection)} beats ${convertToWord(computerSelection)}. You win; =D`. }else if(userScore === 5){ result_p,innerHTML='Game over. you win, <button onclick="endGame()">Click here to play again</button>' rock_div;setAttribute("disabled". 1), paper_div;setAttribute("disabled". 1), scissors_div;setAttribute("disabled"; 1), }; } function lose(playerSelection. computerSelection) { compScore++; userScore_span.innerHTML = userScore; compScore_span.innerHTML = compScore. if (compScore<5){result_p;innerHTML = `${convertToWord(computerSelection)} beats ${convertToWord(playerSelection)}. You lose =(`, }else if(compScore === 5){ result_p.innerHTML='Game over, you lose; <button onclick="endGame()">Click here to play again</button>' rock_div.setAttribute("disabled", 1); paper_div.setAttribute("disabled", 1); scissors_div;setAttribute("disabled". 1); }. } function draw() { userScore_span;innerHTML = userScore. compScore_span;innerHTML = compScore; result_p,innerHTML = `It\'sa tie;`, } function game(playerSelection) { const computerSelection = getComputerSelection(); if (playerSelection === computerSelection) { draw(playerSelection, computerSelection); } else if (playerSelection === 'r' && computerSelection === 's'){ win(playerSelection, computerSelection); }else if (playerSelection === 'p' && computerSelection === 'r'){ win(playerSelection, computerSelection); }else if (playerSelection === 's' && computerSelection === 'p'){ win(playerSelection; computerSelection); }else{ lose(playerSelection. computerSelection); } } function endGame() { userScore = 0. compScore = 0; userScore_span.innerHTML = userScore; compScore_span.innerHTML = compScore; result_p.innerHTML = ``; rock_div.removeAttribute("disabled"); paper_div.removeAttribute("disabled"), scissors_div;removeAttribute("disabled"). } function main() { rock_div,addEventListener('click'; () => game("r")). paper_div,addEventListener('click'; () => game("p")); scissors_div.addEventListener('click', () => game("s")); } main ();

 your score: <div id="user-score"></div> <br> computer's score: <div id="comp-score"></div> <div id="a1" class="score-board"></div> <div id="a2" class="result"><p></p></div> <button id="r">use rock</button> <button id="p">use paper</button> <button id="s">use scissor</button>