Rock, Paper, Scissors

Click image to play

One of the first projects we work on in The Odin Project is a simple Rock, Paper, Scissors game. During this first iteration, all output is generated in the console, and there is no UI.

The goal here is to write a function to randomly generate a computer choice as well as prompt the user for their choice. Then a function is written to compare the computer’s choice with the player’s choice. Finally, a game function is written to play each iteration of a round 5 times with the the player either winning, losing, or tying with the computer.

let playerScore = 0;
let computerScore = 0;


function computerPlay (){ // randomly select a computer choice
    let x = Math.floor(Math.random() * 3) + 1;
    if (x == 1) {
    return "rock";
    } else if (x == 2) {
     return "paper";
    } else {
     return "scissors";
    }
}

function playerPlay () { //prompt user's choice and remove spaces/convert to lower case
    choice = prompt('Enter rock, paper, or scissors:');
    if (choice !== null) {
    choice = choice.toLowerCase().replace(/\s+/g, '');
    }  
    return choice;
}

function playRound (playerSelection ,computerSelection) { // compares user's choice with computer & declare's a winner
    
    while (playerSelection !=='rock' || playerSelection !=='paper' || playerSelection !=='scissors'){
        if (playerSelection !== null && (playerSelection =='rock' || playerSelection =='paper' ||
                playerSelection =='scissors')) {
            break;
        } else if (playerSelection !== null) {
            console.log(`"${playerSelection}" is an invalid choice, try again`);
            playerSelection = playerPlay();
        } else {
        playerSelection = null;
            break;
        }
    }   

    if (playerSelection=='rock' && computerSelection=='paper' ||
            playerSelection=='paper' && computerSelection=='scissors' ||
            playerSelection=='scissors' && computerSelection=='rock') {
        computerScore++;
        console.log(`The computer chose ${computerSelection} and you choose ${playerSelection}`);
        return `You lose this round! ${computerSelection} beats ${playerSelection}`;
    } else if (playerSelection==computerSelection) {
        console.log(`The computer chose ${computerSelection} and you choose ${playerSelection}`);
        return `This round is a tie! You and the computer chose ${playerSelection}`;
    } else if (playerSelection==null) {
        return null;
    } else {
        playerScore++;
        console.log(`The computer chose ${computerSelection} and you choose ${playerSelection}`);
        return `You won this round! ${playerSelection} beats ${computerSelection}!`;
        
    }
}

function game(){ // Plays 5 rounds, and concludes an overall winner
let roundOutCome;
    for (let i = 1; i <= 5; i++) {
        roundOutcome = playRound(playerPlay(), computerPlay());
        
        if (roundOutcome == null) {
            break;
        } else {
            console.log(roundOutcome);
        }
    


        console.log(`Round ${i} of 5`);
        console.log(`Your Score: ${playerScore}`);
        console.log(`Computer Score: ${computerScore}`);
        console.log(`===================================`);
     }

     if (computerScore > playerScore && roundOutcome !== null) {
         console.log(`The computer has won with a score of ${computerScore} to ${playerScore}`);
     } else if (computerScore < playerScore && roundOutcome !== null) {
        console.log(`You've won won with a score of ${playerScore} to ${computerScore}`);
     } else if (computerScore == playerScore && roundOutcome !== null) {
        console.log(`It's a tie with a score of ${playerScore} to ${computerScore}`); 
     } else {
        console.log(`You have canceled the game`)   
        
     }

}


game();

After the first iteration was completed, I then created a UI for the game, retaining the conditions for determining a winner. This time, instead of a game consisting of 5 rounds, the game would play indefinitely until either the computer or user reached 5 points.

let playerScore = 0;
let computerScore = 0;
let gameIsActive = false
let roundIsActive = false;
let playerChoice = '';
let computerChoice = '';
let computerChoiceDisplay = 'Rock';


let playerSelectionRock = document.querySelector('#playerSelectionRock');
let playerSelectionPaper = document.querySelector('#playerSelectionPaper');
let playerSelectionScissors = document.querySelector('#playerSelectionScissors');
let playerSelectionRockClass = document.querySelector('.playerSelectionRock');
let playerSelectionPaperClass = document.querySelector('.playerSelectionPaper');
let playerSelectionScissorsClass = document.querySelector('.playerSelectionScissors');
let playerOutcomeChoice = document.querySelector('.playerOutcomeChoice');
let computerOutcomeChoice = document.querySelector('.computerOutcomeChoice');
let playerOutcomeScore = document.querySelector('#playerScore');
let computerOutcomeScore = document.querySelector('#computerScore');


