🎮 Rock Paper Scissors Game Using HTML, CSS & JavaScript
The classic game of Rock Paper Scissors (also known as Stone Paper Scissors) is one of the simplest and most fun games to play—and it’s an excellent beginner-level JavaScript project. In this blog, I’ll walk you through how I built a fully functional Rock Paper Scissors game using just HTML, CSS, and JavaScript.
This browser-based game lets users choose between Rock, Paper, or Scissors, and the computer picks its move randomly. The game then decides the winner and displays the result along with a live score. It’s a great way to apply your understanding of events, DOM manipulation, conditionals, and randomness in JavaScript.
🔧 Features of the Game
- User can select Rock, Paper, or Scissors
- Computer randomly selects its choice
- Game logic compares both moves and declares a winner
- Live score update for user and computer
- Simple and responsive UI
💻 HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 style="text-align: center; text-decoration:underline; margin-top: 20px;">STONE PAPER SCISSOR GAME</h1>
<div class="info"><h3 id="left">YOU : <span class="green"></span></h3>
<h3 id="right">COMPUTER : <span class="red"></span></h3>
</div>
<div class="con">
<span><div id="rock" class="stone stone1"></div><h3>STONE</h3><button id="one" class="select" onclick="one()">SELECT</button></span>
<span><div id="paper" class="stone stone2"></div><h3>PAPER</h3><button id="two" class="select" onclick="two()">SELECT</button></span>
<span><div id="cutter" class="stone stone3"><img src="cuter.png" alt=""></div><h3>SCISSOR</h3><button id="three" class="select" onclick="three()">SELECT</button></span>
</div>
<div id="result"></div>
<h6 style="margin-top:20px; text-decoration: underline; text-align: center;">Created by Ujjwal Sharma.</h6>
<script src="app.js"></script>
</body>
</html>
🎨 CSS Code
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 90vh;
width: 100%;
display: flex;
/* justify-content: center; */
/* align-items: center; */
/* gap: 10px; */
flex-direction: column;
}
#right{
margin-right: 120px;
float: right;
}
#left{
margin-left: 120px;
float: left;
}
#result{
background-color: rgba(199, 191, 207, 0.817);
/* width: fit-content; */
/* padding: 10px; */
margin: auto;
font-size: 20px;
font-weight: 600;
color: rgb(28, 26, 26);
/* border: 1px solid black; */
}
.info #left .green{
padding-left: 8px;
padding-right: 9px;
border-radius:50%;
margin-left: 5px;
background-color: green;
}
.info #right .red{
padding-left: 8px;
padding-right: 9px;
border-radius:50%;
margin-left: 5px;
background-color: rgb(204, 20, 20);
}
.con{
min-height: 380px;
width: 80%;
background-color: rgba(89, 32, 143, 0.817);
margin: auto;
display: flex;
justify-content: space-around;
align-items: center;
}
.con span{
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
color: rgb(240, 229, 229);
cursor: pointer;
}
.con span button{
cursor: pointer;
padding: 5px;
background-color: transparent;
border: none;
outline: none;
border: 1px solid rgb(23, 22, 22);
font-weight: 600;
border-radius: 15px;
background-color: rgb(232, 217, 217);
transition: 0.5s ease-in-out;
&:hover{
background-color: rgb(181, 165, 165);
box-shadow: 0 0 20px black;
}
}
.stone,.paper,.scissor{
height: 180px;
width: 180px;
/* border: 2px solid rgb(85, 77, 77); */
border-radius: 50%;
/* outline: 1px solid rgb(51, 45, 45); */
/* outline-offset: -8px; */
background-color: rgb(229, 213, 213);
transition: 0.5s ease-in-out;
&:hover{
/* outline-offset: 0px; */
box-shadow: 0 0 20px black;
}
}
.stone1{
background: url("rock.png");
background-size: contain;
}
.stone2{
background: url("paper.png");
background-size: contain;
}
.stone{
display: flex;
justify-content: center;
align-items: center;
/* object-fit: cover; */
}
.stone img{
margin-top: 15px;
height: 218px;
}
⚙️ JavaScript Code
let btn1 = document.getElementById("one");
let btn2 = document.getElementById("two");
let btn3 = document.getElementById("three");
let rock=document.getElementById("rock");
let paper=document.getElementById("paper");
let cutter=document.getElementById("cutter");
let result=document.getElementById("result");
var user=0;
let one = () => {
btn1.innerText = "SELECTED"
btn1.style.border = "3px green";
btn1.style.color = "green";
btn1.style.boxShadow = "0 0 20px green";
btn1.disabled = "true";
btn2.disabled = "true";
btn3.disabled = "true";
user=0;
setTimeout("com(num)", 2000);
}
let two = () => {
btn2.innerText = "SELECTED"
btn2.style.border = "3px green";
btn2.style.color = "green";
btn2.style.boxShadow = "0 0 20px green";
btn1.disabled = "true";
btn2.disabled = "true";
btn3.disabled = "true";
user=1;
setTimeout("com(num)", 2000);
}
let three = () => {
btn3.innerText = "SELECTED"
btn3.style.border = "3px green";
btn3.style.color = "green";
btn3.style.boxShadow = "0 0 20px green";
btn1.disabled = "true";
btn2.disabled = "true";
btn3.disabled = "true";
user=2;
setTimeout("com(num)", 2000);
}
let num = Math.random() * 3;
let numint=parseInt(num);
// console.log(numint);
function com(num) {
if (numint === 0) {
btn1.disabled = "false";
btn1.innerText = "SELECTED"
btn1.style.border = "3px red";
btn1.style.color = "red";
btn1.style.boxShadow = "0 0 20px red";
if(user===0){
result.innerText="Match Draw"
result.style.padding="5px"
}
else if(user===1){
result.innerText="You win"
result.style.padding="5px"
}
else{
result.innerText="Computer win"
result.style.padding="5px"
}
}
else if (numint === 1) {
btn2.disabled = "false";
btn2.innerText = "SELECTED"
btn2.style.border = "3px red";
btn2.style.color = "red";
btn2.style.boxShadow = "0 0 20px red";
if(user===0){
result.innerText="Computer win"
result.style.padding="5px"
}
else if(user===1){
result.innerText="Match Draw"
result.style.padding="5px"
}
else{
result.innerText="You win"
result.style.padding="5px"
}
}
else {
btn3.innerText = "SELECTED"
btn3.style.border = "3px red";
btn3.style.color = "red";
btn3.style.boxShadow = "0 0 20px red";
btn3.disabled = "true";
if(user===0){
result.innerText="You win"
result.style.padding="5px"
}
else if(user===1){
result.innerText="Computer win"
result.style.padding="5px"
}
else{
result.innerText="Match Draw"
result.style.padding="5px"
}
}
}
🔗 Try It Now
I’ve hosted the project online for you to explore:
👉 Live Demo
💡 What You Learn from This Project
- Handling click events and user interaction
- Generating random values in JavaScript
- Using if-else statements for logic comparison
- DOM manipulation to show results and update scores
- Basic HTML layout and CSS styling for game UI
🚀 Conclusion
Building a Rock Paper Scissors game is a fantastic way to practice frontend development. It reinforces concepts like event handling, random logic, DOM updates, and conditional programming. The game is simple but can be expanded with animations, sounds, or advanced UI features.
Thanks for playing! 🎮 Happy coding!
0 Comments