Rock Paper Scissor in HTML CSS JavaScript

   December 6, 2022

Today, we will be developing a simple Rock Paper Scissor in HTML CSS JavaScript. This is a hand game, played by two players, and requires to count your points, it is a fun game to play for kids, but it is stated that it was played by farmers to know who is going to win in a dispute, it depends on how many points one score at last.

Requirements

  • Code Editor (VS Code Preferred)
  • Chromium Browser (Chrome Preferred)
  • Basic Knowledge of HTML, CSS, Javascript, and Bootstrap

Features

  • Users can enter their names
  • Emojis to show win or loss
  • Users can select the number of rounds
  • Users will need to click on emojis(rock or paper or scissors) to mark their choice

Folder Structure

We will be developing a Rock Paper Scissor in HTML CSS JavaScript. Check out this image for the folder structure of our project.

The project will include three files, index.html, main.js, and style.css.

folder structure of project

index.html contains our Html code.

style.css has been used to style our web page.

main.js contains all the logic.

Coding Rock Paper Scissor in JavaScript

HTML code:

<html>
  <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" />
    <link rel='stylesheet' type='text/css' ' media="screen" href="style.css"/>
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat"
      rel="stylesheet"
    />
    <title>Rock Paper Scissor</title>
  </head>

  <body>
    <section id="player-login">
      <div id="intro">
        <h1>Welcome to RPS Game<br /><span>Let's play Hand game</span></h1>
      </div>
      <form>
        <input type="text" id="player" placeholder="Your name" /><br />
        <input
          type="number"
          id="round-number"
          max="10"
          min="3"
          placeholder="Number of rounds"
        /><br />
        <input type="button" id="submit" onclick="login()" value="START" />
      </form>
    </section>

    <section id="results-section">
      <div id="results-screen">
        <div class="player-results">
          <div id="final-player-name" class="final-name">Estaban</div>
          <div id="final-player-score" class="final-score">10</div>
          <div class="details">
            <li>Wins: <span id="player-wins">0</span></li>
            <li>Draws: <span id="draws">0</span></li>
            <li>Losses: <span id="player-losses">0</span></li>
          </div>
        </div>
        <div class="comp-results">
          <div id="final-computer-name" class="final-name">John</div>
          <div id="final-computer-score" class="final-score">10</div>
          <div class="details">
            <li>Wins: <span id="computer-wins">0</span></li>
            <li>Draws: <span id="draws">0</span></li>
            <li>Losses: <span id="computer-losses">0</span></li>
          </div>
        </div>
        <div id="final-comment">
          <span id="winner-name">No one</span> Wins😱🥳
        </div>
      </div>
    </section>

    <section id="faq">
      <h1>Rules to Play, How?</h1>
      <p>
        Our Childhood hand game rock-paper-scissors is a game played by us to
        enjoy our time. It is stated that it is also <br />
        used to clear disputes between villagers<br />
        This game is played in a series of rounds and the person who wins most
        rounds wins the game.
      </p>
      <p>
        <b
          >All you need to know is:<br />-Rock(👊) beats scissors(✌)<br />-Scissors(✌)
          beats paper(🖐)<br />-Paper(🖐) beats rock(👊)</b
        >
      </p>
      <input type="button" onclick="faq()" value="CLOSE" />
    </section>

    <section id="game">
      <div id="dashboard">
        <div id="scores">
          <div class="score" id="player-score">0</div>
          <div class="score" id="computer-score">0</div>
        </div>
        <div class="name" id="player-name">You</div>
        <div class="name" id="computer-name">Smith</div>
        <div id="marker"></div>
      </div>

      <div id="commentary">Wooohhaaaaa!!</div>

      <div id="playground">
        <div id="player-zone">
          <div id="player-choice">🤜</div>
          <button class="controls" id="rock" onclick="chose('rock')">👊</button>
          <button class="controls" id="paper" onclick="chose('paper')">
            🖐
          </button>
          <button class="controls" id="scissors" onclick="chose('scissors')">
            ✌
          </button>
        </div>
        <div id="comp-choice">🤜</div>
      </div>
    </section>
    <div id="guide">Refresh or reload page to restart</div>
    <script src="script.js"></script>
  </body>
  <script src="main.js"></script>
</html>

JavaScript Code:

var roundNumber;
var trackRounds = 0;
let compNames = ["Smith", "David", "John", "bonny", "Shivv"];
let compName = document.getElementById("computer-name");
let chosenCompName = compNames[Math.floor(Math.random() * 5)];
let player;

