如何让我的石头剪刀布游戏在按钮点击时刷新？

Question

这不是重复的，因为 window.load() 会在 3 秒后刷新，而不会让用户完全看到结果

我想要做的是让游戏在用户点击另一个按钮做出新选择时自动重置，而无需刷新页面以点击“重置”按钮。

这是否涉及在再次运行脚本之前清除 innerHTML 并重置 onclick 变量？

我的代码在这里：http://jsbin.com/yuvalucupo/edit?html,css,js

//var rock = document.getElementById("rock");
//var paper = document.getElementById("paper");
//var scissors = document.getElementById("scissors");

var screen = document.getElementById("screen");
var compAnswer = Math.random();

//Set computer value
if (compAnswer >= 0 && compAnswer <= 0.33) {
  compAnswer = "rock";
} else if (compAnswer >= 0.34 && compAnswer <= 0.66) {
  compAnswer = "paper";
} else {
  compAnswer = "scissors";
}

function result(choice1, choice2) {
  if (choice1 === choice2) {
    screen.innerHTML = "<p>It's a tie!</p>";
  }
  //Rock Start  
  else if (choice1 === "rock" && choice2 === "scissors") {
    screen.innerHTML = "<p>Rock Wins!</p>";
  } else if (choice1 === "rock" && choice2 === "paper") {
    screen.innerHTML = "<p>Paper Wins!</p>";
  }
  //End Rock

  //Paper Start
  else if (choice1 === "paper" && choice2 === "scissors") {
    screen.innerHTML = "<p>Scissors Wins!</p>";
  } else if (choice1 === "paper" && choice2 === "rock") {
    screen.innerHTML = "<p>Paper Wins</p>!";
  }
  //Paper End

  //Scissors Start
  else if (choice1 === "scissors" && choice2 === "paper") {
    screen.innerHTML = "<p>Scissors Wins</p>";
  } else if (choice1 === "scissors" && choice2 === "rock") {
    screen.innerHTML = "<p>Rock Wins</p>";
  }
  //Scissors End
}
//Display Computer's Answer
function displayCompAnswer() {
  var computer = document.getElementById("computerAnswer");
  computer.innerHTML = compAnswer;
}

#screen, #computerAnswer {
  height: 100px;
  width: 250px;
  background-color: lightgrey;
  border: 1px solid black;
}

<div id="screen"></div>
<button id="rock" onclick="userAnswer = 'rock'; result(userAnswer, compAnswer); displayCompAnswer();">Rock</button>
<button id="paper" onclick="userAnswer = 'paper'; result(userAnswer, compAnswer); displayCompAnswer();">Paper</button>
<button id="scissors" onclick="userAnswer = 'scissors'; result(userAnswer, compAnswer); displayCompAnswer();">Scissors</button>
<div id="computerAnswer"></div>

Answer 1

你可以这样做来“重置”你的游戏：

function clearMessage(event) {
    event.preventDefault();  // Stops the page from refreshing
    var screen = document.getElementById("screen");
    screen.innerHTML = '';
}

然后你可以有一个像这样的重置按钮

<button onclick="clearMessage(event)">Reset</button>

当我查看您的代码时，还有一些其他想法。看看每个函数如何只做一件事？

// input: 0 = rock, 1 = paper and 2 = scissors
function makeUserSelection(choice) {
    var computerChoice = getCompAnswer();
    var result = getResult(choice, computerChoice);
    displayResult(result);
}

// output: 0 = rock, 1 = paper and 2 = scissors
function getCompAnswer() {
    var rand = Math.random();
    if (compAnswer <= 0.33) {
        return 0;
    }

    return (compAnswer <= 0.66) ? 1 : 2;
}

// input: 0 = rock, 1 = paper and 2 = scissors
// output: 0 = draw, 1 = user wins and -1 = user loses.
function getResult(userValue, computerValue) {
    if(userValue === computerValue) {
        return 0; // draw
    }
    return ((userValue + 1) % 3 === computerValue) ? return -1 : 1;
}

displayMessage(message) {
    var screen = document.getElementById('screen');
    screen.innerHTML = '<p>' + message + '</p>';
}

function displayResult(result) {
    messages = ["It's a draw", "You lose", "You win"];
    displayMessage(messages[result]);
}

以下是我将如何更新按钮：

<div id="screen"></div>
<button id="rock" onclick="makeUserSelection(0);">Rock</button>
<button id="paper" onclick="makeUserSelection(1);">Paper</button>
<button id="scissors" onclick="makeUserSelection(2);">Scissors</button>
<button id="reset" onclick="clearMessage(event);">Reset</button>
<div id="computerAnswer"></div>