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-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 :
if you want the HTML file click on the download button below