function login() {
    player = document.getElementById("player").value;
    roundNumber = document.getElementById("round-number").value;
    let startButton = document.getElementById("submit");
    let faq = document.getElementById("faq");

    if (/\w{2,10}/.test(player) == false || /\d/.test(roundNumber) == false) {
        alert(
            "Please enter a valid name of atleast 2 letters, don't forget the number of rounds."
        );
        return 0;
    } else if (roundNumber > 10 || roundNumber < 3) {
        alert("Please enter a round number between 3 and 10.");
        return 0;
    }

    startButton.value = "LET'S GO";
    startButton.style.background = "#5AC994";

    document.getElementById("computer-name").innerText = chosenCompName;
    document.getElementById("player-name").innerText = player;

    function closeWindow() {
        document.getElementById("player-login").style.display = "none";
        document.getElementById("game").style.display = "block";
    }

    setTimeout(() => closeWindow(), 790);
}

function faq() {
    document.getElementById("faq").style.display = "none";
    document.getElementById("player-login").style.display = "block";
}

//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
/*/////////////////--PLAYGROUND--//////////////// */
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

let trackCompScore = 0;
let trackPlayerScore = 0;

function chose(n) {
    let playerChoice = document.getElementById(n).innerText;
    let playerDisplay = document.getElementById("player-choice");
    let compDisplay = document.getElementById("comp-choice");
    let comments = document.getElementById("commentary");
    let compScore = document.getElementById("computer-score");
    let playerScore = document.getElementById("player-score");
    let controls = document.getElementsByClassName("controls");

    if (roundNumber == 0) {
        if (trackCompScore > trackPlayerScore) {
            document.getElementById("winner-name").innerText = chosenCompName;
        } else {
            document.getElementById("winner-name").innerText = player;
        }
        document.getElementById("player-wins").innerText = trackPlayerScore;
        document.getElementById("player-losses").innerText = trackCompScore;
        document.getElementById("computer-wins").innerText = trackCompScore;
        document.getElementById("computer-losses").innerText = trackPlayerScore;

        document.getElementById("final-computer-score").innerText =
            trackCompScore;
        document.getElementById("final-player-score").innerText =
            trackPlayerScore;
        document.getElementById("final-computer-name").innerText =
            chosenCompName;
        document.getElementById("final-player-name").innerText = player;
        document.getElementById("draws").innerText =
            trackRounds - (trackCompScore + trackPlayerScore);
        document.getElementById("results-section").style.display = "block";
        document.getElementById("game").style.display = "none";
        return 0;
    }
    roundNumber--;

    compDisplay.innerText = "🤜";
    playerDisplay.innerText = "🤜";
    playerDisplay.classList.add("handshaking");
    compDisplay.classList.add("handshaking-comp");
    for (control of controls) {
        control.style.display = "none";
    }

    function gameplay() {
        playerDisplay.classList.remove("handshaking");
        compDisplay.classList.remove("handshaking-comp");
        function computer() {
            let options = ["🖐", "👊", "✌"];
            playerDisplay.innerText = playerChoice;
            compDisplay.innerText = options[Math.floor(Math.random() * 3)];
        }
        computer();

        function modifyScore() {
            let choices = playerDisplay.innerText + compDisplay.innerText;
            trackRounds += 1;
            if (compDisplay.innerText == playerDisplay.innerText) {
                comments.innerText = "Draw❕❕😄";
                comments.classList.add("exclame");
            } else if (compDisplay.innerText !== playerDisplay.innerText) {
                comments.classList.add("exclame");
                switch (choices) {
                    case "👊🖐":
                        compScore.innerText = trackCompScore + 1;
                        trackCompScore += 1;
                        comments.innerText = "Lost❕❕😆";
                        break;
                    case "👊✌":
                        playerScore.innerText = trackPlayerScore + 1;
                        trackPlayerScore += 1;
                        comments.innerText = "Won❕❕😒";
                        break;
                    case "🖐✌":
                        compScore.innerText = trackCompScore + 1;
                        trackCompScore += 1;
                        comments.innerText = "Lost❕❕😝";
                        break;
                    case "🖐👊":
                        playerScore.innerText = trackPlayerScore + 1;
                        trackPlayerScore += 1;
                        comments.innerText = "Haaaa❕❕😲";
                        break;
                    case "✌🖐":
                        playerScore.innerText = trackPlayerScore + 1;
                        trackPlayerScore += 1;
                        comments.innerText = "Hhmmm❕❕😑";
                        break;
                    case "✌👊":
                        compScore.innerText = trackCompScore + 1;
                        trackCompScore += 1;
                        comments.innerText = "Woooo❕❕😝";
                        break;
                }
            }
        }
        modifyScore();
        setTimeout(() => comments.classList.remove("exclame"), 1000);

        for (control of controls) {
            control.style.display = "block";
        }
    }

    setTimeout(() => gameplay(), 2000);
}

