DIGI

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Piedra, Papel & Tijera</title>
<link rel="icon" href="scissors.png" />
<link rel="stylesheet" href="css/RockPaperScissor.css" />
</head>
	<body>
		<main class="main-page">
			<div class="title">Piedra, Papel & Tijera</div>
			<div class="main-container">
				<div class="score-container">
					<div id="player-score">Jugador: 0</div>
					<div id="computer-score">Computer: 0</div>
				</div>
				<div class="hand-container">
					<div class="player-hand">
						<img id="player-hand" src="images/rock.png" alt="" />
					</div>
					<div class="computer-hand">
						<img id="computer-hand" src="images/rock.png" alt="" />
					</div>
				</div>
				<div class="player-choice-container">
					<h2>Seleccionar una opcion</h2>
					<div class="btn-wrapper">
						<button id="rock" class="player-option">Piedra</button>
						<button id="paper" class="player-option">Papel</button>
						<button id="scissor" class="player-option">Tijera</button>
					</div>
				</div>
			</div>
		</main>

let buttons = document.querySelectorAll('.player-option');

let player = document.getElementById('player-hand');
let computer = document.getElementById('computer-hand');

let displayPlayerScore = document.getElementById('player-score');
let displayComputerScore = document.getElementById('computer-score');

let playerScore = 0;
let computerScore = 0;

buttons.forEach(e => {
	e.addEventListener('click', playGame);
});

function playGame() {
	buttons.forEach(e => {
		e.removeEventListener('click', playGame);
	});

player.style.animation = 'shakePlayer 2s ease';
	computer.style.animation = 'shakeComputer 2s ease';

let computerChoice = Math.floor(Math.random() * 3);
	setTimeout(() => {
		computer.src = hands[computerChoice].address;

if (this.innerHTML === 'Piedra') {
			player.src = hands[0].address;
			if (computerChoice == 2) {
				playerScore++;
			} else if (computerChoice == 1) {
				computerScore++;
			}
		} else if (this.innerHTML === 'Papel') {
			player.src = hands[1].address;
			if (computerChoice == 0) {
				playerScore++;
			} else if (computerChoice == 2) {
				computerScore++;
			}
		} else if (this.innerHTML === 'Tijera') {
			player.src = hands[2].address;
			if (computerChoice == 0) {
				computerScore++;
			} else if (computerChoice == 1) {
				playerScore++;
			}
		}

displayPlayerScore.innerHTML = `Jugador: ${playerScore}`;
		displayComputerScore.innerHTML = `Computer: ${computerScore}`;

player.style.animation = '';
		computer.style.animation = '';

setTimeout(() => {
			player.src = hands[0].address;
			computer.src = hands[0].address;
			buttons.forEach(e => {
				e.addEventListener('click', playGame);
			});
		}, 4000);
	}, 2000);
}

</script>
	</body>
</html>