RSPLS
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Rock Paper Scissors Tutorial</title>
</head>
<body>
<h2>Computer Choice: <span id="computer-choice"></span></h2>
<h2>Your Choice: <span id="user-choice"></span></h2>
<h2>Result: <span id="result"></span></h2>
<button id="rock">rock </button>
<button id="paper">paper </button>
<button id="scissors">scissors </button>
<button id="lizard">lizard</button>
<button id="Spock">Spock</button>
<script>
const computerChoiceDisplay = document.getElementById('computer-choice')
const userChoiceDisplay = document.getElementById('user-choice')
const resultDisplay = document.getElementById('result')
const possibleChoices = document.querySelectorAll('button')
let userChoice
let computerChoice
let result
possibleChoices.forEach(possibleChoice => possibleChoice.addEventListener('click', (e) => {
userChoice = e.target.id
userChoiceDisplay.innerHTML = userChoice
generateComputerChoice()
getResult()
}))
function generateComputerChoice() {
const randomNumber = Math.floor(Math.random() * possibleChoices.length) + 1 // or use 5
if (randomNumber === 1) {
computerChoice = 'rock'
}
if (randomNumber === 2) {
computerChoice = 'scissors'
}
if (randomNumber === 3) {
computerChoice = 'paper'
}
if (randomNumber === 4) {
computerChoice = 'lizard'
}
if (randomNumber === 5) {
computerChoice = 'Spock'
}
computerChoiceDisplay.innerHTML = computerChoice
}
function getResult() {
if (computerChoice === userChoice){
result = 'Its a draw. No really, get out some paper and draw your choices.'
}
if (computerChoice === 'Spock' && userChoice === "Spock"){
result = 'Mirror Spock and Mr. Spock meet. Both being logical analyze the game and conclude that it is flawed becasue anyone playing it would be a fan of Star Trek and choose Spock resulting in all draws. The game ends with no winners. Mirror spock suggests you find a more logical way to resolve disputes such as taking turns, or making a ranked list and voting. Mr. Spock suggests you turn off the computer as that will constitute a win. They both make thick scissor signs at each other and you, and say "Live long and prosper." then are beamed back to their respective ships.'
}
if (computerChoice === 'rock' && userChoice === "paper"){
result = 'You covered the rock, you Win!'
}
if (computerChoice === 'rock' && userChoice === "scissors"){
result = 'The rock crushed the scissors, and the computer was in an endless loop, and continued crushing the sciscors until nothing was left but iron filings, and at last it broke down from lack of mainenence after the end of the human race. That took a really long time, but to the rock it was but a moment. You lost! :)'
}
if (computerChoice === 'rock' && userChoice === "lizard"){
result = 'Rock crushes your lizard, you lose!'
}
if (computerChoice === 'rock' && userChoice === "Spock"){
result = 'Spock vaporizes rock, you Win!'
}
if (computerChoice === 'paper' && userChoice === "scissors"){
result = 'You cut up the paper, you win!'
}
if (computerChoice === 'paper' && userChoice === "rock"){
result = 'Your rock is covered and in a dark place and eaten by a Grue, you lose.'
}
if (computerChoice === 'paper' && userChoice === "lizard"){
result = 'Your lizard eats the paper, you win! When is the last time you heard of a lizard eating paper. Maybe it is an Iguana, they are vegetarians'
}
if (computerChoice === 'paper' && userChoice === "Spock"){
result = 'The paper disproves Spock. He is sad, and as that is an emotion, it leads him on a downard spiral of emotions until he... well it starts to get very dark, and you know what happens in the dark, you get eaten by a Grue. You lose.'
}
if (computerChoice === 'scissors' && userChoice === "paper"){
result = 'The computer cuts your paper into a snowflake, you lose. At least you have a paper snowflake now'
}
if (computerChoice === 'scissors' && userChoice === "rock"){
result = 'You crush those scissors with the rock. You barbarian! You luddite! You are winning!'
}
if (computerChoice === 'scissors' && userChoice === "lizard"){
result = 'Your lizard was decapitated, you lost. :)'
}
if (computerChoice === 'scissors' && userChoice === "Spock"){
result = 'Spock crushes the scissors, you win! Is Spock played by the Rock now?'
}
if (computerChoice === 'lizard' && userChoice === "rock"){
result = 'The lizard is crushed by the rock, no, not the actor, the lizard would poison him. You win!'
}
if (computerChoice === 'lizard' && userChoice === "paper"){
result = 'Your paper is eaten by the dog! You lose. Yes, I played Elden Ring.'
}
if (computerChoice === 'lizard' && userChoice === "scissors"){
result = 'Ha! Ho! Ha! Faint, reposte! The lizard lies decapitated at your feet. It had no treasure.'
}
if (computerChoice === 'lizard' && userChoice === "Spock"){
result = 'That lizard must have surprised Spock, and it must be a gilla monster, or a monitor, since Spock was poisoned. You lost.'
}
if (computerChoice === 'Spock' && userChoice === "rock"){
result = 'Mirror Spock pulls out his phaser, sets it to kill, and vaporises the rock right out of your hand leaving you helpless to his Vulcan neck pinch. You lose.'
}
if (computerChoice === 'Spock' && userChoice === "paper"){
result = 'Your paper disproves Mirror Spock. You must feel proud of yourself. You win.'
}
if (computerChoice === 'Spock' && userChoice === "scisors"){
result = 'Gotee Spock crushes those scissors mercilessly with a rock. You lose.'
}
if (computerChoice === 'Spock' && userChoice === "lizard"){
result = 'Your lizard poisons Mirror Spock. You WIN!'
}
resultDisplay.innerHTML = result
}
</script>
</body>
</html>