CSS code:

html {
  font-size: 10px;
  font-family: Montserrat;
  background-color: #141b29;
  color: #adb2bd;
  background-size: cover;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
  background: linear-gradient(135deg, #3b005c, #8441a4);
}

#guide {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 1rem;
}

#game {
  display: none;
}

/*===================STARTING THE RESULT SCREEN=========================*/

#results-screen {
  width: 40rem;
  height: 40rem;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 5% 15% 60% 20%;
  position: absolute;
  transform: translate(-50%, 0);
  left: 50%;
  top: 10%;
  animation: rgb-border 2s infinite;
  color: white;
  text-align: center;
}

#results-section {
  display: none;
}

.player-results {
  height: 100%;
  grid-column: 1;
  grid-row: 1/5;
}

.comp-results {
  height: 100%;
  grid-column: 2;
  grid-row: 1/5;
}

#results-screen .final-name {
  grid-row: 1;
  width: 100%;
  font-size: 3rem;
  background: #008cff;
  color: white;
}
#results-screen .final-score {
  grid-row: 2;
  font-size: 5rem;
  color: white;
  background: #e2df19;
}

.details {
  padding-top: 3rem;
  grid-row: 3;
  font-size: 3rem;
  list-style-type: none;
}

#final-comment {
  padding-top: 2rem;
  grid-row: 4;
  grid-column: 1/3;
  font-size: 3rem;
}

/*===================STARTING THE INTRO, HOW TO PLAY===================*/
#faq {
  background: #cecece;
  color: #282828;
  width: 5rem;
  min-width: 400px;
  height: 30rem;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  font-size: 1.5rem;
  top: 20%;
  animation: rgb-border 3s infinite;
}

#faq input {
  background: orangered;
  border: 0;
  animation: rgb-border 3s infinite;
  border-radius: 5px;
  font-weight: bolder;
}

/*--------------------------Starting the form section------*/

#player-login {
  display: none;
  text-align: center;
  background: rgb(0, 140, 255);
  background: linear-gradient(
    29deg,
    rgba(251, 176, 64, 1) 0%,
    rgba(249, 236, 50, 1) 73%
  );
  width: 10rem;
  min-height: 200px;
  min-width: 250px;
  border-radius: 10px;
  display: grid;
  grid-template-rows: 20% 75%;
  grid-gap: 5%;
  padding: 0;
  animation: rgb-border 3s infinite;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, 0);
}

#player-login form {
  margin-top: 50px;
  grid-row: 2;
  padding-bottom: 2rem;
}

#player-login #intro {
  color: #282828;
  font-family: "Montserrat";
  font-size: 1.7rem;
}

#player-login #intro span {
  margin-bottom: 0px;
  font-size: 1.9rem;
}

#player-login input {
  width: 180px;
  min-width: 180px;
  height: auto;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #008cff;
  margin: 5px;
}

#player-login input:hover {
  border: 2px solid #e2df19;
}

#submit {
  background-color: #8545f5;
  height: 30px !important;
  font-family: Montserrat;
  color: #282828;
  font-weight: bolder;
  animation: rgb-border 2s infinite;
  cursor: pointer;
}

@keyframes rgb-border {
  0% {
    border-left: 2px solid #e2df19;
    border-bottom: 2px solid #e9530e;
    border-right: 2px solid #11f74a;
    border-top: 2px solid #3514f1;
  }
  25% {
    border-left: 2px solid #3514f1;
    border-bottom: 2px solid #e2df19;
    border-right: 2px solid #e9530e;
    border-top: 2px solid #11f74a;
  }
  50% {
    border-left: 2px solid #11f74a;
    border-bottom: 2px solid #3514f1;
    border-right: 2px solid #e2df19;
    border-top: 2px solid #e9530e;
  }
  75% {
    border-left: 2px solid #e9530e;
    border-bottom: 2px solid #11f74a;
    border-right: 2px solid #3514f1;
    border-top: 2px solid #e2df19;
  }
  100% {
    border-left: 2px solid #e2df19;
    border-bottom: 2px solid #e9530e;
    border-right: 2px solid #11f74a;
    border-top: 2px solid #3514f1;
  }
}

/*Starting with scores section*/
#dashboard {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}
#dashboard div {
  border-radius: 5px;
}

#marker {
  width: 2rem;
  height: 2rem;
  background: #5ac994;
  position: absolute;
  top: 50%;
  left: 48%;
  transform-origin: center;
  transform: rotate(45deg) translate(-50%, -50%);
  border-radius: 0 !important;
}

