Rock Paper Scissors game made with Javascript
Runs confetti.js during victory as animation.
Groups choices and what wins over what inside an object.
const choices = {
rock: { name: 'Rock', defeats: ['scissors', 'lizard'] },
paper: { name: 'Paper', defeats: ['rock', 'spock'] },
scissors: { name: 'Scissors', defeats: ['paper', 'lizard'] },
lizard: { name: 'Lizard', defeats: ['paper', 'spock'] },
spock: { name: 'Spock', defeats: ['scissors', 'rock'] },
};
Reset function to set after each match by clicking any item.
// Reset all 'selected' icons, remove confetti
function resetSelected() {
allGameIcons.forEach((icon) => {
icon.classList.remove('selected');
});
stopConfetti();
removeConfetti();
}
// Reset score & playerChoice/computerChoice
function resetAll() {
playerScoreNumber = 0;
computerScoreNumber = 0;
playerScoreEl.textContent = playerScoreNumber;
computerScoreEl.textContent = computerScoreNumber;
playerChoiceEl.textContent = '';
computerChoiceEl.textContent = '';
resultText.textContent = '';
resetSelected();
}
window.resetAll = resetAll;
Updates player and computer scores
function updateScore(playerChoice) {
if (playerChoice === computerChoice) {
resultText.textContent = "It's a tie.";
} else {
const choice = choices[playerChoice];
if (choice.defeats.indexOf(computerChoice) > -1) {
startConfetti();
resultText.textContent = 'You Won!';
playerScoreNumber++;
playerScoreEl.textContent = playerScoreNumber;
} else {
resultText.textContent = 'You Lost!';
computerScoreNumber++;
computerScoreEl.textContent = computerScoreNumber;
}
}
}
Uses Math.random to give logic to computer =
function computerRandomChoice() {
const computerChoiceNumber = Math.random();
if (computerChoiceNumber < 0.2) {
computerChoice = 'rock';
} else if (computerChoiceNumber <= 0.4) {
computerChoice = 'paper';
} else if (computerChoiceNumber <= 0.6) {
computerChoice = 'scissors';
} else if (computerChoiceNumber <= 0.8) {
computerChoice = 'lizard';
} else {
computerChoice = 'spock';
}
}
Will be adding options for vs AI vs Human
Lifetime wins