Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Rock, Paper & Scissor Game" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Rock, Paper & Scissor Game" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS and JavaScript code below.
Rock, Paper & Scissor Game [Source Code]
To get the following HTML, CSS & JS code for the Rock, Paper & Scissor Game project. You need to create three files one is a HTML file, second one is a CSS file and the another one is JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with .html extension for HTML code, .css extension for CSS code and .js for JavaScript code.
You can also download all source code files from the given download button.
HTML
<!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.0">
<title>Rock Paper & Scissor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Rock, Paper & Scissor Game</h1>
<h2>Pick your choice</h2>
<div class="choices">
<img src="images/rock.jpg" alt="rock" id="rock">
<img src="images/paper.jpg" alt="paper" id="paper">
<img src="images/scissor.jpg" alt="scissor" id="scissor">
</div>
<div class="both-choices">
<h3>User Choice : <span class="user-choice">NA</span></h3>
<h3>Computer Choice : <span class="computer-choice">NA</span></h3>
</div>
<p class="result">Results will appear here...</p>
<div class="points">
<h3>User Points : <span class="user-points">0</span></h3>
<h3>Computer Points : <span class="computer-points">0</span></h3>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body,
.container,
.choices,
.both-choices,
.points {
display: flex;
justify-content: center;
align-items: center;
}
body {
background-color: black;
color: white;
height: 100vh;
}
.container {
flex-direction: column;
gap: 20px;
}
.choices {
gap: 20px;
width: 400px;
}
.choices img {
width: 100px;
height: 100px;
cursor: pointer;
border-radius: 50%;
}
.choices img:active {
transform: scale(0.95);
}
.both-choices h3:nth-child(1) {
margin-right: 20px;
}
.both-choices span {
font-weight: 500;
color: yellow;
}
.result {
font-size: 28px;
color: yellow;
}
.points h3:nth-child(1) {
margin-right: 15px;
}
.points span {
font-weight: 500;
color: yellow;
}
JavaScript
const imgEls = document.querySelectorAll("img");
const resultEl = document.querySelector(".result");
const userChoiceEl = document.querySelector(".user-choice");
const computerChoiceEl = document.querySelector(".computer-choice");
const userPointsEl = document.querySelector(".user-points");
const computerPointsEl = document.querySelector(".computer-points");
let userPoints= 0;
let computerPoints = 0;
imgEls.forEach((img) => {
img.addEventListener("click", () => {
const computerTurn = computerChoice();
const result = gamePlay(img.id, computerTurn);
userChoiceEl.textContent = img.id;
computerChoiceEl.textContent = computerTurn;
resultEl.textContent = result;
});
});
// Computer randomly pick one choice from the given choices
function computerChoice() {
const choices = ["rock", "paper", "scissor"];
const randomChoice = Math.floor(Math.random() * choices.length);
return choices[randomChoice];
}
// it return result by checking user and computer selection
function gamePlay(userSelection, computerSelection) {
if (userSelection === computerSelection) {
return "It is a tie..!";
} else if (
(userSelection === "rock" && computerSelection === "scissor") ||
(userSelection === "paper" && computerSelection === "rock") ||
(userSelection === "scissor" && computerSelection === "paper")
) {
userPoints++;
userPointsEl.textContent = userPoints;
return "Hurrah! You win..! " + userSelection + " beats " + computerSelection;
} else {
computerPoints++;
computerPointsEl.textContent = computerPoints;
return "Oops! You lose...! " + computerSelection + " beats " + userSelection;
}
}
Generating Download Link...