Rock Papper Scissor Game using Html, CSS & JavaScript

By /

In today’s blog we are going to make Rock Paper Scissors game using HTML, CSS and JavaScript.

Language Used HTML, CSS and JavaScript
Download Project Link Bellow
External link / Dependencies NO

Step 01 :- Create a file in VS code and named it index.html

HTML Code –

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8>" />
    <title>Rock Papaer Scissors Game</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
    <header>
        <h1>Rock Paper Scissors Game</h1>
    </header>
    <div class="score-board">
        <div id="user-label" class="badge">user</div>
        <div id="computer-label" class="badge">comp</div>
        <span id="user-score">0</span> : <span id="computer-score">0</span>
    </div>
    <div class="result">
        <p>Paper covers rock. You win!</p>
    </div>
    <div class="choices">
        <div id="rock" class="choice">
            <img width="48" height="48" src="rock.png" />
        </div>
        <div id="paper" class="choice">
            <img width="48" height="48" src="paper.png" />
        </div>
        <div id="scissors" class="choice">
            <img width="48" height="48" src="scissor.png" />
        </div>
        <p id="action-message">Try Your Luck</p>
    </div>
    <script src="script.js" type="text/javascript"></script>
</body>

</html>

Step 02 :- Creating another file and named it style.css

CSS Code –

@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700");
@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro:300,500");
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
* {
  margin: 0;
  padding: 0;
}
body {
  background: #24272e;
  color: #ffffff;
  font-family: "Roboto", sans-serif;
}
code {
  font-family: "Source Code Pro", monospace;
  font-size: 12px;
}
a {
  font-family: "Source Code Pro", monospace;
  color: #ffcc99;
}
a:hover {
  color: #ffba76;
}
header {
  background: #afafaf;
  padding: 20px;
}
header h1 {
  text-align: center;
  font-weight: 100;
  color: black;
  font-weight: bold;
}
.score-board {
  border: 3px solid #fff;
  width: 300px;
  margin: 40px auto;
  font-size: 40px;
  border-radius: 4px;
  text-align: center;
  padding: 15px 20px;
  position: relative;
}
.badge {
  background: #4dabe2;
  text-transform: uppercase;
  font-size: 14px;
  padding: 10px 6px;
}
#user-label {
  position: absolute;
  top: 50%;
  left: -5%;
  transform: translate(-10%, -50%);
}
#computer-label {
  position: absolute;
  top: 50%;
  right: -5%;
  transform: translate(10%, -50%);
}
.result {
  font-weight: 300;
  text-align: center;
  font-size: 32px;
  line-height: 40px;
}
.result {
  line-height: 50px;
}
.choices {
  margin: 0 auto;
  text-align: center;
  padding: 40px 0;
}
.choice {
  display: inline-block;
  border: 3px solid #fff;
  border-radius: 50%;
  padding: 10px;
  margin: auto 10px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.choice img {
  filter: invert(100%);
}
#action-message {
  text-align: center;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 40px 0;
}
.winningStyles {
  border: 3px solid #4dcc7d;
  background-color: #043507;
  box-shadow: 0 0 20px #043507;
}
.losingStyles {
  border: 3px solid #c52e2e;
  background-color: #2e0303;
  box-shadow: 0 0 20px #2e0303;
}
.drawStyles {
  border: 3px solid #444;
  background-color: #222;
  box-shadow: 0 0 20px #222;
}
sup {
  margin: 0;
  padding: 0;
}

Step 03 :- Create javascript file in VS code and named it script.js

JavaScript Code –

let userScore = 0;
let computerScore = 0;
const userScore_span = document.getElementById('user-score');
const computerScore_span = document.getElementById('computer-score');
const scoreBoard_div = document.querySelector('.score-board');
const result_div = document.querySelector('.result');
const rock_div = document.getElementById('rock');
const paper_div = document.getElementById('paper');
const scissors_div = document.getElementById('scissors');
function getComputerChoice() {
const choices = ['rock', 'paper', 'scissors'];
const randomNumber = Math.floor(Math.random() * 3);
return choices[randomNumber];
}
function convertCase(anythingIwant) {
if (anythingIwant === 'paper') return 'Paper';
if (anythingIwant === 'scissors') return 'Scissors';
return 'Rock';
}
function win(user, computer) {
userScore++;
userScore_span.innerHTML = userScore;
const userName = ' (user)'.fontsize(3).sup();
const compName = ' (comp)'.fontsize(3).sup();
result_div.innerHTML = `<p>${convertCase(user)}${userName} beats ${convertCase(computer)}${compName}. You win!</p>`;
const roundStatus = document.getElementById(user);
roundStatus.classList.add('winningStyles');
setTimeout(() => roundStatus.classList.remove('winningStyles'), 300);
}
function loses(user, computer) {
computerScore++;
computerScore_span.innerHTML = computerScore;
const userName = ' (user)'.fontsize(3).sup();
const compName = ' (comp)'.fontsize(3).sup();
result_div.innerHTML = `<p>${convertCase(computer)}${compName} beats ${convertCase(user)}${userName}. You lose!</p>`;
const roundStatus = document.getElementById(user);
roundStatus.classList.add('losingStyles');
setTimeout(() => roundStatus.classList.remove('losingStyles'), 300);
}
function draw(user, computer) {
const userName = ' (user)'.fontsize(3).sup();
const compName = ' (comp)'.fontsize(3).sup();
result_div.innerHTML = `<p>It was a draw! You both chose ${convertCase(user)}</p>`;
const roundStatus = document.getElementById(user);
roundStatus.classList.add('drawStyles');
setTimeout(() => roundStatus.classList.remove('drawStyles'), 300);
}
function game(userChoice) {
const computerChoice = getComputerChoice();
switch (userChoice + computerChoice) {
case 'paperrock':
case 'rockscissors':
case 'scissorspaper':
win(userChoice, computerChoice);
break;
case 'rockpaper':
case 'scissorsrock':
case 'paperscissors':
loses(userChoice, computerChoice);
break;
case 'rockrock':
case 'scissorsscissors':
case 'paperpaper':
draw(userChoice, computerChoice);
console.log("draw");
break;
}
}
function main() {
rock_div.addEventListener('click', () => game('rock'));
paper_div.addEventListener('click', () => game('paper'));
scissors_div.addEventListener('click', () => game('scissors'));
}
main();

OutPut :-

rock-paper-scissor-game-codejuster

rock-paper-scissor-game-codejuster

 

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *