Rock Paper Scissors JavaScript Game

Today we going to develop Rock Paper Scissors JavaScript game. I decided to share my code with you. So let’s make Rock Paper Scissors Game in JavaScript.

What we are gonna do?

In this game, the computer and user are the players. User just needs to press Rock, Paper, and Scissors button. Computer also generates their choice while the user presses the button. Every time when the user presses the button, one function call made to check the condition for winning. According to the condition, the score counter will increase. This game is infinite.

Let’s Code the Rock Paper Scissors Game in JavaScript

Here I’m using bootstrap for UI purpose. You can also use your CSS but today we just focus on the logic of rock paper scissors javascript.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock Paper Scissors</title>

    <!-- loading bootstrap css file -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <div class="d-flex justify-content-evenly">
            <div class="text-center">
                <h5>Computer Score</h5>
                <h4 id="computer-score">0</h4>
            </div>
            <div class="text-center">
                <h5>Your Score</h5>
                <h4 id="player-score">0</h4>
            </div>
        </div>

        <div class="d-flex flex-row justify-content-center align-items-center" style="height: 70vh;">
            <div class="">
                <div class="text-center">
                    <h4>Computer</h4>
                    <h1 id="computer-ch" style="transform:rotate(180deg);" class="display-1">✊</h1>

                    <div class="my-5">
                        <small><i class="text-muted">follow @code_snail</i></small>
                        <br>
                        <b id="message">Message</b>
                    </div>

                    <h1 class="display-1" id="player-ch">✊</h1>
                    <h4>You</h4>
                </div>
            </div>
        </div>
        
    </div>

  
    <div class="d-flex justify-content-center fixed-bottom">
        <button class="btn btn-primary p-0">
            <h1 class="display-3 p-4" id="rock">✊</h1>
        </button>
        <button class="btn btn-primary p-0 mx-2">
            <h1 class="display-3 p-4" id="paper">🖐</h1>
        </button>
        <button class="btn btn-primary p-0">
            <h1 class="display-3 p-4" id="scissors">✌️</h1>
        </button>
    </div>
    </div>

    <!-- loading script.js -->
    <script src="script.js"></script>
    
    <!-- loading bootstrap js file -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous"></script>
</body>

</html>

script.js

var btn_rock = document.querySelector('#rock');
var btn_paper = document.querySelector('#paper');
var btn_scissors = document.querySelector('#scissors');
var player_ch = document.querySelector("#player-ch");
var comp_ch = document.querySelector("#computer-ch");
var msg = document.querySelector("#message");
var computer_score = document.querySelector("#computer-score");
var player_score = document.querySelector("#player-score");


//generate random choice from array for computer choice
var myArray = ["✊", "🖐", "✌️"];

var computer_ch = '';
var user_ch = '';

var comp_score = 0
var user_score = 0

// change the player's hand by clicking the button and set the text of the player side
btn_rock.addEventListener('click', () => {

    // generate choice for computer every time user click the button and storing in computer_ch
    computer_ch = myArray[Math.floor(Math.random() * myArray.length)];

    // set the generated computer choice
    comp_ch.innerText = computer_ch;

    // set the user text same as btn rock (emoji)
    player_ch.innerText = btn_rock.innerText;

    // storing rock emoji in user_ch
    user_ch = btn_rock.innerText;

    //check for win 
    check_for_win(computer_ch, user_ch);
});


btn_paper.addEventListener('click', () => {
    // generate choice for computer every time user click the button
    computer_ch = myArray[Math.floor(Math.random() * myArray.length)];

    // set the generated computer choice
    comp_ch.innerText = computer_ch;

    // set the user text same as btn paper (emoji)
    player_ch.innerText = btn_paper.innerText;

    // storing paper emoji in user_ch
    user_ch = btn_paper.innerText;

    //check for win 
    check_for_win(computer_ch, user_ch);
});


btn_scissors.addEventListener('click', () => {
    // generate choice for computer every time user click the button
    computer_ch = myArray[Math.floor(Math.random() * myArray.length)];

    // set the generated computer choice
    comp_ch.innerText = computer_ch;

    // set the user text same as btn scissor (emoji)
    player_ch.innerText = btn_scissors.innerText;

    // storing scissors emoji in user_ch
    user_ch = btn_scissors.innerText;

    //check for win 
    check_for_win(computer_ch, user_ch);
});

// check for wining, this function call every time button clicked
// not declare the winner but increase scores according to condition
function check_for_win(computer_ch, user_ch) {
    // console.log(computer_ch, user_ch);
    if (user_ch == computer_ch) {
        // nothing 
        //set message 
        msg.classList.remove("text-success");
        msg.classList.remove("text-danger");
        msg.innerText = "Tie";
    }

    // guys we are comparing emojis XD

    else if (user_ch == "✊") {
        if (computer_ch == "🖐") {
            //set message 
            msg.innerText = "👉 You lose! Paper covers Rock";

            // add class accoding to message, here red becuase you lose
            // before that remove current class
            msg.classList.remove("text-success");
            msg.classList.add("text-danger");

            //computer wins, so increment computer's score
            computer_score.innerText = ++comp_score;


        }
        else {
            //set message 
            msg.innerHTML = "👉 You win! Rock smashes Scissors";

            // add class accoding to message, here red becuase you win
            // before that remove current class
            msg.classList.remove("text-danger");
            msg.classList.add("text-success");

            //player wins, so increment player's score
            player_score.innerText = ++user_score;
        }
    }

    else if (user_ch == "🖐") {
        if (computer_ch == "✌️") {
            //set message 
            msg.innerText = "👉 You lose! Scissor cut Paper";

            // add class accoding to message, here red becuase you lose
            // before that remove current class
            msg.classList.remove("text-success");
            msg.classList.add("text-danger");

            //computer wins, so increment computer's score
            computer_score.innerText = ++comp_score;


        }
        else {
            //set message 
            msg.innerHTML = "👉 You win! Paper covers Rock";

            // add class accoding to message, here red becuase you win
            // before that remove current class
            msg.classList.remove("text-danger");
            msg.classList.add("text-success");

            //player wins, so increment player's score
            player_score.innerText = ++user_score;
        }
    }

    else if (user_ch == "✌️") {
        if (computer_ch == "✊") {
            //set message 
            msg.innerText = "👉 You lose! Rock smashes Scissors";

            // add class accoding to message, here red becuase you lose
            // before that remove current class
            msg.classList.remove("text-success");
            msg.classList.add("text-danger");

            //computer wins, so increment computer's score
            computer_score.innerText = ++comp_score;


        }
        else {
            //set message 
            msg.innerHTML = "👉 You win! Scissor cut Paper";

            // add class accoding to message, here red becuase you win
            // before that remove current class
            msg.classList.remove("text-danger");
            msg.classList.add("text-success");

            //player wins, so increment player's score
            player_score.innerText = ++user_score;
        }
    }
    else {
        msg.innerHTML = ":(";
    }

}

// follow me on Instagram @code_snail

Output

rock paper scissors javascript game, rock paper scissors game in javascript

Play now: Rock Paper Scissors JavaScript Game (Live Demo)

Hope you like it. Share this game and make your own rock paper scissors game in javascript.

more projects,

Leave a Comment

Copy link
Powered by Social Snap