In this article you will know how to create Rock Paper Scissors Game using HTML CSS and JavaScript. The Rock, Paper, Scissors game in JavaScript is a simple web-based game where a user can play against the computer.
The game involves three elements: rock, paper, and scissors, each of which can beat one of the others while being defeated by the third.
The user chooses one of the elements, and the computer randomly selects one as well. The winner is determined based on the rules: rock beats scissors, scissors beats paper, and paper beats rock.
Rock Paper Scissor Game in HTML, CSS, Javascript
The classic game of Rock, Paper, Scissors is a simple yet entertaining hand game that has been played for generations. In this article, we’ll walk through the process of creating a basic Rock, Paper, Scissors game using JavaScript.
This project is perfect for beginners who want to enhance their understanding of JavaScript fundamentals while building a fun and interactive game.
See the Pen Untitled by Growthpanda (@Growthpanda) on CodePen.
I have given the preview of this Rock Paper Scissors above. If you want the source code you can find it below.
Structure of Rock Paper Scissors Game
Let’s start by creating the basic HTML structure for our Rock Paper Scissor game. Open your preferred code editor and create an HTML file with the following content.
<body>
<div class="container">
<div class="scores">
<p>Computer :
<span id="computer_score">0</span>
</p>
<p>
You :
<span id="user_score">0</span>
</p>
</div>
<div class="weapons">
<button onclick="checker('rock')">
<i class="far fa-hand-rock"></i>
</button>
<button onclick="checker('paper')">
<i class="far fa-hand-paper"></i>
</button>
<button onclick="checker('scissor')">
<i class="far fa-hand-scissors"></i>
</button>
</div>
<div class="details">
<p id="user_choice"></p>
<p id="comp_choice"></p>
<p id="result"></p>
</div>
</div>
</body>CSS of Rock Paper Scissors Game
To make our javascript Rock Paper Scissor game visually appealing, let’s add some basic styling. Create a new file named style.css and include the following code.
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 100vh;
background: linear-gradient(
135deg,
#ffcf1b,
#ff8b1b
);
}
.container{
width: 45%;
min-width: 500px;
background-color: #ffffff;
padding: 40px 30px;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
border-radius: 10px;
box-shadow: 0 15px 25px rgba(0,0,0,0.15);
}
.scores{
margin-bottom: 50px;
text-align: right;
}
.weapons{
width: 90%;
margin: auto;
display: flex;
justify-content: space-around;
}
.weapons button{
background-color: #ffd51b;
color: #000000;
border: none;
font-size: 50px;
height: 100px;
width: 100px;
border-radius: 50%;
outline: none;
cursor: pointer;
}
.details{
margin-top: 30px;
text-align: center;
}
.scores,.details{
font-family: 'Poppins',sans-serif;
font-weight: 400;
font-size: 15px;
}
#result{
width: 180px;
padding: 10px 0;
margin: 30px auto;
font-weight: 600;
letter-spacing: 0.5px;
}
#user_choice,
#computer_choice{
font-weight: 400;
margin-bottom: 10px;
}
span{
font-weight: 600;
}JavaScript for Rock Paper Scissors Game
Now, let’s add the JavaScript logic to make the game functional. Create a new file named script.js and include the following code.
let [computer_score,user_score]=[0,0];
let result_ref = document.getElementById("result");
let choices_object = {
'rock' : {
'rock' : 'draw',
'scissor' : 'win',
'paper' : 'lose'
},
'scissor' : {
'rock' : 'lose',
'scissor' : 'draw',
'paper' : 'win'
},
'paper' : {
'rock' : 'win',
'scissor' : 'lose',
'paper' : 'draw'
}
}
function checker(input){
var choices = ["rock", "paper", "scissor"];
var num = Math.floor(Math.random()*3);
document.getElementById("comp_choice").innerHTML =
` Computer choose <span> ${choices[num].toUpperCase()} </span>`;
document.getElementById("user_choice").innerHTML =
` You choose <span> ${input.toUpperCase()} </span>`;
let computer_choice = choices[num];
switch(choices_object[input][computer_choice]){
case 'win':
result_ref.style.cssText = "background-color: #cefdce; color: #689f38";
result_ref.innerHTML = "YOU WIN";
user_score++;
break;
case 'lose':
result_ref.style.cssText = "background-color: #ffdde0; color: #d32f2f";
result_ref.innerHTML = "YOU LOSE";
computer_score++;
break;
default:
result_ref.style.cssText = "background-color: #e5e5e5; color: #808080";
result_ref.innerHTML = "DRAW";
break;
}
document.getElementById("computer_score").innerHTML = computer_score;
document.getElementById("user_score").innerHTML = user_score;
}Yes! You’ve just created a simple Rock, Paper, Scissors game using JavaScript. This project serves as a great starting point for beginners to practice basic JavaScript concepts and enhance their web development skills.
Let me know how you like this Javascript Rock Paper Scissors Game by commenting. If you want to get more tutorials of such games, you can find them on my site.
Here’s a simple implementation of Rock, Paper, Scissors in JavaScript for a console-based game:
function getUserChoice() {
var userInput = prompt(“Enter Rock, Paper, or Scissors:”).toLowerCase();
if (userInput === “rock” || userInput === “paper” || userInput === “scissors”) {
return userInput;
} else {
console.log(“Invalid choice. Please enter Rock, Paper, or Scissors.”);
return getUserChoice();
}
}
function getComputerChoice() {
var choices = [“rock”, “paper”, “scissors”];
var randomIndex = Math.floor(Math.random() * 3);
return choices[randomIndex];
}
function determineWinner(userChoice, computerChoice) {
if (userChoice === computerChoice) {
return “It’s a tie!”;
} else if (
(userChoice === “rock” && computerChoice === “scissors”) ||
(userChoice === “paper” && computerChoice === “rock”) ||
(userChoice === “scissors” && computerChoice === “paper”)
) {
return “You win!”;
} else {
return “Computer wins!”;
}
}
function playGame() {
var userChoice = getUserChoice();
var computerChoice = getComputerChoice();
console.log(“You chose: ” + userChoice);
console.log(“Computer chose: ” + computerChoice);
console.log(determineWinner(userChoice, computerChoice));
}
// Uncomment the line below to play the game
// playGame();
Here’s a simple implementation of Rock, Paper, Scissors using HTML, CSS, and JavaScript. Copy and paste the following code into an HTML file.
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
#game-container {
text-align: center;
}
#result {
font-size: 24px;
margin-top: 20px;
}
.choice-btn {
font-size: 18px;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
</style>
<div id=”game-container”>
<h1>Rock Paper Scissors</h1>
<button class=”choice-btn” onclick=”makeChoice(‘rock’)”>Rock</button>
<button class=”choice-btn” onclick=”makeChoice(‘paper’)”>Paper</button>
<button class=”choice-btn” onclick=”makeChoice(‘scissors’)”>Scissors</button>
<div id=”result”></div>
</div>
<script>
function makeChoice(userChoice) {
const choices = [‘rock’, ‘paper’, ‘scissors’];
const computerChoice = choices[Math.floor(Math.random() * 3)];
document.getElementById(‘result’).innerHTML = `You chose ${userChoice}. Computer chose ${computerChoice}.<br>${determineWinner(userChoice, computerChoice)}`;
}
function determineWinner(userChoice, computerChoice) {
if (userChoice === computerChoice) {
return “It’s a tie!”;
} else if (
(userChoice === ‘rock’ && computerChoice === ‘scissors’) ||
(userChoice === ‘paper’ && computerChoice === ‘rock’) ||
(userChoice === ‘scissors’ && computerChoice === ‘paper’)
) {
return ‘You win!’;
} else {
return ‘Computer wins!’;
}
}
</script>
This code creates a simple Rock, Paper, Scissors game with buttons for the user to make a choice.