Step by step simple game in js

Lets code step by step game calling name “rock,paper,scissors” in JavaScript. Before starting coding, firstly we should think what we will do it.

1.Step

We play against computer so firstly create two of functions. One of them for computerPlay(), another of them playerPlay() .

function computerPlay(){
}
function playerPlay(){
}

2.Step

Let’s create array for computer selection and use Math.random() function.but we also want find element name in array so should use
Math.floor(Math.random() * arr.length) .

function computerPlay() {
    let arr = ["rock", "paper", "scissors"]
    let computerSelection = arr[Math.floor(Math.random() * arr.length)];
    return computerSelection
}

3.Step

Create input with prompt function for player selection and for accept all lowercase add “.toLowerCase()” function

function playerPlay(){
    let playerSelection = prompt("Please type your selection(Rock, Paper, Scissors):").toLowerCase()
    return playerSelection
}

4.Step

Define computerPlay() and playerPlay() functions.

const computerSelection = computerPlay();
const playerSelection = playerPlay();

5.Step

Create NEW function called playRound() and type game conditions into function. While doing all this we should add toLowerCase() function to avoid confusion.

function playRound(playerSelection, computerSelection) {
    if (playerSelection.toLowerCase() === computerSelection) {
        return `It's a tie! You both picked ${playerSelection}`
    }
    else{
        return "Please be sure obey the rule!"
    }
}

Add more conditions

function playRound(playerSelection, computerSelection) {
    if (playerSelection.toLowerCase() === computerSelection) {
        return `It's a tie! you both picked ${playerSelection}`
    }
    else if(playerSelection.toLowerCase() ==="rock" && computerSelection.toLowerCase() ==="scissors"){
        return "You Win. Rock beat Scissors!"
    }
    else if(playerSelection.toLowerCase() ==="rock" && computerSelection.toLowerCase() ==="paper"){
        return "You Lose. Paper beat Rock!"
    }
    else if(playerSelection.toLowerCase() === "paper" && computerSelection.toLowerCase() === "rock"){
        return "You Win. Paper beat Rock!"
    }
    else if(playerSelection.toLowerCase() ==="paper" && computerSelection.toLowerCase() ==="scissors"){
        return "You Lose. Scissors beat Paper!"
    }
    else if(playerSelection.toLowerCase() ==="scissors" && computerSelection.toLowerCase() ==="paper"){
        return "You Win. Scissors beat Paper!"
    }
    else if(playerSelection.toLowerCase() ==="scissors" && computerSelection.toLowerCase() ==="rock"){
        return "You Lose. Rock beat Scissors!"
    }
    else{
        return "Please be sure obey the rule!"
    }
}

6.Step

And finally add console.log(playRound()) for display on console.

console.log(playRound(playerSelection,computerSelection))

Fullcode

function computerPlay() {
    let arr = ["rock", "paper", "scissors"]
    let computerSelection = arr[Math.floor(Math.random() * arr.length)];
    return computerSelection
}

function playerPlay(){
    let playerSelection = prompt("Please type your selection(Rock, Paper, Scissors):").toLowerCase()
    return playerSelection
}

const computerSelection = computerPlay();
const playerSelection = playerPlay();

function playRound(playerSelection, computerSelection) {
    if (playerSelection.toLowerCase() === computerSelection) {
        return `It's a tie! you both picked ${playerSelection}`
    }
    else if(playerSelection.toLowerCase() ==="rock" && computerSelection.toLowerCase() ==="scissors"){
        return "You Win. Rock beat Scissors!"
    }
    else if(playerSelection.toLowerCase() ==="rock" && computerSelection.toLowerCase() ==="paper"){
        return "You Lose. Paper beat Rock!"
    }
    else if(playerSelection.toLowerCase() === "paper" && computerSelection.toLowerCase() === "rock"){
        return "You Win. Paper beat Rock!"
    }
    else if(playerSelection.toLowerCase() ==="paper" && computerSelection.toLowerCase() ==="scissors"){
        return "You Lose. Scissors beat Paper!"
    }
    else if(playerSelection.toLowerCase() ==="scissors" && computerSelection.toLowerCase() ==="paper"){
        return "You Win. Scissors beat Paper!"
    }
    else if(playerSelection.toLowerCase() ==="scissors" && computerSelection.toLowerCase() ==="rock"){
        return "You Lose. Rock beat Scissors!"
    }
    else{
        return "Please be sure obey the rule!"
    }
}

console.log(playRound(playerSelection,computerSelection))