TheOdinProject – Rock Paper Scissors Project: implementing playRound function, basic game logic

In this article I wrote the basic logic of the game, within the playRound() function.

---

If you are like me and you don’t know the rules of the game, you can find them out from this tutorial or follow the 3 rules below, summarized by me.

Rock beats scissors and loses to paper

Paper beats rock, but loses to scissors

Scissors beat paper but loses to rock.

 

---

Implementation 1:

function playRound(playerSelection, computerSelection) {
    //  Rock beats scissors and loses to paper
    if (playerSelection.toLowerCase() === "rock" && computerSelection === "scissors") {
        console.log ("You Win! Rock beats Scissors")
    } else if (playerSelection.toLowerCase() === "rock" && computerSelection === "paper") {
        console.log ("You lose! Rock loses to Paper")
    }  //  Paper beats rock, but loses to scissors
    else if (playerSelection.toLowerCase() === "paper" && computerSelection === "rock") {
        console.log ("You Win! Paper beats Rock")
    } else if (playerSelection.toLowerCase() === "paper" && computerSelection === "scissors") {
        console.log ("You lose! Paper loses to Scissors")
    } //  Scissors beat paper but loses to rock.
    else if  (playerSelection.toLowerCase() === "scissors" && computerSelection === "paper") {
        console.log ("You Win! Scissors beats Paper")
    } else if (playerSelection.toLowerCase() === "scissors" && computerSelection === "rock") {
        console.log ("You lose! Scissors loses to Rock")
    }   //The same option or typing error
    else if (playerSelection.toLowerCase() === computerSelection){
        console.log("It’s a tie. Play again!")
    } else {
        console.log("Looks like you misspeled. Play again!")
    }
    return 
}

The function playRound(playerSelection, computerSelection) takes the parameters and compares them within a series of if/else if statement`s.

The playerSelection parameter is taken from the variable with the same name, currently it is hardcoded, but in the future version it will be taken from a user input. The condition was that this field should be a case-insensitive parameter (so users can input rock, ROCK, RocK or any other variation), so I applied the .toLowerCase() method.

The computerSelection parameter is taken from the variable with the same name, which selects it randomly calculated from the getComputerChoice() function, described in the previous article.

Rule 1:

// Rock beats scissors and loses to paper

Line 3: If playerSelection is “rock” and computerSelection is scissors, in this case the player wins and the console displays: “You Win! Rock beats Scissors”

Line 5: If playerSelection is “rock” and computerSelection is paper, in this case the player loses and the castile computer displays in the console: “You lose! Rock loses to Paper”

We proceed in the same way for the other 2 rules.

Line 18: If playerSelection and computerSelection are the same, the message is displayed: “It’s a tie. Play again!”

Line 21: If the user typed incorrectly or there is another unforeseen case, the message is displayed: “Looks like you misspelled. Play again!”

---

Implementation 2:

I asked ChatGPT what would improve at this code and he gave this switch statement, which I chose to use instead of if`s. This version uses a single switch statement to handle the player’s selection, and within each case, it checks the computer’s selection to determine the outcome. The .toLowerCase() method is applied to the playerSelection variable just once at the beginning to avoid redundant code.

I also thought about the initial version to apply the .toLowerCase()method just once at the beginning, but somehow I skipped it.

This is the code for case 2, together with the code for the rest of the application, valid at this time:

const playerSelection = "rock";
const computerSelection = getComputerChoice();

function getComputerChoice() {
    let options = ["rock", "paper", "scissors"]
    return options[Math.floor(Math.random() * options.length)]   
}

function playRound(playerSelection, computerSelection) {
    const player = playerSelection.toLowerCase();
    
    switch (player) {
        case "rock":
            if (computerSelection === "scissors") {
                console.log("You Win! Rock beats Scissors");
            } else if (computerSelection === "paper") {
                console.log("You lose! Rock loses to Paper");
            } else {
                console.log("It’s a tie. Play again!");
            }
            break;
        case "paper":
            if (computerSelection === "rock") {
                console.log("You Win! Paper beats Rock");
            } else if (computerSelection === "scissors") {
                console.log("You lose! Paper loses to Scissors");
            } else {
                console.log("It’s a tie. Play again!");
            }
            break;
        case "scissors":
            if (computerSelection === "paper") {
                console.log("You Win! Scissors beats Paper");
            } else if (computerSelection === "rock") {
                console.log("You lose! Scissors loses to Rock");
            } else {
                console.log("It’s a tie. Play again!");
            }
            break;
        default:
            console.log("Looks like you misspelled. Play again!");
            break;
    }
}

playRound(playerSelection, computerSelection)

 

---

If you want to see an index with all the articles for this application, go to Articles by projects.

Github page / Live version.