Как сделать игру для скалы, бумаги, ножниц обновленной кнопкой?

Question

Это не дубликат, потому что window.load() обновляется через 3 секунды, не давая пользователю полностью увидеть результат.

Что я хочу сделать, это автоматически перезагрузить игру, когда пользователь нажимает на другую кнопку, чтобы создать новую без необходимости обновлять страницу, чтобы нажать кнопку «Сброс».

Будет ли это включать очистку внутреннихHTML и сброс переменных 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>