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

Question

I have tried making a function endGame() but I just can't figure out exactly what I need to do to reset everything back to 0. I've used result_p.innerHTML to change the message to say who has won the game after 5 points (user or computer) but the user can still continue after this and I'd like to actually have the game reset to 0-0. Any suggestions? Thanks

Code Below:

 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;

I think this will be enough to "refresh" your game. So you should basically call this in lose and win functions when score of the winner is bigger than 5. Please note that the code can be refactored as you are repeating the same pattern in win and lose functions. Applying these changes, I added a refresh button, here is the code (again, note that I did not refactor the code):

 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>

Now when you win or lose, the game "stops", and the buttons used to play the game are disabled. When the user clicks the refresh button, the score refreshes and the buttons are again enabled.

Answer 2

What should happen when the game ends?

• show the result
• show a button to play again
• disable the RPS buttons so that user cannot continue to play

therefore, the code to end the game when score is already 5 is:

...
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);
}; 
...

What should happen when the game starts again?

• reset both score to 0
• display the new score to user
• show blank result
• reenable all the RPS buttons so that user can continue to play

therefore, the code to restart the game is:

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");
}

Here is working snippet

 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>