#scores {
  background-color: #cecece;
  color: #282828;
  width: 25rem;
  height: 10rem;
  font-size: 8rem;
  display: grid;
  grid-template-rows: 15rem;
  grid-template-columns: 12rem 12rem;
  grid-gap: 1rem;
  text-align: center;
}

#computer-score {
  grid-column: 2;
}

#player-score {
  grid-column: 1;
}

.name {
  height: 2.5rem;
  font-size: 2rem;
  background-color: #5ac994;
  text-align: center;
  color: #282828;
  padding: 1px 2px;
}

#computer-name {
  position: absolute;
  top: 3rem;
  left: 24rem;
}

#player-name {
  position: absolute;
  top: 3rem;
  right: 24rem;
}

/*Starting the commentary section*/

#commentary {
  width: 25rem;
  height: 5rem;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  text-align: center;
  display: none;
  color: white;
}

.exclame {
  animation: exclame 1.5s;
  display: block !important;
}

@keyframes exclame {
  0% {
    display: block !important;
    top: 30%;
    opacity: 0.2;
  }

  100% {
    top: 20%;
    opacity: 1.2;
    font-size: 4.5rem;
  }
}

/*Starting the playground*/

#playground {
  width: 50.5rem;
  height: 20rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: yellow;
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 30rem 20rem;
  grid-gap: 1rem;
  border-radius: 10px;
}

#playground button {
  font-size: 2.5rem;
  border-radius: 10px;
}

#player-zone {
  width: 30rem;
  height: 20rem;
  grid-column: 1;
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: 6rem 6rem 6rem;
  grid-gap: 1rem;
}

#player-zone button {
  width: 100%;
  height: 100%;
}

#player-zone button:hover {
  transform: scale(1.05);
  opacity: 0.7;
}

#comp-choice {
  width: 20rem;
  height: 20rem;
  grid-column: 2;
  font-size: 15rem;
  transform: rotateY(180deg);
  animation-delay: 0.05s;
}

#player-choice {
  grid-column: 2;
  grid-row: 1/4;
  width: 95%;
  height: 100%;
  font-size: 15rem;
  text-align: center;
}

#paper {
  grid-row: 2;
  grid-column: 1;
}

#scissors {
  grid-row: 3;
  grid-column: 1;
}

#rock {
  grid-row: 1;
  grid-column: 1;
}

.handshaking {
  animation: hands-shaking 0.5s infinite ease-in-out;
}

.handshaking-comp {
  animation: hands-shaking-comp 0.5s infinite ease-in-out;
}

@keyframes hands-shaking {
  0% {
    position: relative;
    top: 2rem;
    transform: rotate(10deg);
  }
  100% {
    position: relative;
    top: -2rem;
    transform: rotate(-10deg);
  }
}

@keyframes hands-shaking-comp {
  0% {
    position: relative;
    top: 2rem;
    transform: rotate(-10deg) rotateY(180deg);
  }
  100% {
    position: relative;
    top: -2rem;
    transform: rotate(10deg) rotateY(180deg);
  }
}

/*--------------------Optimizing for mobile devices-----------*/

@media (max-width: 700px) {
  html {
    font-size: 8px;
    background: rgb(25, 0, 255);
    background: linear-gradient(
      45deg,
      rgba(25, 0, 255, 1) 0%,
      rgba(226, 106, 25, 1) 82%
    );
  }

  #playground {
    grid-template-rows: 100%;
    grid-template-columns: 25rem 25rem;
    padding: 0;
    width: 99vw;
  }

  #playground button {
  }

  #player-zone {
    grid-column: 1;
    width: 15rem;
    height: 25rem;
    grid-template-columns: 5rem 5rem 5rem;
    grid-template-rows: 8rem 8rem 8rem;
  }

  #player-zone button {
    width: 100%;
    height: 100%;
  }

  #player-zone button:hover {
    transform: scale(1.05);
    opacity: 0.7;
  }

  #comp-choice {
    width: 20rem;
    height: 25rem;
    grid-column: 2;
    transform: rotateY(180deg);
    animation-delay: 0.05s;
  }

  #player-choice {
    grid-column: 1;
    grid-row: 1;
    width: 15rem;
    height: 19rem;
    font-size: 15rem;
    text-align: center;
  }

  #paper {
    grid-column: 2;
    grid-row: 3;
  }

  #scissors {
    grid-column: 3;
    grid-row: 3;
  }

  #rock {
    grid-column: 1;
    grid-row: 3;
  }
}

Output for Rock Paper Scissor in HTML CSS JavaScript:

Video output:

Image outputs:

output 1 for Rock Paper Scissor in HTML CSS JavaScript
output 2
output 3
output 4
output 5

Thank you for visiting our website.

JavaScript and web Projects

Also Read:

Share:

Author: Ayush Purawr