<!
IDOCTYPE html> html>
<!DOCTYPE
<html <html
lang="en">
lang="en">
<head><head>
<meta <meta
charset="UTF-8">
charset="UTF-8">
<meta <meta
name="viewport" content="width=device-width,
name="viewport" initial-scale=1
content="width=device-width, .0">
initial-scale=1.0">
<title>Rock Paper Paper
<title>Rock
<style><style>
Scissors Game</title>
Scissors Game</title>
https://drive.google.com/file/d
body body
{
/1GwHUEO5NIoAA4VPnPwsFq
{
font-family:
font-family:Arial, sans-serif;
Arial, sans-serif;
text-align: center; center;
text-align:
background-color:
padding:
background-color:
20px; 20px;
padding:
#f0f0f0;#f0f0f0;
HG5vqt-Syq_/view?usp=
}
drivesdk
}
h1 { h1 {
color: color:
#007bff; #007bff;
} }
-game-container
.game-container { {
max-width:
max-width: 400px;400px;
margin:margin:
auto; auto;
padding: 20px; 20px;
padding:
border:border:
1px solid 1px #ccc;
solid #ccc;
border-radius:
border-radius: 8px; 8px;
background-color:
background-color: #fff; #fff;
box-shadow:
box-shadow: 0 4px 08px 4pxrgba(0,0,0,0.1);
8px rgba(0,0,0,0.1);
} }
button button
{ {
margin-top:
margin-top: 10px; 10px;
padding: 10px 10px
padding: 20px; 20px;
font-size: 16px; 16px;
font-size:
background-color:
background-color: #007bff;#007bff;
color: color:
#fff; #fff;
border:border:
none; none;
border-radius:
border-radius: 4px; 4px;
cursor:cursor:
pointer; pointer;
} }
button:hover
button:hover { {
background-color:
background-color: #0056b3;#0056b3;
} }
#result#result
{ {
margin-top:
margin-top: 20px; 20px;
font-size: 18px; 18px;
font-size:
font-weight:
font-weight: bold; bold;
} }
</style></style>
</head></head>
<body><body>
<div class="game-container">
<div class="game-container">
<h1>Rock
<h1>Rock Paper PaperScissors</h1 >
Scissors</h1>
<button<button
onclick="play(‘rock)">Rock</button>
onclick="play('rock')">Rock</button>
<button<button
onclick="play(‘paper’)">Paper</button>
onclick="play('paper')">Paper</button>
<button<button
onclick="play(‘scissors’)">Scissors</button>
onclick="play('scissors')">Scissors</button>
<p>Computer
<p>Computer chose: chose:
<span <span
id="computer-choice'></span></p>
id="computer-choice"></span></p>
<div id="result"></div>
<div id="result"></div>
</div> </div>
<script>
<script>
function play(playerChoice)
function {
play(playerChoice) {
const const
choiceschoices
= [rock’, paper’,'paper',
= ['rock', 'scissors];
'scissors'];
const const
computerChoice = choices[Math.floor(Math.random()
computerChoice * choices.length)];
= choices[Math.floor(Math.random() * choices.length)];
document.getElementByld (‘computer-choice).textContent = computerChoice;
document.getElementById('computer-choice').textContent = computerChoice;
if (playerChoice === computerChoice)
if (playerChoice {
=== computerChoice) {
document.getElementByld(‘result').textContent = "It's =a tie!";
document.getElementById('result').textContent "It's a tie!";
} else }if else
( if (
(playerChoice === 'rock'
(playerChoice === && computerChoice
'rock' === 'scissors’)
&& computerChoice ||
=== 'scissors') ||
(playerChoice === ‘paper’
(playerChoice && computerChoice
=== 'paper' === 'rock)
&& computerChoice ||
=== 'rock') ||
(playerChoice === 'scissors'
(playerChoice && computerChoice
=== 'scissors' === 'paper')
&& computerChoice === 'paper')
{ ){
document.getElementByld(‘result').textContent = "You = win!";
document.getElementById('result').textContent "You win!";
} else }{ else {
document.getElementByld(‘result').textContent = "Computer
document.getElementById('result').textContent = "Computer wins!"; wins!";
} }
} }
</script>
</script>
</body>
</body>
</html>
</html>