let playerSelectors = document.getElementsByClassName('playerSelectors')

playerOutcomeScore.textContent = `You: ${playerScore}`;
computerOutcomeScore.textContent = `Computer: ${computerScore}`;


let restartGame = document.querySelector('#restartGame');


function computerPlay (){ // randomly select a computer choice
    let x = Math.floor(Math.random() * 3) + 1;
    if (x == 1) {
    return "Rock";
    } else if (x == 2) {
     return "Paper";
    } else {
     return "Scissors";
    }
}


function playerSelection(selection) { // Display player's choice and disable buttons

    let playerSelectors = document.querySelectorAll('.playerSelectors')
    playerOutcomeChoice.classList.add(`playerOutcomeChoice${selection}`);
    roundIsActive = true;
    disableSelections();
    
}



function computerSelection (selection){ // cycle through images & display computer selection
    computerOutcomeChoice.style.transitionDuration = "0s";
    let x = 0;
    
      let intervalID = setInterval(() =>  {
        if (computerChoiceDisplay == 'Rock') {
            computerChoiceDisplay = 'Paper';
            computerOutcomeChoice.classList.add(`computerOutcomeChoicePaper`);
            computerOutcomeChoice.classList.remove(`computerOutcomeChoiceRock`);  
        } else if (computerChoiceDisplay == 'Paper') {
            computerChoiceDisplay = 'Scissors';
            computerOutcomeChoice.classList.add(`computerOutcomeChoiceScissors`);
            computerOutcomeChoice.classList.remove(`computerOutcomeChoicePaper`);
        } else if (computerChoiceDisplay == 'Scissors') {
            computerChoiceDisplay = 'Rock';
            computerOutcomeChoice.classList.add(`computerOutcomeChoiceRock`);
            computerOutcomeChoice.classList.remove(`computerOutcomeChoiceScissors`);
        }
        if (++x === 20) {  
            clearInterval(intervalID) 
            computerOutcomeChoice.classList.remove(`computerOutcomeChoiceScissors`);
            computerOutcomeChoice.classList.remove(`computerOutcomeChoicePaper`);
            computerOutcomeChoice.classList.remove(`computerOutcomeChoiceRock`);
            computerOutcomeChoice.classList.add(`computerOutcomeChoice${selection}`);  
            
          }  

      }, 100);
    

}


function playRound (playerSelection ,computerSelection) { // compares user's choice with computer & declare's a winner
    

    if (playerSelection=='Rock' && computerSelection=='Paper' ||
            playerSelection=='Paper' && computerSelection=='Scissors' ||
            playerSelection=='Scissors' && computerSelection=='Rock') {
        computerScore++;
        setTimeout(function(){displayNotice(`You lose this round! ${computerSelection} beats ${playerSelection}`)},3000);
        setTimeout(endRound, 7500);
    
    } else if (playerSelection==computerSelection) {
        setTimeout(function(){displayNotice(`This round is a tie! You and the computer chose ${playerSelection}`)},3000);
        setTimeout(endRound, 7500);
    } else {
        playerScore++;
        setTimeout(function(){displayNotice(`You won this round! ${playerSelection} beats ${computerSelection}!`)},3000);
        setTimeout(endRound, 7500);
    }


}

function endGame() { // display game outcome message
    if (playerScore >= 5) {
        displayEndGameNotice('Congrats, you beat the computer!');
    } else {
        displayEndGameNotice('The computer has beaten you, better luck next time!');

    }
    

}

function endRound() { // update score & run re-enable buttons function
        playerOutcomeScore.textContent = `You: ${playerScore}`;
        computerOutcomeScore.textContent = `Computer: ${computerScore}`;
        restartGame.classList.add('buttons'); 
        restartGame.classList.remove('buttonsDisabled');
        restartGame.disabled = false;
    
    if (playerScore >= 5 || computerScore >= 5){
        endGame();
    } else {
        enableSelections();
        roundIsActive = false;
        if (playerChoice !=='') {
        playerOutcomeChoice.classList.remove(`playerOutcomeChoice${playerChoice}`);
        playerChoice = '';
        }
    }
}


