Rock-Paper-Scissors Game
Rock-Paper-Scissors Game - Let's Play!
Welcome to the Rock-Paper-Scissors Game!
Choose your weapon:
You chose:
Computer chose:
<!DOCTYPE html>
<html>
<head>
<title>Rock-Paper-Scissors Game - Let's Play!</title>
<style type="text/css">
body {
background-color: #efefef;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
font-size: 36px;
}
button {
font-size: 24px;
padding: 10px 20px;
margin: 10px;
background-color: #4CAF50;
color: #ffffff;
border: none;
border-radius: 8px;
cursor: pointer;
}
#userChoice, #computerChoice {
font-size: 24px;
margin-top: 20px;
display: none;
}
#winner {
font-size: 36px;
font-weight: bold;
margin-top: 20px;
display: none;
}
</style>
</head>
<body>
<h1>Welcome to the Rock-Paper-Scissors Game!</h1>
<p>Choose your weapon:</p>
<button onclick="choose('rock')">Rock</button>
<button onclick="choose('paper')">Paper</button>
<button onclick="choose('scissors')">Scissors</button>
<p id="userChoice">You chose: <span></span></p>
<p id="computerChoice">Computer chose: <span></span></p>
<p id="winner"></p>
<script type="text/javascript">
function choose(userChoice) {
var choices = ['rock', 'paper', 'scissors'];
var computerChoice = choices[Math.floor(Math.random() * choices.length)];
document.getElementById('userChoice').style.display = 'block';
document.getElementById('userChoice').getElementsByTagName('span')[0].innerHTML = userChoice;
document.getElementById('computerChoice').style.display = 'block';
document.getElementById('computerChoice').getElementsByTagName('span')[0].innerHTML = computerChoice;
if (userChoice === computerChoice) {
document.getElementById('winner').innerHTML = "It's a tie!";
} else if (userChoice === 'rock' && computerChoice === 'scissors' ||
userChoice === 'paper' && computerChoice === 'rock' ||
userChoice === 'scissors' && computerChoice === 'paper') {
document.getElementById('winner').innerHTML = "You win! :)";
} else {
document.getElementById('winner').innerHTML = "Computer wins! :(";
}
document.getElementById('winner').style.display = 'block';
}
</script>
</body>
</html>
Why did the rock go to therapy? To get stronger and break paper and scissors!