Rock Paper Scissors JavaScript Game
Today we going to develop Rock Paper Scissors JavaScript game. I decided to share my code with you. So let’s make Rock Paper Scissors Game in JavaScript.
What we are gonna do?
In this game, the computer and user are the players. User just needs to press Rock, Paper, and Scissors button. Computer also generates their choice while the user presses the button. Every time when the user presses the button, one function call made to check the condition for winning. According to the condition, the score counter will increase. This game is infinite.
Let’s Code the Rock Paper Scissors Game in JavaScript
Here I’m using bootstrap for UI purpose. You can also use your CSS but today we just focus on the logic of rock paper scissors javascript.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock Paper Scissors</title>
<!-- loading bootstrap css file -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="d-flex justify-content-evenly">
<div class="text-center">
<h5>Computer Score</h5>
<h4 id="computer-score">0</h4>
</div>
<div class="text-center">
<h5>Your Score</h5>
<h4 id="player-score">0</h4>
</div>
</div>
<div class="d-flex flex-row justify-content-center align-items-center" style="height: 70vh;">
<div class="">
<div class="text-center">
<h4>Computer</h4>
<h1 id="computer-ch" style="transform:rotate(180deg);" class="display-1">✊</h1>
<div class="my-5">
<small><i class="text-muted">follow @code_snail</i></small>
<br>
<b id="message">Message</b>
</div>
<h1 class="display-1" id="player-ch">✊</h1>
<h4>You</h4>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center fixed-bottom">
<button class="btn btn-primary p-0">
<h1 class="display-3 p-4" id="rock">✊</h1>
</button>
<button class="btn btn-primary p-0 mx-2">
<h1 class="display-3 p-4" id="paper">🖐</h1>
</button>
<button class="btn btn-primary p-0">
<h1 class="display-3 p-4" id="scissors">✌️</h1>
</button>
</div>
</div>
<!-- loading script.js -->
<script src="script.js"></script>
<!-- loading bootstrap js file -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous"></script>
</body>
</html>
script.js
var btn_rock = document.querySelector('#rock');
var btn_paper = document.querySelector('#paper');
var btn_scissors = document.querySelector('#scissors');
var player_ch = document.querySelector("#player-ch");
var comp_ch = document.querySelector("#computer-ch");
var msg = document.querySelector("#message");
var computer_score = document.querySelector("#computer-score");
var player_score = document.querySelector("#player-score");
//generate random choice from array for computer choice
var myArray = ["✊", "🖐", "✌️"];
var computer_ch = '';
var user_ch = '';
var comp_score = 0
var user_score = 0
// change the player's hand by clicking the button and set the text of the player side
btn_rock.addEventListener('click', () => {
// generate choice for computer every time user click the button and storing in computer_ch
computer_ch = myArray[Math.floor(Math.random() * myArray.length)];
// set the generated computer choice
comp_ch.innerText = computer_ch;
// set the user text same as btn rock (emoji)
player_ch.innerText = btn_rock.innerText;
// storing rock emoji in user_ch
user_ch = btn_rock.innerText;
//check for win
check_for_win(computer_ch, user_ch);
});
btn_paper.addEventListener('click', () => {
// generate choice for computer every time user click the button
computer_ch = myArray[Math.floor(Math.random() * myArray.length)];
// set the generated computer choice
comp_ch.innerText = computer_ch;
// set the user text same as btn paper (emoji)
player_ch.innerText = btn_paper.innerText;
// storing paper emoji in user_ch
user_ch = btn_paper.innerText;
//check for win
check_for_win(computer_ch, user_ch);
});
btn_scissors.addEventListener('click', () => {
// generate choice for computer every time user click the button
computer_ch = myArray[Math.floor(Math.random() * myArray.length)];
// set the generated computer choice
comp_ch.innerText = computer_ch;
// set the user text same as btn scissor (emoji)
player_ch.innerText = btn_scissors.innerText;
// storing scissors emoji in user_ch
user_ch = btn_scissors.innerText;
//check for win
check_for_win(computer_ch, user_ch);
});
// check for wining, this function call every time button clicked
// not declare the winner but increase scores according to condition
function check_for_win(computer_ch, user_ch) {
// console.log(computer_ch, user_ch);
if (user_ch == computer_ch) {
// nothing
//set message
msg.classList.remove("text-success");
msg.classList.remove("text-danger");
msg.innerText = "Tie";
}
// guys we are comparing emojis XD
else if (user_ch == "✊") {
if (computer_ch == "🖐") {
//set message
msg.innerText = "👉 You lose! Paper covers Rock";
// add class accoding to message, here red becuase you lose
// before that remove current class
msg.classList.remove("text-success");
msg.classList.add("text-danger");
//computer wins, so increment computer's score
computer_score.innerText = ++comp_score;
}
else {
//set message
msg.innerHTML = "👉 You win! Rock smashes Scissors";
// add class accoding to message, here red becuase you win
// before that remove current class
msg.classList.remove("text-danger");
msg.classList.add("text-success");
//player wins, so increment player's score
player_score.innerText = ++user_score;
}
}
else if (user_ch == "🖐") {
if (computer_ch == "✌️") {
//set message
msg.innerText = "👉 You lose! Scissor cut Paper";
// add class accoding to message, here red becuase you lose
// before that remove current class
msg.classList.remove("text-success");
msg.classList.add("text-danger");
//computer wins, so increment computer's score
computer_score.innerText = ++comp_score;
}
else {
//set message
msg.innerHTML = "👉 You win! Paper covers Rock";
// add class accoding to message, here red becuase you win
// before that remove current class
msg.classList.remove("text-danger");
msg.classList.add("text-success");
//player wins, so increment player's score
player_score.innerText = ++user_score;
}
}
else if (user_ch == "✌️") {
if (computer_ch == "✊") {
//set message
msg.innerText = "👉 You lose! Rock smashes Scissors";
// add class accoding to message, here red becuase you lose
// before that remove current class
msg.classList.remove("text-success");
msg.classList.add("text-danger");
//computer wins, so increment computer's score
computer_score.innerText = ++comp_score;
}
else {
//set message
msg.innerHTML = "👉 You win! Scissor cut Paper";
// add class accoding to message, here red becuase you win
// before that remove current class
msg.classList.remove("text-danger");
msg.classList.add("text-success");
//player wins, so increment player's score
player_score.innerText = ++user_score;
}
}
else {
msg.innerHTML = ":(";
}
}
// follow me on Instagram @code_snail
Output
Play now: Rock Paper Scissors JavaScript Game (Live Demo)
Hope you like it. Share this game and make your own rock paper scissors game in javascript.
more projects,