HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h1>Rock Paper Scissors</h1>
<div id="game">
<div class="player" id="player1">
<h2>Player 1</h2>
<div class="choices">
<button onclick="makeChoice('player1', 'rock')">Rock</button>
<button onclick="makeChoice('player1', 'paper')">Paper</button>
<button onclick="makeChoice('player1', 'scissors')">Scissors</button>
</div>
</div>
<div class="player" id="player2" style="display:none;">
<h2>Player 2</h2>
<div class="choices">
<button onclick="makeChoice('player2', 'rock')">Rock</button>
<button onclick="makeChoice('player2', 'paper')">Paper</button>
<button onclick="makeChoice('player2', 'scissors')">Scissors</button>
</div>
</div>
<div id="round-result"></div>
</div>
<div id="final-result" style="display:none;">
<h2>Final Result</h2>
<div id="result"></div>
</div>
</div>
<script src="[Link]"></script>
</body>
</html>
Proprietary content ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
CSS Code:
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
.player {
margin-bottom: 20px;
}
.choices button {
margin: 10px;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
}
#round-result, #result {
margin-top: 20px;
font-size: 24px;
}
Java Script:
let playerChoices = {
player1: null,
player2: null,
};
let roundResults = [];
const totalRounds = 10;
Proprietary content ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
function makeChoice(player, choice) {
playerChoices[player] = choice;
if (player === 'player1') {
[Link]('player1').[Link] = 'none';
[Link]('player2').[Link] = 'block';
[Link]('round-result').textContent = `Player 1 chose ${choice}. Waiting for
Player 2...`;
} else if (player === 'player2') {
[Link]('player2').[Link] = 'none';
[Link]('round-result').textContent = `Player 2 chose ${choice}.
Calculating result...`;
fetch('/play', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: [Link](playerChoices),
})
.then(response => [Link]())
.then(data => {
[Link]([Link]);
[Link]('round-result').textContent = `Player 1 chose
${playerChoices.player1}, Player 2 chose ${playerChoices.player2}. ${[Link]}`;
if ([Link] >= totalRounds) {
displayFinalResult();
} else {
resetRound();
}
});
}
}
function resetRound() {
playerChoices.player1 = null;
playerChoices.player2 = null;
[Link]('player1').[Link] = 'block';
[Link]('player2').[Link] = 'none';
}
function displayFinalResult() {
const gameDiv = [Link]('game');
Proprietary content ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
const finalResultDiv = [Link]('final-result');
[Link] = 'none';
[Link] = 'block';
const player1Wins = [Link](result => result === "Player 1 wins!").length;
const player2Wins = [Link](result => result === "Player 2 wins!").length;
const ties = [Link](result => result === "It's a tie!").length;
[Link]('result').textContent = `Final Score: Player 1 - ${player1Wins},
Player 2 - ${player2Wins}, Ties - ${ties}`;
}
Python:
from flask import Flask, request, jsonify, send_from_directory
app = Flask(__name__, static_folder='static')
@[Link]('/')
def serve_index():
return send_from_directory(app.static_folder, '[Link]')
@[Link]('/<path:path>')
def serve_static(path):
return send_from_directory(app.static_folder, path)
@[Link]('/play', methods=['POST'])
def play():
player_choices = [Link]
player1_choice = player_choices['player1']
player2_choice = player_choices['player2']
result = determine_winner(player1_choice, player2_choice)
return jsonify({
'result': result
})
def determine_winner(player1, player2):
if player1 == player2:
return "It's a tie!"
elif (player1 == 'rock' and player2 == 'scissors') or \
(player1 == 'paper' and player2 == 'rock') or \
Proprietary content ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
(player1 == 'scissors' and player2 == 'paper'):
return "Player 1 wins!"
else:
return "Player 2 wins!"
if __name__ == '__main__':
[Link](host='[Link]', port=8080)
Proprietary content ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.