如何让我的剪刀石头布游戏刷新上按一下按钮

How to make my rock, paper, scissors game refresh on button click?

本文关键字：按钮 一下 我的 剪刀石头布 刷新 游戏      更新时间：2023-09-26

这不是重复的，因为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>

你可以这样做来"重置"你的游戏:

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>
相关文章：