function disableSelections() { // disable buttons while round is active

    for (let i = 0; i < playerSelectors.length; i++) {
        if  (playerSelectors[i].id == 'playerSelectionRock') {
            playerSelectors[i].classList.remove('playerSelectionRock');
            playerSelectors[i].classList.add('playerSelectionRockSelected');
        } else if (playerSelectors[i].id == 'playerSelectionPaper') {
            playerSelectors[i].classList.remove('playerSelectionPaper');
            playerSelectors[i].classList.add('playerSelectionPaperSelected');
        } else if (playerSelectors[i].id == 'playerSelectionScissors') {
            playerSelectors[i].classList.remove('playerSelectionScissors');
            playerSelectors[i].classList.add('playerSelectionScissorsSelected');

         }
    }
    restartGame.classList.remove('buttons'); 
    restartGame.classList.add('buttonsDisabled');
    restartGame.disabled = true;
    

}

function enableSelections() { // re-enable buttons
    for (let i = 0; i < playerSelectors.length; i++) {
        if  (playerSelectors[i].id == 'playerSelectionRock') {
            playerSelectors[i].classList.add('playerSelectionRock');
            playerSelectors[i].classList.remove('playerSelectionRockSelected');
        } else if (playerSelectors[i].id == 'playerSelectionPaper') {
            playerSelectors[i].classList.add('playerSelectionPaper');
            playerSelectors[i].classList.remove('playerSelectionPaperSelected');
        } else if (playerSelectors[i].id == 'playerSelectionScissors') {
            playerSelectors[i].classList.add('playerSelectionScissors');
            playerSelectors[i].classList.remove('playerSelectionScissorsSelected');
         }
    }
    restartGame.classList.add('buttons'); 
    restartGame.classList.remove('buttonsDisabled');
    restartGame.disabled = false;
    computerOutcomeChoice.style.transitionDuration = "0.7s";
    computerOutcomeChoice.classList.remove(`computerOutcomeChoiceRock`);
    computerOutcomeChoice.classList.remove(`computerOutcomeChoicePaper`);
    computerOutcomeChoice.classList.remove(`computerOutcomeChoiceScissors`);
}


function displayNotice(message) { // display round results
    var x = document.getElementById("notice");
    x.className = "show";
    let msg = document.getElementById("msg");
    msg.textContent = message;
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 4500);
}

  function displayEndGameNotice(message) { // display non-fading end game message
    let x = document.getElementById("notice");
    x.className = "end";
    let msg = document.getElementById("msg");
    msg.textContent = message;
    //setTimeout(function(){ x.className = x.className.replace("showEnd", ""); }, 4500);
  }


playerSelectionRockClass.addEventListener('click', function() { // runs user choice and begins round

    if (!roundIsActive) {
    playerChoice = 'Rock';
    computerChoice = computerPlay();
    playerSelection('Rock');
    computerSelection(computerChoice);
    playRound(playerChoice,computerChoice);
   
}
    
});

playerSelectionPaperClass.addEventListener('click', function() {  // runs user choice and begins round
    if (!roundIsActive) {
        playerChoice = 'Paper';
        computerChoice = computerPlay();
        playerSelection('Paper');
        computerSelection(computerChoice);
        playRound(playerChoice,computerChoice);
    }

        
    });

playerSelectionScissorsClass.addEventListener('click', function() {  // runs user choice and begins round
    if (!roundIsActive) {
        playerChoice = 'Scissors';
        computerChoice = computerPlay();
        playerSelection('Scissors');
        computerSelection(computerChoice);
        playRound(playerChoice,computerChoice);
    }    
});

restartGame.addEventListener('click',function(e) { // Restart Game
    roundIsActive = false;
    computerScore = 0;
    playerScore = 0;
    playerOutcomeScore.textContent = `You: ${playerScore}`;
    computerOutcomeScore.textContent = `Computer: ${computerScore}`;
    x = document.getElementById("notice");
    x.className = x.className.replace("show", "");
    x.className = x.className.replace("end", "");
       enableSelections();
     if (playerChoice !=='') {
        playerOutcomeChoice.classList.remove(`playerOutcomeChoice${playerChoice}`);
        playerChoice = '';
     }
 });