Javascript Rock Paper Scissors Game Source Code

How To Make a Javascript Rock Paper Scissors Game Project Using VS Code

In this JavaScript Tutorial we will see How to Make a Simple Rock, Paper, Scissors Game Using Div In JavaScript and Visual Studio Code .

Images Links:
https://pixabay.com/vectors/stone-rock-nature-pebble-zen-576268/
https://pixabay.com/vectors/certificate-paper-parchment-roll-154169/
https://pixabay.com/vectors/scissors-cut-hairdresser-1297454/

OR
https://pixabay.com/vectors/rock-paper-scissors-rock-hand-296854/
https://pixabay.com/vectors/rock-paper-scissors-scissors-hand-296853/
https://pixabay.com/vectors/rock-paper-scissors-paper-hand-296855/

Project Source Code:

DOCTYPE HTML>
<head>

    <style>
    
        .box, .mini-box{border: 1px solid #111; display: inline-block; 
                        overflow: hidden; background-position: center; 
                        background-repeat: no-repeat; background-size: contain;}
        .box{width: 200px; height: 150px; background-color: chocolate}
        .mini-box{width: 200px; height: 90px; background-color: #222}
        .selection{margin-top: 20px;}
        #rock{background-image: url(
                                    "C:\\Users\\1BestCsharp\\Downloads\\rock-v.png"
                                   );}
        #paper{background-image: url(
                                     "C:\\Users\\1BestCsharp\\Downloads\\paper-v.png"
                                    );}
        #scissors{background-image: url(
                                   "C:\\Users\\1BestCsharp\\Downloads\\scissors-v.png"
                                       );}
        #count{text-align: center; line-height: 150px;}
        #result{background-color: #00b894; color: #fff; width: 100%; 
                font-size: 50px; display: inline-block;}

    </style>

head>

<body>


    <div class="container">

        <div>
            <div class="box" id="player">div>
            <div class="box" id="count">
                <span id="result">0-0span>
            div>
            <div class="box" id="computer">div>
        div>

        <div class="selection">
            <div class="mini-box" id="rock" onclick="displaySelectedImage('rock')">
            div>
            <div class="mini-box" id="paper" onclick="displaySelectedImage('paper')">
            div>
            <div class="mini-box" id="scissors" 
                 onclick="displaySelectedImage('scissors')">
            div>
       div>
        
    div>

    <script>
    
        player = document.getElementById("player");
        computer = document.getElementById("computer");
        result = document.getElementById("result");

        rock = 'C:/Users/1BestCsharp/Downloads/rock-v.png';
        paper = 'C:/Users/1BestCsharp/Downloads/paper-v.png';
        scissors = 'C:/Users/1BestCsharp/Downloads/scissors-v.png';

        var items = [rock, paper, scissors];

        player_wins_count = 0;
        computer_wins_count = 0;

        function displaySelectedImage(player_selected_image)
        {
            // select a random image for the computer
            computer_random_image = items[Math.floor(Math.random()*items.length)];

            if(player_selected_image == 'rock')
            {
                player.setAttribute("style","background-image: url('"+rock+"')");
                computer.setAttribute("style","background-image: url('"+
                                       computer_random_image+"')");

                if(computer_random_image == rock)
                {
                    console.log('Draw')
                }
                else if(computer_random_image == scissors)
                {
                    console.log('You Win');
                    player_wins_count ++;
                }
                else
                {
                    console.log('You Lose');
                    computer_wins_count ++;
                }

                result.innerText = player_wins_count + " - " + computer_wins_count;

            }
            else if(player_selected_image == 'paper')
            {
                player.setAttribute("style","background-image: url('"+paper+"')");
                computer.setAttribute("style","background-image: url('"+
                                       computer_random_image+"')");

                if(computer_random_image == paper)
                {
                    console.log('Draw')
                }
                else if(computer_random_image == rock)
                {
                    console.log('You Win');
                    player_wins_count ++;
                }
                else
                {
                    console.log('You Lose');
                    computer_wins_count ++;
                }

                result.innerText = player_wins_count + " - " + computer_wins_count;

            }
            else
            {
                player.setAttribute("style","background-image: url('"+scissors+"')");
                computer.setAttribute("style","background-image: url('"+
                                       computer_random_image+"')");

                if(computer_random_image == scissors)
                {
                    console.log('Draw')
                }
                else if(computer_random_image == paper)
                {
                    console.log('You Win');
                    player_wins_count ++;
                }
                else
                {
                    console.log('You Lose');
                    computer_wins_count ++;
                }

                result.innerText = player_wins_count + " - " + computer_wins_count;
            }
        }
    
    </script>


body>

html>
                                              