Rock Paper Scissors Game

This game creates a simple Rock, Paper, Scissors game.

It includes three buttons for the player to choose from, and it displays the result below.

You can embed this code into your blog to let your readers play the game.

Want to Download the This Code

Here is the Html Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
content="width=device-width, initial-scale=1.0" />
    <title>CSS Rock Paper 
Scissors | untoldcoding</title>
    <link rel="stylesheet"
 href="style.css" />
  </head>
  <body>
    <form>
      <input type="radio" id="rock-rock"
 name="rock-paper-scissors" />
      <input type="radio" id="rock-paper" 
name="rock-paper-scissors" />
      <input type="radio" id="rock-scissors" 
name="rock-paper-scissors" />
      <input type="radio" id="paper-rock" 
name="rock-paper-scissors" />
      <input type="radio" id="paper-paper" 
name="rock-paper-scissors" />
      <input type="radio" id="paper-scissors" 
name="rock-paper-scissors" />
      <input type="radio" id="scissors-rock" 
name="rock-paper-scissors" />
      <input type="radio" id="scissors-paper" 
name="rock-paper-scissors" />
      <input type="radio" id="scissors-scissors" 
name="rock-paper-scissors" />

      <div>
        <h1>Rock Paper Scissor 
game | UntoldCoding</h1>
        <div id="hands">
          <div class="hand" id="computer-hand">
            <div class="fist"></div>
            <div class="finger finger-1"></div>
            <div class="finger finger-2"></div>
            <div class="finger finger-3"></div>
            <div class="finger finger-4"></div>
            <div class="thumb"></div>
            <div class="arm"></div>
          </div>

          <div class="hand" id="user-hand">
            <div class="fist"></div>
            <div class="finger finger-1"></div>
            <div class="finger finger-2"></div>
            <div class="finger finger-3"></div>
            <div class="finger finger-4"></div>
            <div class="thumb"></div>
            <div class="arm"></div>
          </div>

          <div id="symbol">
            <div>
              <label for="rock-rock">✊</label>
              <label for="paper-rock">✊</label>
              <label for="scissors-rock">✊</label>
            </div>
            <div>
              <label for="rock-paper">🖐️</label>
              <label for="paper-paper">🖐️</label>
              <label for="scissors-paper">🖐️</label>
            </div>
            <div>
              <label for="rock-scissors">✌</label>
              <label for="paper-scissors">✌</label>
              <label for="scissors-scissors">✌</label>
            </div>
          </div>
        </div>
      </div>

      <div id="text">
        <h2></h2>
        <input class="untoldcoding" type="reset" 
value="Refresh This Round" />
      </div>
    </form>
  </body>
</html>

CSS Code:

@import url("https://fonts.googleapis.com/
css?family=Acme&display=swap");

@keyframes changeOrder {
  from {
    z-index: 9;
  }
  to {
    z-index: 1;
  }
}

@keyframes handShake {
  0%,
  100% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-10deg);
  }
}

@keyframes handShake2 {
  0%,
  100% {
    transform: rotateY(180deg) rotate(10deg);
  }
  50% {
    transform: rotateY(180deg) rotate(-10deg);
  }
}

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  font-family: Acme, Arial, sans-serif;
  background-color: black;
  color: white;
}

form {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

h1 {
  text-align: center;
}

#hands {
  text-align: center;
}

input:checked ~ div .hand {
  animation: none !important;
}

.hand {
  margin: 20px;
  width: 200px;
  height: 200px;
  position: relative;
  transform: rotate(10deg);
  display: inline-block;
  animation: handShake 2s infinite;
}

.hand > div {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid black;
  background: rgb(14, 255, 247);
  transition: all 0.1s;
}

.fist {
  height: 110px;
  left: 40px;
  top: 50px;
  width: 90px;
  border-radius: 20px 0 0 20px;
}

.finger {
  width: 70px;
  height: 30px;
  border-radius: 20px;
  left: 80px;
  transform-origin: 0 50%;
}

.finger-1 {
  top: 50px;
  --dif: 0px;
}
.finger-2 {
  top: 78px;
  left: 84px;
  --dif: 4px;
}
.finger-3 {
  top: 106px;
  --dif: 0px;
}
.finger-4 {
  top: 134px;
  height: 26px;
  left: 76px;
  --dif: -8px;
}

div.thumb {
  width: 35px;
  height: 70px;

  border-radius: 0 20px 20px 20px;
  top: 50px;
  left: 80px;
  border-left: 0 solid;
  box-shadow: -17px 6px 0 -15px rgb(0, 0, 0);
}

div.arm {
  width: 22px;
  height: 70px;
  left: 20px;
  top: 70px;
  border: 0;
  border-top: 2px solid rgb(255, 248, 248);
  border-bottom: 2px solid rgb(255, 255, 255);
}

#user-hand {
  transform: rotateY(180deg);
  animation: handShake2 2s infinite;
  position: relative;
}

input[type="radio"] {
  position: absolute;
  top: -1000in;
  left: -1000in;
}

input[id$="scissors"]:checked ~ 
div #user-hand .finger-1,
input[id^="scissors"]:checked ~ 
div #computer-hand .finger-1 {
  width: 130px;
  transform: rotate(-5deg);
}

input[id$="scissors"]:checked ~ 
div #user-hand .finger-2,
input[id^="scissors"]:checked ~ 
div #computer-hand .finger-2 {
  width: 130px;
  transform: rotate(5deg);
}

