Javascript Rock Paper Scissors Game Source Code

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

Javascript Rock Paper Scissors Game Source 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-0</span>
</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>
                                              


////// OUTPUT : 


Javascript Rock Paper Scissors Game


if you want the HTML file click on the download button below


download the source code






Share this

Related Posts

Previous
Next Post »