I’m learning JS and I’m trying to code a RPS kind of game with a UI, but I’m doing something wrong somewhere and I cannot figure out where.
Whenever I click on one of the options on the UI, the whole thing just freezes. I struggled a bit with the addEventListener logic, but I don’t know if that’s what’s causing it or if it’s something else.
Here’s my HTML and JS.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="https://kit.fontawesome.com/77133b1b16.js" crossorigin="anonymous"></script>
<title>Rock, Paper, Scissors, Lizard, Spock</title>
</head>
<body>
<div class="container">
<div class="title">
<h1>CHOOSE YOUR WEAPON</h1>
</div>
<div class="weapons">
<div class="button" id="rock">
<div><img src="rock.png" alt="rock"></div>
<p>Rock</p>
</div>
<div class="button" id="paper">
<div><img src="paper.png" alt="paper"></div>
<p>Paper</p>
</div>
<div class="button" id="scissors">
<div><img id="scissors" src="scissors.png" alt="scissors"></div>
<p>Scissors</p>
</div>
<div class="button" id="lizard">
<div><img src="lizard.png" alt="lizard"></div>
<p>Lizard</p>
</div>
<div class="button" id="spock">
<div><img src="spock.png" alt="spock"></div>
<p>Spock</p>
</div>
</div>
<h1 class="score-title">Score</h1>
<div class="score">
<div class="playerScore">
<h2>You</h2>
<span id="playerScore"></span>
</div>
<div class="computerScore">
<h2>Me</h2>
<span id="computerScore"></span>
</div>
</div>
<span id="message"></span>
<div class="rules">
<h3>Rules:</h3>
<p>"Scissors cuts Paper, Paper covers Rock, Rock crushes Lizard, Lizard poisons Spock, Spock smashes Scissors, Scissors decapitates Lizard, Lizard eats Paper, Paper disproves Spock, Spock vaporizes Rock, and as it always has, Rock crushes Scissors."</p>
</div>
</div>
<footer class="footer">
<p>Copyright © CamiCoding 2022</p>
<a href="https://www.github.com/CamiCoding/" target=”_blank”><i class="fa-brands fa-github fa-beat" style="--fa-beat-scale: 2.0;"></i></a>
</footer>
<script src="script.js"></script>
</body>
</html>
let weapons = ["rock", "paper", "scissors", "lizard", "spock"];
let playerScore = 0;
let computerScore = 0;
let rounds = 0;
let roundWinner;
const playerScoreNumber = document.getElementById('playerScore');
const computerScoreNumber = document.getElementById('computerScore');
const scoreMessage = document.getElementById('message');
const buttons = document.querySelectorAll('.button');
buttons.forEach(button =>{
button.addEventListener('click', playRound)
})
function playRound(event) {
playerSelection = event.target.id;
let computerSelection = computerPlay();
if (playerSelection == computerSelection) {
roundWinner = 'tie';
} else if (
(playerSelection == "paper" && computerSelection == "scissors") ||
(playerSelection == "rock" && computerSelection == "paper") ||
(playerSelection == "spock" && computerSelection == "lizard") ||
(playerSelection == "lizard" && computerSelection == "rock") ||
(playerSelection == "spock" && computerSelection == "lizard") ||
(playerSelection == "scissors" && computerSelection == "spock") ||
(playerSelection == "lizard" && computerSelection == "scissors") ||
(playerSelection == "paper" && computerSelection == "lizard") ||
(playerSelection == "spock" && computerSelection == "paper") ||
(playerSelection == "rock" && computerSelection == "spock") ||
(playerSelection == "scissors" && computerSelection == "rock")) {
roundWinner = 'computer';
computerScore++;
rounds++;
} else {
roundWinner = 'player';
playerScore++;
rounds++;
}
updateScore();
}
function checkVictory() {
while(rounds < 5) {
if (playerScore == 3 || computerScore == 3) {
break;
}
}
if (playerScore > computerScore) {
scoreMessage.textContent = "Fine, you win this time."
} else {
scoreMessage.textContent = "Awww, looks like you lost."
}
}
function computerPlay() {
const random = Math.floor(Math.random()*weapons.length);
return weapons[random];
}
function updateScore() {
if (roundWinner === 'tie') {
scoreMessage.textContent = "It's a tie!";
} else if (roundWinner === 'computer') {
scoreMessage.textContent = "You lose!";
} else if (roundWinner === 'player') {
scoreMessage.textContent = "You win!";
}
playerScoreNumber.textContent = `${playerScore}`;
computerScoreNumber.textContent = `${computerScore}`;
checkVictory();
}
Thanks a lot in advance!