 |
| Rockpaperscissor game using javascript |
In this Article, we will learn how to create Rockpaperscissor game using javascript with source code. Creating Rockpaperscissor game using javascript becomes simple with the given tutorial, which provides a simple step-by-step process to design Rockpaperscissor game using javascript. So, let's go and follow the given steps carefully.
Steps to create Rockpaperscissor game using javascript
Here are the Steps to create Rockpaperscissor game using javascript as given below :-
1) Creating File on VS CODE :
Open VS Code, Create a new folder to add html, css and js file.
2) Adding HTML :
Add the .html file in the project folder and give it the name as - index.html.
3) Copy and Paste HTML code :
copy the following code and paste it in index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RockPaperScissor Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>RockPaperScissor Game</h1>
<div>
<img src="rock.jpg" onclick="playgame('rock')">
<img src="paper.jpg" onclick="playgame('paper')">
<img src="scissor.jpg" onclick="playgame('scissor')">
</div><br>
<span>(Note : choose one by clicking to play game)</span><br>
<p id="uc">Your choice : </p>
<p id="cc">Computer choice : </p>
<p id="score">score : </p>
<h3 id="rs">Result!</h3>
<script src="main.js"></script>
</body>
</html>
4) Adding CSS :
Add the .css file in the project folder and give it the name as - style.css.
5) Copy and Paste CSS code :
copy the following code and paste it in style.css file.
body {
font-size: 15pt;
}
*{
margin:0;
padding:0;
color:white;
background-color: black ;
}
h1{
text-align: center;
font-size:28px;
margin:30px;
}
img{
height:100px;
width:100px;
border:2px solid white;
border-radius:50px;
padding: 0px;
margin:5px;
}
div{
display: flex;
justify-content: center;
align-items: center;
}
span{
display:flex;
justify-content: center;
font-size:14px;
}
p{
text-align: center;
margin:20px;
font-weight: bold;
}
h3{
text-align: center;
margin:10px;
}
img:hover{
height:110px;
width:110px;
border-radius:60px;
}
6) Adding Javascript :
Add the .js file in the project folder and give it the name as - script.js.
7) Copy and Paste JS code :
copy the following code and paste it in script.js file.
const choices = ["rock", "paper", "scissor"];
let score = 0;
function playgame(userChoice) {
document.getElementById("uc").textContent = "Your choice : " + userChoice;
const computerChoiceIndex = Math.floor(Math.random() * 3);
const computerChoice = choices[computerChoiceIndex];
document.getElementById("cc").textContent = "Computer choice : " + computerChoice;
if (userChoice === computerChoice) {
document.getElementById("rs").textContent = "Game is Tie!";
rs.style.color = "blue";
} else if ((userChoice === 'rock' && computerChoice === 'scissor') || (userChoice === 'paper' && computerChoice === 'rock') || (userChoice === 'scissor' && computerChoice === 'paper')) {
document.getElementById("rs").textContent = "Congrats,You won the game!";
rs.style.color = "green";
score++;
document.getElementById("score").textContent = "score : " + score;
} else {
document.getElementById("rs").textContent = "You lost, Try again!"
rs.style.color = "red";
}
}
8) Adding Images of rock, paper and scissor :
After adding codes, add this images to the folder.
9) Check the Output :
After adding source code to the files, check the output of the project.
Here is the output of Rockpaperscissor game using javascript :
About the project -
In this code, we used html to add the images in the project like rock, paper and scissor to show on output and added the text to show the score. With Javascript, we've added the actions after clicking on the element like rock, paper and scissor and we added a random function to get output as a computer. It shows the result when we click on element as "win", "loss" or "tie".
Hope this tutorial will help you to create Rockpaperscissor game using javascript easily with source code. if you have any confusion or query then you can contact us on our coding community.
Checkout our website for more information and join our coding community on telegram to get more knowledge about coding.
Tags:
projects