input[id$="paper"]:checked ~ 
div #user-hand .finger-1,
input[id$="paper"]:checked ~ 
div #user-hand .finger-2,
input[id$="paper"]:checked ~ 
div #user-hand .finger-3,
input[id$="paper"]:checked ~ 
div #user-hand .finger-4,
input[id^="paper"]:checked ~ 
div #computer-hand .finger-1,
input[id^="paper"]:checked ~ 
div #computer-hand .finger-2,
input[id^="paper"]:checked ~ 
div #computer-hand .finger-3,
input[id^="paper"]:checked ~ 
div #computer-hand .finger-4 {
  left: 124px;
  left: calc(124px + var(--dif));
  width: 80px;
  border-left: 0;
  border-radius: 0 20px 20px 0;
}

#rock-rock:checked ~ div h2::before,
#paper-paper:checked ~ div h2::before,
#scissors-scissors:checked ~ div h2::before {
  content: "You Tied!";
}
#rock-paper:checked ~ div h2::before,
#paper-scissors:checked ~ div h2::before,
#scissors-rock:checked ~ div h2::before {
  content: "You Win!";
}
#rock-scissors:checked ~ div h2::before,
#paper-rock:checked ~ div h2::before,
#scissors-paper:checked ~ div h2::before {
  content: "Computer Wins!";
}

#text {
  text-align: center;
  display: none;
  color: rgb(13, 189, 189);
}

input:checked ~ #text {
  display: block;
}

#hands {
  display: flex;
  align-items: center;
  justify-content: center;
}

#symbol {
  width: 30px;
  height: 200px;
  display: inline-flex;
  flex-direction: column;
}

#symbol > div {
  flex: 1;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  overflow: hidden;
  position: relative;
}

label:active {
  position: static;
  margin-left: 60px;
}

label:active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  z-index: 10;
  height: 60px;
}

label {
  animation: changeOrder 0.45s infinite linear;
  background: #000000;
  border: 1px solid #16dece;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 60px;
  width: 60px;
  line-height: 60px;
  font-size: 2rem;
  position: absolute;
  top: 0;
  left: 0;
  user-select: none;
}

label:nth-of-type(1) {
  animation-delay: -0s;
}
label:nth-of-type(2) {
  animation-delay: -0.15s;
}
label:nth-of-type(3) {
  animation-delay: -0.3s;
}

.untoldcoding {
  background-color: #000000;
  padding: 20px;
  color: #fffafa;
  font-size: 15px;
  font-weight: 500;
  border: 1px solid rgb(13, 211, 214);
}

Want to Direct Access the code ?

See the Pen Rock Paper Scissors by vishaltewatia (@vishaltewatia) on CodePen.

Join us on Telegram : Click here.

Join with us YouTube : Click here.

Join with us Instagram: Click here.

FAQs (Frequently Asked Questions) on Rock Paper Scissors Game in HTML and CSS with Source Code

1. What is the Rock Paper Scissors Game?

The Rock Paper Scissors Game is a classic hand game played between two players, typically used as a decision-making tool or a simple form of entertainment. In the game, each player simultaneously forms one of three shapes with an outstretched hand: rock, paper, or scissors. The outcome is determined by the rules: rock crushes scissors, scissors cuts paper, and paper covers rock.

2. How is the Rock Paper Scissors Game implemented in HTML and CSS?

The Rock Paper Scissors Game can be implemented in HTML and CSS by creating a user interface (UI) with buttons or clickable elements representing the player's choices (rock, paper, or scissors) and incorporating CSS for styling and layout. JavaScript is typically used to add interactivity and handle game logic, such as determining the winner and updating the game state.

3. What are the key components required to create the Rock Paper Scissors Game in HTML and CSS?

To create the Rock Paper Scissors Game in HTML and CSS, you'll need:

HTML structure: Defines the layout of the game interface, including buttons or clickable elements for player choices and areas to display the game results.
CSS styling: Applies visual styles, such as colors, fonts, and layout, to the game interface to enhance its appearance and user experience.
JavaScript logic: Implements the game mechanics, including handling player input, determining the winner, and updating the game state dynamically.

4. Can I customize the appearance and layout of the Rock Paper Scissors Game with HTML and CSS?

Yes, the appearance and layout of the Rock Paper Scissors Game can be customized extensively using HTML and CSS. You can modify elements such as button styles, background colors, text fonts, and overall design aesthetics to create a personalized and visually appealing game interface.

5. Is JavaScript necessary to implement the Rock Paper Scissors Game?

While HTML and CSS can be used to create the visual interface of the Rock Paper Scissors Game, JavaScript is essential for adding interactivity and implementing game logic. JavaScript handles user input, calculates game outcomes, updates the UI dynamically, and facilitates interactions between the player and the game.

6. Are there any performance considerations when creating the Rock Paper Scissors Game with HTML, CSS, and JavaScript?

Performance considerations may arise, particularly for more complex game implementations or when handling large numbers of simultaneous players. It's important to optimize the code for efficiency, minimize unnecessary computations, and use techniques such as event delegation and asynchronous programming to ensure smooth gameplay and responsive user interactions.

7. Can I access the source code for the Rock Paper Scissors Game implemented in HTML, CSS, and JavaScript?

Yes, the source code for the Rock Paper Scissors Game implemented in HTML, CSS, and JavaScript is often available for free or as part of online tutorials, resources, or repositories. You can study the source code, modify it to suit your preferences, or use it as a basis for creating your own customized version of the game

Rock Paper Scissors Game | HTML CSS Game with Source Code